source: Klonkt/src/views/pages/admin-seo.ejs@ cc22112

<div class="container admin-site-edit-page">
  <p><a href="/admin" class="btn">&larr; Beheer</a></p>
  <h1>SEO &amp; vindbaarheid</h1>
  <p class="admin-tagline">Geavanceerde SEO van <strong><%= site.title %></strong> — hoe je site in zoekmachines en bij het delen op social media verschijnt.</p>

  <% if (typeof success !== 'undefined' && success) { %><div class="audio-flash audio-flash--ok"><%= success %></div><% } %>
  <% if (typeof error !== 'undefined' && error) { %><div class="audio-flash audio-flash--err"><%= error %></div><% } %>

  <form method="post" action="/admin/seo" class="site-form">

    <fieldset>
      <legend>Indexeren</legend>
      <label class="cb">
        <input type="checkbox" name="robots_index" value="1" <%= site.robots_index ? 'checked' : '' %>>
        <span>Zoekmachines mogen deze site indexeren <small class="form-hint-inline">— uit = <code>noindex</code> + sitemap.xml verborgen</small></span>
      </label>
    </fieldset>

    <fieldset>
      <legend>Titel &amp; omschrijving</legend>
      <label>
        <span>Titel-sjabloon <small class="form-hint-inline">— gebruik <code>{title}</code> en <code>{site}</code></small></span>
        <input type="text" name="title_template" value="<%= site.title_template || '{title} — {site}' %>" maxlength="200" placeholder="{title} — {site}">
      </label>
      <label>
        <span>Standaard-omschrijving <small class="form-hint-inline">— meta description / og:description als een pagina er geen heeft</small></span>
        <textarea name="default_description" rows="2" maxlength="500" placeholder="Korte omschrijving van je site (max ~160 tekens werkt het best)"><%= site.default_description || '' %></textarea>
      </label>
      <label>
        <span>Canonieke basis-URL <small class="form-hint-inline">— de productie-HTTPS-URL, voorkomt dubbele-content-straf</small></span>
        <input type="text" name="canonical" value="<%= site.canonical || '' %>" placeholder="https://jouw-domein.com" maxlength="200">
      </label>
      <label>
        <span>Auteur <small class="form-hint-inline">— meta author-tag</small></span>
        <input type="text" name="author" value="<%= site.author || '' %>" maxlength="120" placeholder="Jouw naam">
      </label>
    </fieldset>

    <fieldset>
      <legend>Delen op social media</legend>
      <label>
        <span>Standaard deel-afbeelding (URL) <small class="form-hint-inline">— og:image / Twitter-card; ~1200×630px</small></span>
        <input type="text" name="og_image_default" value="<%= site.og_image_default || '' %>" placeholder="https://jouw-domein.com/share.jpg" maxlength="500">
      </label>
      <label>
        <span>Taal-locale <small class="form-hint-inline">— og:locale, bv. <code>nl_NL</code> of <code>en_US</code></small></span>
        <input type="text" name="og_locale" value="<%= site.og_locale || '' %>" placeholder="nl_NL" maxlength="32">
      </label>
      <label>
        <span>Twitter / X-handle <small class="form-hint-inline">— met @</small></span>
        <input type="text" name="twitter" value="<%= site.twitter || '' %>" placeholder="@jouwnaam" maxlength="64">
      </label>
      <label>
        <span>Facebook App-ID <small class="form-hint-inline">— fb:app_id (optioneel)</small></span>
        <input type="text" name="facebook_app_id" value="<%= site.facebook_app_id || '' %>" maxlength="64">
      </label>
    </fieldset>

    <fieldset>
      <legend>Uitgever (JSON-LD / rich results)</legend>
      <label>
        <span>Type</span>
        <select name="schema_type">
          <option value="Person" <%= site.schema_type === 'Organization' ? '' : 'selected' %>>Persoon</option>
          <option value="Organization" <%= site.schema_type === 'Organization' ? 'selected' : '' %>>Organisatie / bedrijf</option>
        </select>
      </label>
      <label>
        <span>Naam <small class="form-hint-inline">— valt terug op de site-titel</small></span>
        <input type="text" name="publisher_name" value="<%= site.publisher_name || '' %>" maxlength="200">
      </label>
      <label>
        <span>URL</span>
        <input type="text" name="publisher_url" value="<%= site.publisher_url || '' %>" placeholder="https://jouw-domein.com" maxlength="200">
      </label>
      <label>
        <span>Logo (URL)</span>
        <input type="text" name="publisher_logo" value="<%= site.publisher_logo || '' %>" placeholder="https://jouw-domein.com/logo.png" maxlength="500">
      </label>
    </fieldset>

    <fieldset>
      <legend>Zoekmachine-verificatie</legend>
      <label>
        <span>Google site-verificatie</span>
        <input type="text" name="google_verification" value="<%= site.google_verification || '' %>" maxlength="200">
      </label>
      <label>
        <span>Bing <small class="form-hint-inline">— msvalidate.01</small></span>
        <input type="text" name="bing_verification" value="<%= site.bing_verification || '' %>" maxlength="200">
      </label>
      <label>
        <span>Pinterest <small class="form-hint-inline">— p:domain_verify</small></span>
        <input type="text" name="pinterest_verification" value="<%= site.pinterest_verification || '' %>" maxlength="200">
      </label>
      <label>
        <span>Yandex</span>
        <input type="text" name="yandex_verification" value="<%= site.yandex_verification || '' %>" maxlength="200">
      </label>
    </fieldset>

    <button type="submit" class="btn btn-primary">SEO opslaan</button>
  </form>
</div>

<style>
.admin-site-edit-page { max-width: 760px; margin: 3rem auto; padding: 0 1rem; }
.admin-site-edit-page h1 { font-family: var(--font-display, serif); font-size: 1.8rem; margin: 0 0 0.4rem; }
.admin-site-edit-page .admin-tagline { color: var(--ink-muted); margin: 0 0 1.75rem; }

.site-form { display: flex; flex-direction: column; gap: 1.5rem; }
.site-form fieldset {
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  background: var(--paper-2);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.site-form fieldset legend { font-family: var(--font-display, serif); font-size: 1rem; padding: 0 0.4rem; }
.site-form label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; color: var(--ink-muted, var(--ink-soft)); }
.site-form label.cb { flex-direction: row; align-items: flex-start; gap: 0.55rem; font-size: 0.9rem; color: var(--ink); }
.site-form label.cb input { margin-top: 0.15rem; }
.site-form label > span { line-height: 1.35; }
.form-hint-inline { font-weight: 400; color: var(--ink-muted); font-size: 0.82em; }
.site-form code { background: var(--paper); padding: 0.05rem 0.35rem; border-radius: 3px; font-size: 0.85em; }
.site-form input[type="text"], .site-form textarea, .site-form select {
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--rule);
  border-radius: 5px;
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.95rem;
  width: 100%;
  box-sizing: border-box;
}
.site-form textarea { resize: vertical; min-height: 2.6rem; }
.site-form select { max-width: 320px; }
.site-form input:focus, .site-form textarea:focus, .site-form select:focus {
  outline: none; border-color: var(--accent);
}
.seo-pointer p { margin: 0; font-size: 0.9rem; color: var(--ink-muted); }
.seo-pointer a { color: var(--accent); font-weight: 600; }
.site-form > button[type="submit"] { align-self: flex-start; }
</style>