Titles and Meta Descriptions

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

title

The element with the page's name. It shows on the tab and as the headline in search results.

Meta description

A short summary in <meta name="description">. Not shown on the page, often shown in search results.

SERP

Search engine results page: the list of results you see after searching.

Snippet

The short text under a search result's title, describing the page.

Title link

The clickable headline of a search result, usually built from your <title>.

Truncation

Cutting text that is too long and adding ... at the end.

Keyword

A word or phrase people type into a search engine.

Single-page app

A site that swaps content with JavaScript instead of loading a new page for each view.

1. 1

   Make the title too long

   In the first example, change the title to The Best Ever Easy Egg-Free Fluffy Vegan Breakfast Pancakes Recipe for Families — Asha's Kitchen. Predict what the console says and where the preview cuts it. Run and check.

2. 2

   Remove the description

   Delete the <meta name="description"> line and run. The script crashes: read the error and explain it. Then change the script to use document.querySelector('meta[name="description"]')?.content ?? "(Google would pick text from the page)".

3. 3

   Look at real results

   Search for something you know well. For three results, compare the title link with the page's real <title> (open the page and look at the tab). Did any get rewritten?

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

1. 1

   The <title> element is required in every page and there must be only one. It shows in the browser tab, in bookmarks and history, as the headline of a search result, as the fallback headline when a link is shared, and it is the first thing a screen reader announces when the page opens. A search result is one entry in the list a search engine shows; the page of results is called the SERP (search engine results page).

2. 2

   A good title says what this page is, most important words first, then the site name: Pancake Recipes: Fluffy, Easy and Egg-Free — Asha's Kitchen. Google cuts titles that are wider than about 600 pixels, roughly 50–60 characters, and adds .... Put the words people search for at the start so they survive the cut. Every page needs its own title: a site where every page is titled Home is impossible to tell apart in tabs or results.

3. 3

   <meta name="description" content="..."> is a one- or two-sentence summary of the page. It is not shown on the page itself. Search engines often use it as the snippet, the grey text under the title. Aim for roughly 120–160 characters, written for a human: say what the reader gets, include the main words they'd search, and make each page's description unique.

4. 4

   Search engines may rewrite both. Google builds the title link from your <title>, but may use the main heading, link text or other text if your title is missing, too long, stuffed with keywords or the same on many pages. The snippet is often chosen from the page's text to match the person's search. You control them best by writing an accurate title that matches your <h1> and a description that truly summarises the page.

5. 5

   The description has no direct effect on ranking; it affects whether people click. The old <meta name="keywords"> tag is ignored by Google and has been for years; don't spend time on it. Robots directives can also limit snippets: <meta name="robots" content="max-snippet:50"> or the data-nosnippet attribute on an element (more in Topic 6.7).

6. 6

   JavaScript can change the title with document.title = "(3) Inbox". Single-page apps (sites that change content without loading a new page) must do this on every view change, otherwise the tab and screen reader announcements show a stale name. The document.title getter also tidies the text: it trims spaces at both ends and collapses runs of whitespace into one space.

• ↔

  Including the brand in every title builds recognition but uses up the 60 characters; on long titles, drop the brand (Hectal's own pageMeta() does exactly this).

• ↔

  A hand-written description per page is the best quality but doesn't scale to thousands of pages; generate them from structured data (price, rating, summary) and hand-write the most important pages.

• I can write a unique, specific title with the brand at the end.

• I can write a 120–160 character description for a human reader.

• I know the description doesn't affect ranking but does affect clicks.

• I know why Google rewrites titles and how to avoid it.

• I can update document.title from JavaScript.