The Document Head

Everything in <head> is metadata — invisible to users but critical for browsers, search engines, social platforms, and performance. A well-configured head improves SEO, security, loading speed, and shareability.

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title | Site Name</title>
    <!-- meta, link, script tags follow -->
</head>

Order matters less than completeness, but place charset first and viewport early.

Essential Meta Tags 

  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Concise page summary for search results.">
<meta name="robots" content="index, follow, max-snippet:-1">
<meta name="author" content="GazeHub Team">
<meta name="theme-color" content="#007bff">
<link rel="canonical" href="https://www.gazehub.com/current-page/">

theme-color

Sets browser UI color (mobile address bar, PWA title bar):

  <meta name="theme-color" content="#1a1a2e" media="(prefers-color-scheme: dark)">
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
  
  <!-- Stylesheets -->
<link rel="stylesheet" href="/css/main.css">

<!-- Favicons -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- Web App Manifest -->
<link rel="manifest" href="/manifest.json">

<!-- Alternate languages -->
<link rel="alternate" hreflang="en" href="https://example.com/en/page">
<link rel="alternate" hreflang="es" href="https://example.com/es/page">
<link rel="alternate" hreflang="x-default" href="https://example.com/page">

<!-- RSS feed -->
<link rel="alternate" type="application/rss+xml" title="Blog RSS" href="/feed.xml">

Resource Hints — Performance

Tell the browser what to fetch early:

  <!-- DNS lookup only -->
<link rel="dns-prefetch" href="https://cdn.example.com">

<!-- Full connection (DNS + TCP + TLS) -->
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>

<!-- Fetch resource early, use later -->
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/css/critical.css" as="style">

<!-- Fetch for likely next navigation -->
<link rel="prefetch" href="/docs/next-chapter/">

<!-- Prerender entire page (use sparingly) -->
<link rel="prerender" href="/likely-next-page/">
Hint When to use
preconnect Critical third-party origins (fonts, analytics)
preload Hero fonts, critical CSS, LCP image
prefetch Next page user likely visits
modulepreload ES module dependencies

Open Graph and Twitter (Complete Set) 

  <meta property="og:type" content="article">
<meta property="og:title" content="Advanced Meta Tags">
<meta property="og:description" content="Expert head configuration guide.">
<meta property="og:url" content="https://example.com/page">
<meta property="og:image" content="https://example.com/og.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:site_name" content="GazeHub">
<meta property="article:published_time" content="2024-06-13T10:00:00Z">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@gazehub">
<meta name="twitter:creator" content="@author">

Content Security Policy (CSP)

Restrict resource loading to prevent XSS:

  <meta http-equiv="Content-Security-Policy"
      content="default-src 'self'; script-src 'self' https://cdn.example.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:;">

Prefer HTTP header over meta tag for CSP. Start with Content-Security-Policy-Report-Only during rollout.

Referrer Policy

Control how much referrer information is sent:

  <meta name="referrer" content="strict-origin-when-cross-origin">

Options: no-referrer, origin, same-origin, strict-origin-when-cross-origin (recommended default).

Internationalization 

  <html lang="en">
<head>
    <link rel="alternate" hreflang="en-US" href="https://example.com/en-us/page">
    <link rel="alternate" hreflang="fr-FR" href="https://example.com/fr-fr/page">
    <link rel="alternate" hreflang="x-default" href="https://example.com/page">
</head>

Set lang on <html> and on inline language changes: <span lang="fr">Bonjour</span>.

JSON-LD Structured Data 

  <script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "WebPage",
    "name": "Advanced Meta Tags",
    "description": "Expert HTML head configuration",
    "isPartOf": {
        "@type": "WebSite",
        "name": "GazeHub",
        "url": "https://www.gazehub.com"
    }
}
</script>
  
  <link rel="manifest" href="/manifest.json">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

Best Practices

  1. Unique title and description per page
  2. Canonical URL on every indexable page
  3. Preload only critical assets — over-preloading wastes bandwidth
  4. Validate OG tags with Facebook Sharing Debugger and Twitter Card Validator
  5. Keep head lean — defer non-critical scripts

Troubleshooting

Social preview shows wrong image

  • Clear cache in sharing debuggers; verify absolute URLs for og:image

Fonts flash unstyled (FOUT)

  • Preload WOFF2 files; use font-display: swap in @font-face

CSP blocks legitimate scripts

  • Check browser console for violations; adjust policy incrementally

The document head is small but powerful — configure it carefully for SEO, performance, security, and social sharing.