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>
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
<meta charset>, responsive viewport,<title>, meta description,rel="canonical"og:title,og:description,og:url,og:image,og:site_name), Twitter Card (summary_large_image+twitter:creator/site/image)/favicon.ico,apple-touch-icon, andlink rel=iconsizesmeta theme-color,mobile-web-app-capable(if applicable)link rel=manifestif making PWA, CSP/meta tags if relevantog:urlandcanonicalare stable (no session/query params)Acceptance criteria
/assets/social-preview.pngand a basic favicon.Repo-specific notes for
roncli/roncli.comSuggested labels: enhancement, documentation, site
Suggested head snippet (adapt to your templating):