-
Notifications
You must be signed in to change notification settings - Fork 1
Open
Labels
documentationImprovements or additions to documentationImprovements or additions to documentationenhancementNew feature or requestNew feature or requestsite
Description
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, andlink rel=iconsizes - Theme and UX:
meta theme-color,mobile-web-app-capable(if applicable) - Optional/perf: preconnect/preload for key resources,
link rel=manifestif making PWA, CSP/meta tags if relevant - Ensure the
og:urlandcanonicalare stable (no session/query params)
- Required:
- 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.pngand 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
Labels
documentationImprovements or additions to documentationImprovements or additions to documentationenhancementNew feature or requestNew feature or requestsite