Title and description

A search result is a small piece of text on a long page. The user is scanning for the link that fits their query. Two pieces of HTML — <title> and <meta name="description"> — decide what shows up in that scan.

These are also what shows in the browser tab, what gets bookmarked, and what social platforms fall back to when you have not added Open Graph (lesson 3). Get them right and your page is recognized; get them wrong and your page is one of ten blue links nobody clicks.

The title element

<title> is mandatory. Every HTML document has one. It is shown:

• In the browser tab.
• In the bookmark name when the user saves the page.
• In Google search results as the big blue link.
• In OS app switchers and system search.
• As the fallback Open Graph title (when no og:title is set).

<title>Sourdough season is back · Daily Bread Bakery</title>

That is the entire syntax. Plain text, inside the <title> tag, in the head. No HTML allowed inside (entities like & work; tags do not).

The title applies to the page, not to the site. A blog has a different title for each post; a docs site has a different title for each article. A title that is the same on every page tells search engines the pages are duplicates of each other.

Writing a good title

A search result title has two jobs: tell the user what the page is, and earn the click. A few rules.

Lead with the page topic, not the site name. "Sourdough season is back · Daily Bread Bakery" beats "Daily Bread Bakery: Sourdough season is back". The unique words come first; the site name is suffix.

Aim for 50-60 characters. Google shows roughly 600 pixels of title text, which works out to about 50-60 characters in most fonts. Longer titles get truncated with an ellipsis.

Use a separator the user expects. ·, —, |, – are all common. Pick one and be consistent across the site.

Match the user's mental search. If someone types "sourdough recipe" and your page is exactly that, the word "recipe" should appear in the title. Plain language beats clever phrasing.

A few common patterns:

<!-- Article: page topic + site name -->
<title>How sourdough fermentation works · Daily Bread Bakery</title>

<!-- Product: name + variant + brand -->
<title>Banneton, 9-inch round — Daily Bread Supply</title>

<!-- Documentation: feature + section + project -->
<title>useState hook · Hooks · React docs</title>

<!-- Search results: query + count + site -->
<title>Sourdough recipes — 27 results · Daily Bread Bakery</title>

Each pattern leads with the most specific information and trails with context. The user scanning a result page sees the unique part first.

The meta description

<meta name="description"> is the snippet of text shown under the title in search results. It does not directly affect ranking. But it heavily affects click-through — a clear, action-oriented description gets more clicks than a vague one.

<meta name="description"
content="Our wild-yeast sourdough loaf returns next Friday. Reserve online or learn how the 24-hour starter works.">

The browser does not render the description anywhere visible — it lives only in the head. The audience is search engines and social-share crawlers.

A few rules:

Aim for 150-160 characters. Google shows roughly 920 pixels — about 150 characters. Longer descriptions are truncated.

One or two sentences. Long enough to set up the value of the page; short enough to read in a glance.

Lead with the user's payoff. "Reserve a loaf for Friday" beats "Daily Bread Bakery is pleased to announce that...". Skip the throat-clearing.

Make every page's description different. Same advice as the title — duplicate descriptions across pages send a duplicate-content signal.

Don't stuff keywords. "Sourdough sourdough recipes sourdough bread sourdough starter" reads like spam to humans and to ranking algorithms. Write the description for a person.

<!-- vague, hedged, throat-clearing -->
<meta name="description"
content="Welcome to our website! We are pleased to share information about our products and services.">

<!-- specific, action-oriented, person-shaped -->
<meta name="description"
content="Hand-laminated croissants baked daily at 7am. Pre-order whole batches for delivery, or visit the Bridge Street shop on weekends.">

The second describes what the user gets and how to act on it. The first could apply to any business in any industry.

If you skip the description, Google generates one from the page content automatically. Sometimes that works; usually it pulls a less-than-ideal sentence. Writing one yourself is one of the cheapest UX wins on the page.

When you want neither

Sometimes a page should not be indexed at all — a private dashboard, a thank-you page, a draft. The robots meta tag tells search engines what to do.

<meta name="robots" content="noindex, nofollow">

noindex says "do not include this page in search results". nofollow says "do not follow the links on this page either". You can use one or both.

A common pairing: noindex, follow — keep the page out of results but follow its links to discover other pages.

<head>
<title>Thanks for ordering</title>
<meta name="robots" content="noindex">
</head>

The thank-you page after a checkout is a good noindex candidate — there is no value in someone arriving at it from a search. Search Console will list any page Google still tries to index against your wishes.

The robots tag is covered in more depth in lesson 7 of this course (canonical, robots, hreflang).