The Document Head and Meta Tags

Prerequisites: Document structure

The head holds metadata: information for browsers, search engines, and other programs. A thorough head looks like this:

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Rye Loaf — Corner Bakery</title>
  <meta name="description" content="A dense, tangy 100% rye loaf, baked daily. Order online for pickup.">
  <link rel="canonical" href="https://cornerbakery.example/bread/rye">

  <link rel="icon" href="/favicon.ico" sizes="32x32">
  <link rel="icon" href="/icon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <link rel="manifest" href="/site.webmanifest">
  <meta name="theme-color" content="#7a4b2a">
  <meta name="color-scheme" content="light dark">

  <link rel="stylesheet" href="/css/site.css">
  <script src="/js/site.js" defer></script>
</head>

The viewport

width=device-width, initial-scale=1 makes the page as wide as the phone's screen instead of a pretend 980-pixel desktop. Don't add maximum-scale=1 or user-scalable=no — they stop people from zooming, which is an accessibility failure.

Icons

favicon.ico — the classic tab icon; browsers also request /favicon.ico automatically if no icon is declared.
An SVG icon — sharp at every size; can adapt to dark mode with CSS inside the SVG.
apple-touch-icon — 180×180 PNG used when saved to an iPhone home screen.
A web app manifest (site.webmanifest, a JSON file) — name, icons, and colors for installable web apps.

theme-color and color-scheme

theme-color tints the browser's interface on some mobile browsers. color-scheme tells the browser the page supports light and dark modes, so form controls and scrollbars match before CSS loads.

http-equiv

<meta http-equiv="..."> imitates an HTTP response header. The useful ones today are Content-Security-Policy (Level 3) and, rarely, refresh:

<meta http-equiv="refresh" content="5; url=https://example.com/new-page">

Timed refreshes and redirects surprise people and screen-reader users — use a real server redirect (HTTP 301) instead when you can. Our Redirect Checker shows what a URL returns.

base

<base href="https://example.com/docs/"> changes the base URL for every relative URL on the page. It affects fragment links too (#top becomes https://example.com/docs/#top), which surprises people — avoid it unless you really need it.

Order matters a little

Put charset first (it must be within the first 1024 bytes), then the viewport and title. The browser starts fetching stylesheets and scripts as soon as it sees them, so place critical resources early.

Our Meta Tag Generator builds a starter head for you.