Metadata and social tags

The head describes the page

Everything inside <head> is information about the document rather than content of it — nothing there is drawn on the page. Two of those pieces are read by almost everyone who finds you: the <title> and the description.

The title appears in the browser tab, in bookmarks, and as the blue line of a search result. The description is the grey paragraph under it. Neither is written by the search engine: both are yours, which is why a page without them gets a result assembled from whatever words happen to sit near the top.

The title is not the heading

The <title> and the <h1> often say the same words, but they are not interchangeable. The title belongs to the browser tab, the bookmark and the search result; the heading belongs to the page and is read in the flow of the document. A page has one of each, and the title usually carries the site name too.

Titles should be unique across a site. Ten pages all called “Home” give a bookmark list and a set of search results that cannot be told apart. Put the specific thing first and the site name last, so the useful part survives when the tab is narrow.

A head that says what the page is

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sourdough notes — recipes that worked</title>
  <meta name="description"
        content="Twelve tested sourdough recipes with timings, weights and the failures worth avoiding.">
</head>

What a shared link shows

When someone pastes your page into a chat, a message board or a social feed, the software there builds a little card: an image, a title, a sentence. It does not read your page to do it — it reads four tags that exist for exactly this purpose, the Open Graph tags.

They live in the head as <meta> elements whose property starts with og:. The two you will always write are og:title and og:description; og:image is the one that decides whether the card has a picture at all. twitter:card tells X to show the large version rather than a bare link.

Three readers, one head

Three readers open the same head and each takes a different part. The browser takes the title for the tab and the charset for decoding. A search engine takes the title and description for the result, and may ignore the description in favour of a sentence from the page. A chat app takes the Open Graph tags for its card, and falls back to the title and a guess when they are missing. Writing all three sets is not duplication: it is the same page introduced to three audiences, in the order each one asks for it.

The head has an order

<meta charset> should come early — within the first 1024 bytes — because the browser needs to know how to read the file before it reaches the text. The viewport tag is what tells a phone to use the device width rather than a pretend desktop width, and it belongs in the head of every page meant to be read on a phone.

The description and the Open Graph tags are claims about the page, so they belong with the content they describe. meta name="robots" is a request rather than a command: noindex asks search engines to leave the page out, and a page that should not be public is better protected by a login than by a tag.

Write it for a person

A description is a sentence, not a list of words a robot might like. Explain what the page gives the reader, in the same voice as the page itself. Search engines read the page anyway — stuffing the description with repeated keywords does not raise the page, and it makes the result look like spam to the person deciding whether to click.

One description per page, and make it accurate. A description that promises something the page does not deliver is not a ranking trick; it is the reason a visitor leaves.

Try these next

• Write a title that puts the page’s subject first and the site name last.
• Write a description under 150 characters and check where it ends in a search result.
• Add og:title, og:description and og:image to a page and preview the card in a share debugger.