Page metadata

What belongs in a well-built head?

The <head> tells browsers, search engines and social apps about your page. Nothing in it shows up in the page area, but it controls the tab title, the search result snippet, the link preview in a chat app, the character decoding and how the page scales on phones.

Order makes a difference for a couple of lines. The charset meta must come first, within the first 1,024 bytes. Stylesheets should come before scripts so rendering is not held up. Everything else can follow in any order, but keeping the same order on every page makes reviews faster.

Here is a complete head for a bakery's menu page.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Menu | Corner Bakery, Leeds</title>
  <meta name="description" content="Daily sourdough, rye and pastries. See prices and what is baked each morning.">
  <link rel="canonical" href="https://cornerbakery.example/menu">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="stylesheet" href="/css/site.css">
  <script src="/js/site.js" defer></script>
</head>

Why does every page need its own title?

The <title> text appears on the browser tab, in bookmarks, in history, and usually as the blue link in search results. Screen readers announce it first when a page loads, so it is the first confirmation that a link went to the right place. It is required by the standard; a page without one is invalid.

Make each title unique and put the specific part first: Dawn chorus walk | Leeds Bird Club beats Leeds Bird Club | Events | Dawn chorus walk, because tabs and search results truncate from the right. Around 50 to 60 characters fits most search result layouts. On single-page apps, update document.title when the view changes, or every screen will announce the same name.

The title holds plain text only. Tags inside it are shown as literal characters, and entities such as & are decoded.

What do the charset and viewport lines fix?

The line <meta charset="utf-8"> tells the browser how to turn bytes into characters. Without it, a browser may guess a legacy encoding and show curly quotes, accented names and the pound sign as garbage like ’. UTF-8 is the only encoding the standard allows for new documents. Save your file as UTF-8 in your editor as well, or the declaration will be wrong.

The viewport meta tells mobile browsers to use the device's width as the layout width. Without it, phones pretend to be about 980 pixels wide and shrink the page, so text becomes tiny and media queries never fire. Use width=device-width, initial-scale=1. Do not add user-scalable=no or maximum-scale=1; they block pinch zoom, which people with low vision rely on, and fail WCAG 1.4.4. Recent iOS versions ignore them, but Android browsers still honour them.

What does the meta description do, and does it affect ranking?

The meta description is a short summary that search engines may show under your title in results. It does not directly affect ranking. It affects whether people click. Google rewrites it often, especially when the query matches other text on the page better, so treat it as a suggestion.

Write one or two plain sentences, roughly 120 to 160 characters, that say what the page offers. Give each page its own description; duplicates across a site look like boilerplate and are more likely to be replaced. The old <meta name="keywords"> tag is ignored by Google and Bing and is not worth writing.

How do link elements connect other files?

The <link> element points to a related resource, and its rel attribute says what the relationship is. Without rel the browser does not know what to do and ignores the link. The ones you will meet most:

<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>

• rel="stylesheet" loads CSS. It blocks rendering until the file arrives, which avoids a flash of unstyled content.
• rel="icon" sets the favicon. An SVG icon scales cleanly; browsers still request /favicon.ico at the root if you declare nothing.
• rel="canonical" names the preferred URL when the same content is reachable at several addresses, such as with tracking parameters.
• rel="preload" fetches a file the page will need soon, such as a web font. Preloading files you never use wastes bandwidth and shows a console warning.
• rel="alternate" with hreflang points to translated versions of the page.
• rel="manifest" links a web app manifest for installable sites.

How do social link previews get their image and text?

When someone pastes your URL into WhatsApp, Slack, LinkedIn or Mastodon, the app fetches your page and reads Open Graph tags. Without them it guesses, often picking the logo or the cookie banner text.

The image URL must be absolute and publicly reachable. Use roughly 1200 by 630 pixels for a wide card. Apps cache previews aggressively, so after changing tags, use the platform's debugger (such as LinkedIn's Post Inspector) to refresh it.

<meta property="og:title" content="Dawn chorus walk, Sunday 5am">
<meta property="og:description" content="Join Leeds Bird Club in Roundhay Park.">
<meta property="og:image" content="https://leedsbirds.example/img/dawn-share.jpg">
<meta property="og:url" content="https://leedsbirds.example/events/dawn-chorus">

When should you use base, style or script in the head?

The <base href> element changes the starting point for every relative URL on the page, including #section links, which then point at the base URL instead of the current page. Most sites never need it, and adding it to fix one path usually breaks several others. Use proper relative or root-relative paths instead.

A <style> block in the head suits small amounts of critical CSS or a single-page demo. For a real site, a linked stylesheet is cached across pages and is easier to maintain.

Scripts in the head should carry defer so they download in parallel and run after parsing, in order. Use async for independent scripts such as analytics, where order does not matter. Use type="module" for ES modules, which are deferred by default.

How do you check the head, especially when AI wrote it?

In DevTools, expand <head> in the Elements panel and confirm the charset line is first. If you see <meta> or <link> elements inside the body, something visible in the head forced it to close early. Check document.title in the console on each page of a single-page app.

AI-generated heads tend to share a few faults. Watch for user-scalable=no in the viewport, a <meta name="keywords"> tag, duplicate or missing descriptions copied across pages, Open Graph images with relative paths, and long lists of preload or preconnect hints for files the page never uses. Also check that the title is specific to the page; generators often reuse the site name alone on every page.

Field notes

• The <head> controls things like the tab title without showing in the page area.
• Each page needs its own <title>, which appears on the browser tab.
• The charset line helps the browser show characters correctly.
• A meta description is the summary search engines may show in results.

Easy to get wrong

The title holds plain text only. Markup inside it is displayed as literal characters.

Blocking zoom harms people with low vision.

Without rel the browser does not know the file is a stylesheet and ignores it.

Preview bots read the tag outside your page context, so a relative path cannot be resolved and the card shows no image.

Identical titles make tabs, bookmarks and search results impossible to tell apart, and screen reader users cannot confirm which page loaded.

Questions people ask

Where does the favicon go?

Add <link rel="icon" href="/favicon.svg"> in the head. Browsers also check /favicon.ico at the site root if no icon is declared.

Does the meta keywords tag help SEO?

No. Major search engines have ignored it for years.

Can <style> go in the body?

Browsers accept it, but the standard expects style in the head. Putting it there avoids content briefly appearing unstyled.

How long should a page title be?

Aim for about 50 to 60 characters so it is not cut off in search results, with the most specific words first.

Do I need a theme-color meta tag?

It is optional. Some mobile browsers use it to tint the address bar. Add one if it suits your brand, and supply a dark variant with a media attribute if your site has a dark theme.