The head: titles, search results and sharing

Introduction

Before anybody reads your page, they see a line of it: in a search result, or in a chat when a friend shares the link. That line comes from the head. Getting it right is the difference between a page that gets opened and one that gets ignored.

How it works

The title. Search engines usually show it as the headline. Aim for around 50 to 60 characters, put the specific words first, and make it unique on each page: Refund policy | Mina's Bakery, not Page 3.

The description. <meta name="description" content="..."> is a summary of about 150 characters. Search engines may show it, or write their own. It does not directly raise your ranking, but a good one persuades people to click.

Canonical links. The same page is often reachable at several addresses: with www, with ?ref=newsletter, with a trailing slash. Search engines may treat these as duplicates and divide your ranking between them. <link rel="canonical" href="..."> names the one address that counts.

Telling crawlers what to do. <meta name="robots" content="noindex"> asks search engines not to list a page. It is useful for private or thin pages. It is a request, not security, so anything private must be protected by a login.

Open Graph. When a link is pasted into a chat app, a preview appears. That comes from tags like og:title, og:description and og:image. Note that they use property, not name.

Linking other files. <link rel="stylesheet" href="style.css"> loads CSS, and <link rel="icon" href="icon.svg"> sets the favicon.

Scripts deserve care. By default, a script in the head stops the browser from building the page until it has been downloaded and run. Adding defer makes the script download in the background and run after the page is parsed, so it is nearly always what you want for your own scripts.

Structured data. A block of JSON in a script with type="application/ld+json" can describe a page as a recipe, event or product, using a vocabulary called schema.org. This can earn enhanced listings, although it does not guarantee them.

Syntax

<title>Refund policy | Mina's Bakery</title>
<meta name="description" content="Returns accepted within 7 days. Find out how.">
<link rel="canonical" href="https://minasbakery.example/refunds">
<meta property="og:title" content="Refund policy">
<script src="app.js" defer></script>

Example

The head has no visible output, so this preview prints what the browser found there.

Line by line

1. title would be the headline in a search result, with the specific words first.
2. The description makes a promise and includes a useful detail.
3. In the JavaScript tab, the script reads both of them back from the page, so that you can see what the browser understood.

Expected result

One line reading: "Fresh bread in Dhaka | Mina's Bakery — Baked every morning. Order before 10 for same-day delivery."

In the real world

Marketing teams test title wording because a small change can noticeably move how many people click. Large sites generate these tags from their databases. A very common production bug is every page sharing the same title because a template was never given the real value.

Common mistakes

• The same title on every page.
• Using name rather than property for Open Graph tags.
• Stuffing keywords into a title, which reads like spam and can be penalised.
• Using noindex as protection for private content.
• Using a relative address for canonical or og:image. Use full addresses.

Best practices

• Write a unique title and description for each page.
• Use defer on your scripts.
• Keep the charset first, and then the title.
• Write for the person reading the result, not for the search engine.

Summary

The head decides how your page is presented to the world. Titles and descriptions earn the click, canonical links prevent duplicates, Open Graph tags shape previews, and defer keeps scripts from delaying the page.

Mark lesson complete