The Head and Resource Loading
Metadata, styles, scripts, and performance hints
The <head> section is invisible to users but critical for browsers, search engines, and social sharing platforms. It defines the document's metadata, controls how the page loads, and establishes its relationship to external resources.
Essential Meta Tags
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Title — Site Name</title>
<meta name="description" content="160-character description for search results.">
<!-- Canonical URL (prevents duplicate-content issues) -->
<link rel="canonical" href="https://example.com/this-page">
<!-- Language and robots -->
<meta name="robots" content="index, follow">
</head>Open Graph — Social Sharing
Open Graph tags control how your page appears when shared on Facebook, LinkedIn, Slack, iMessage, and most chat platforms.
<meta property="og:title" content="Page Title">
<meta property="og:description" content="Short description for the preview card.">
<meta property="og:image" content="https://example.com/og-image.png">
<meta property="og:url" content="https://example.com/this-page">
<meta property="og:type" content="website">
<!-- Twitter / X card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Short description.">
<meta name="twitter:image" content="https://example.com/og-image.png">Loading Stylesheets and Fonts
<!-- Stylesheet (render-blocking — keep it lean) -->
<link rel="stylesheet" href="/styles.css">
<!-- Preconnect to external origins before you need them -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap">
<!-- Preload critical assets so they load earlier -->
<link rel="preload" href="/hero.webp" as="image">
<link rel="preload" href="/Inter.woff2" as="font" type="font/woff2" crossorigin>Script Loading Strategies
<!-- async: downloads in parallel, executes immediately when ready (order not guaranteed) -->
<script src="analytics.js" async></script>
<!-- defer: downloads in parallel, executes after HTML is parsed (maintains order) -->
<script src="app.js" defer></script>
<!-- type="module": deferred by default, supports import/export -->
<script type="module" src="main.js"></script>Favicons and PWA Icons
<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">
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#0f172a">hreflang for Internationalised Sites
<link rel="alternate" hreflang="en" href="https://example.com/page">
<link rel="alternate" hreflang="es" href="https://example.com/es/page">
<link rel="alternate" hreflang="x-default" href="https://example.com/page">Best Practices
- Put
charsetandviewportfirst — browsers need them before parsing anything else - Keep
<title>under 60 characters anddescriptionunder 160 - Use
rel="preload"for above-the-fold images and critical fonts - Use
deferfor most scripts;asynconly for truly independent scripts like analytics