Skip to content

Align <head> tags with htmlhead.dev recommendations #1792

@roncli

Description

@roncli

Why

htmlhead.dev consolidates modern best-practices for the document <head> (critical metadata, social previews, mobile UX, canonicalization, and privacy-friendly defaults).

Our site currently has minimal head metadata (charset, title, basic og/twitter). Aligning will improve SEO, social sharing, mobile rendering, and make future features (PWA, AMP, analytics) easier to add.


What to do

  • Update the site's canonical head template(s) to include/standardize:
    • Required: <meta charset>, responsive viewport, <title>, meta description, rel="canonical"
    • Social: Open Graph (og:title, og:description, og:url, og:image, og:site_name), Twitter Card (summary_large_image + twitter:creator/site/image)
    • Favicons: proper /favicon.ico, apple-touch-icon, and link rel=icon sizes
    • Theme and UX: meta theme-color, mobile-web-app-capable (if applicable)
    • Optional/perf: preconnect/preload for key resources, link rel=manifest if making PWA, CSP/meta tags if relevant
    • Ensure the og:url and canonical are stable (no session/query params)
  • Provide a single canonical partial/template that other views/pages include.

Acceptance criteria

  • Site head templates contain at minimum: charset, viewport, title templating, meta description, rel=canonical, og:title/og:description/og:url/og:image, twitter:card/twitter:creator, favicon link, theme-color.
  • New or updated head template has documentation (README or inline comment) linking to https://htmlhead.dev and describing templating variables used (title, desc, image, canonical, year, version, etc).
  • Optional: provide a small 1200×630 social preview image at /assets/social-preview.png and a basic favicon.

Repo-specific notes for roncli/roncli.com

  • Locate the site's main layout or head template and centralize head metadata into a shared partial. If separate microsites or pages exist, ensure templating allows per-page overrides.

Suggested labels: enhancement, documentation, site


Suggested head snippet (adapt to your templating):

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>${title || 'Site Title'}</title>

  <meta name="description" content="${description || 'Short site description here.'}" />
  <link rel="canonical" href="${protocol}://${host}${encodeURI(canonicalPath || originalUrl)}" />

  <!-- Open Graph -->
  <meta property="og:site_name" content="${siteName || 'Site Name'}" />
  <meta property="og:title" content="${ogTitle || title || 'Site Title'}" />
  <meta property="og:description" content="${ogDescription || description}" />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="${protocol}://${host}${encodeURI(canonicalPath || originalUrl)}" />
  <meta property="og:image" content="${protocol}://${host}/assets/social-preview.png" />

  <!-- Twitter -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:creator" content="@roncli" />
  <meta name="twitter:site" content="@roncli" />
  <meta name="twitter:image" content="${protocol}://${host}/assets/social-preview.png" />

  <!-- Favicon and theme -->
  <link rel="icon" href="/favicon.ico" />
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
  <meta name="theme-color" content="#121212" />

  ${head || ''}
</head>

Metadata

Metadata

Assignees

No one assigned

    Labels

    documentationImprovements or additions to documentationenhancementNew feature or requestsite

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions