The essentials

Quick reference

One focused task per row. Jump to the related section for complete, working examples.

UseSyntaxExamples
Select standards mode<!doctype html>View examples
Declare page language<html lang="en">View examples
Declare UTF-8<meta charset="utf-8">View examples
Set the document title<title>Installation guide — Acme Docs</title>View examples
Describe the page<meta name="description" content="Install Acme locally and verify the setup.">View examples
Configure the viewport<meta name="viewport" content="width=device-width, initial-scale=1">View examples
Declare supported schemes<meta name="color-scheme" content="dark light">View examples
Set interface theme color<meta name="theme-color" content="#111827">View examples
Declare a canonical URL<link rel="canonical" href="https://example.com/guides/install/">View examples
Link a language version<link rel="alternate" hreflang="pt-BR" href="https://example.com/pt-br/guias/instalar/">View examples
Load a stylesheet<link rel="stylesheet" href="/assets/site.css">View examples
Declare an icon<link rel="icon" href="/assets/logo_only_transparent.png" type="image/png">View examples
Link an app manifest<link rel="manifest" href="/site.webmanifest">View examples
Set crawler directives<meta name="robots" content="index,follow,max-image-preview:large">View examples
Limit a text snippet<meta name="robots" content="max-snippet:160">View examples
Exclude a snippet block<aside data-nosnippet>Internal notes</aside>View examples
Set a shared-page title<meta property="og:title" content="Installation guide — Acme Docs">View examples
Set the shared-page type<meta property="og:type" content="article">View examples
Describe a shared page<meta property="og:description" content="Install Acme locally and verify the setup.">View examples
Set a share image<meta property="og:image" content="https://example.com/assets/install-card.png">View examples
Identify the shared URL<meta property="og:url" content="https://example.com/guides/install/">View examples
Add structured data<script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article" } </script>View examples
Describe breadcrumb hierarchy<script type="application/ld+json"> { "@type": "BreadcrumbList" } </script>View examples
Set a referrer policy<meta name="referrer" content="strict-origin-when-cross-origin">View examples

The document head gives browsers, search systems, assistive technology, and external tools machine-readable context. Keep it intentional: declare encoding early, make every page title and description specific, use absolute canonical URLs, and control crawler access deliberately. Metadata helps systems understand and present a page; it does not replace useful, accessible page content.

Step by step

Detailed examples

01

Establish parsing, language, and encoding first

The doctype opts into standards mode. lang belongs on the root element and should match the document's default human language; use lang on descendants when they switch languages. Place the charset declaration as early as possible and within the first 1024 bytes so the parser can decode subsequent text consistently.

A minimal dependable document shell
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Account settings — Acme</title>
</head>
<body>
  <main><h1>Account settings</h1></main>
</body>
</html>
Back to quick reference ↑
02

Give every page a specific identity

The title element is document metadata, not the visible page heading; provide both a useful title and an h1. Put the most specific page name before a concise site name when that helps distinguish tabs. A description should summarize this page accurately rather than repeat one site-wide slogan, and its presence does not guarantee how another service will display it.

Match metadata to visible content
<head>
  <meta charset="utf-8">
  <title>Installation guide — Acme Docs</title>
  <meta name="description" content="Install Acme locally and verify the setup.">
</head>
<body>
  <main>
    <h1>Installation guide</h1>
  </main>
</body>
Back to quick reference ↑
03

Describe viewport and supported appearance

The standard responsive viewport declaration lets CSS pixels correspond sensibly to device width without disabling zoom. Do not add maximum-scale or user-scalable restrictions that obstruct magnification. color-scheme announces schemes the page supports, while theme-color is a UI suggestion; CSS must still provide readable colors in every declared scheme.

Responsive, dark-first appearance metadata
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="dark light">
<meta name="theme-color" content="#111827" media="(prefers-color-scheme: dark)">
<meta name="theme-color" content="#f8fafc" media="(prefers-color-scheme: light)">
Back to quick reference ↑
04

Express canonical and language relationships

A canonical link identifies the preferred address for the current document and should resolve to a real, indexable equivalent. Use an absolute URL so its meaning survives feeds and alternate delivery contexts. Alternate language links need valid hreflang values and should point to corresponding pages, not unrelated language homepages.

Canonical and translated versions
<link rel="canonical" href="https://example.com/guides/install/">
<link rel="alternate" hreflang="en" href="https://example.com/guides/install/">
<link rel="alternate" hreflang="pt-BR" href="https://example.com/pt-br/guias/instalar/">
<link rel="alternate" hreflang="x-default" href="https://example.com/guides/install/">
Back to quick reference ↑
05

Attach styles, icons, and application metadata

rel=stylesheet loads CSS as a style sheet. Icon declarations may include type, sizes, or several formats; test the fallback behavior actually required by supported browsers. A manifest is useful for installable application metadata but does not make a site installable by itself. Keep head URLs root-relative or absolute when documents live at several path depths.

Common linked resources
<link rel="stylesheet" href="/assets/site.css">
<link rel="icon" href="/assets/logo_only_transparent.png" type="image/png">
<link rel="icon" href="/favicon-32.png" sizes="32x32" type="image/png">
<link rel="manifest" href="/site.webmanifest">
Back to quick reference ↑
06

Control crawler directives and text snippets

Use robots directives only when a page needs a page-specific indexing or preview instruction; index and follow are the normal defaults, while noindex removes a page from compliant search indexes. max-snippet and data-nosnippet are restrictive controls for content that should not appear in snippets, not routine optimization settings.

Limit previews and exclude a private page region
<head>
  <meta name="robots" content="index,follow,max-image-preview:large">
  <meta name="robots" content="max-snippet:160">
</head>
<body>
  <aside data-nosnippet>
    Internal review notes
  </aside>
</body>
Back to quick reference ↑
07

Describe a social-sharing card

Open Graph fields describe how compatible sharing services present a URL. Keep the title, description, canonical URL, and image aligned with the visible page, and use a type that accurately represents the shared object. These are social-preview fields, not a direct search-ranking signal.

A complete Open Graph card
<meta property="og:title" content="Installation guide — Acme Docs">
<meta property="og:description" content="Install Acme locally and verify the setup.">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/guides/install/">
<meta property="og:image" content="https://example.com/assets/install-card.png">
Back to quick reference ↑
08

Add Article structured data that matches the page

Structured data must match visible page content and use a supported schema type. Article markup can make eligible pages available for richer search features, but it does not guarantee one. Include dates, authors, and images only when they are accurate and visible to readers.

A complete Article JSON-LD block
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Installation guide",
  "description": "Install Acme locally and verify the setup.",
  "image": "https://example.com/assets/install-card.png",
  "datePublished": "2026-08-26",
  "dateModified": "2026-08-26",
  "author": { "@type": "Person", "name": "Avery Smith" },
  "mainEntityOfPage": "https://example.com/guides/install/"
}
</script>
Back to quick reference ↑
09

Describe the visible breadcrumb hierarchy

BreadcrumbList markup should mirror a breadcrumb trail that people can actually use on the page. It provides a machine-readable hierarchy that can make an eligible trail available in search results.

A two-level BreadcrumbList
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "Guides", "item": "https://example.com/guides/" },
    { "@type": "ListItem", "position": 2, "name": "Installation guide" }
  ]
}
</script>
Back to quick reference ↑
10

Set referrer policy deliberately

A document referrer policy applies broadly to requests initiated from the page. Select a value from privacy and application requirements, rather than copying a value blindly.

A conservative cross-origin referrer policy
<meta name="referrer" content="strict-origin-when-cross-origin">
Back to quick reference ↑

Local code tester

Try HTML document metadata

Edit a complete document head and inspect the rendered title, language, and visible heading locally.

Runs in your browser
Preview

Keep exploring

More HTML cheat sheets

Sources and further reading

References

Authoritative documentation used to verify and expand this cheat sheet.

  1. WHATWGHTML Standard: The document element and metadatahtml.spec.whatwg.org
  2. WHATWGHTML Standard: Link typeshtml.spec.whatwg.org
  3. MDN Web DocsThe head metadata elementdeveloper.mozilla.org
  4. Google Search CentralRobots meta tags and X-Robots-Tag specificationsdevelopers.google.com
  5. Google Search CentralIntroduction to structured data markup in Google Searchdevelopers.google.com
  6. Google Search CentralBreadcrumbList structured datadevelopers.google.com
  7. Open Graph protocolThe Open Graph protocologp.me

Help us improve

Found a typo or missing example?

Tell us what would make this cheat sheet clearer, more complete, or more useful.

Share feedback