Title tags and meta descriptions: how to write them
Title tags and meta descriptions: what they are, length in pixels and characters, how to write them with examples, and why Google rewrites them.
In 30 seconds
- The title tag is the blue headline of a Google result; the meta description is the grey text below it.
- Titles are measured in pixels: beyond about 580 pixels they get cut off.
- The meta description doesn't change rankings, but it persuades people to click. A good length is 70-155 characters.
- Google can rewrite titles and descriptions: after its 2021 update it said it uses the title you wrote in 87% of cases.
The title tag is the blue, clickable headline that appears in Google results; the meta description is the short grey text beneath it. You write them in the page’s code: the title in the <title> tag and the description in the <meta name="description"> tag. The title helps Google understand the topic and is one of the most important SEO signals; the meta description doesn’t change rankings, but it persuades people to click.
They’re the first thing a person reads, before even entering the site.
What a title tag is
It’s the blue, clickable headline of the result. It tells Google and people what the page is about, and it’s one of the most important SEO signals.
Google doesn’t count letters: it measures how much space they take. An “m” is wider than an “i”, so two titles with the same number of characters can have different widths. On desktop, beyond about 580-600 pixels the title is cut off with “…”. In practice that’s usually 50 to 60 characters. You can measure it with Peacchy’s free Google snippet preview, which counts pixels the way Google does.
In code it looks like this:
<title>Organic Sencha green tea, loose leaf | Five Leaf</title>Title vs H1: the difference
The title appears on Google and in the browser tab; the H1 is the big heading inside the page. They can be the same or similar, but they do different jobs: the title must earn the click in little space, the H1 must tell someone already on the page they’re in the right place.
How to write a good title
- Put the keyword at the start: it’s the part people read first.
- Put the brand at the end, separated by a bar: “| Five Leaf”.
- Describe the page honestly: no exaggerated promises or repeated words.
- Each page has its own title, different from the others.
- If title plus brand runs out of space, drop the brand: on this site, for example, “ · Peacchy” is only added when the total stays within 60 characters.
Why Google rewrites titles
Google doesn’t always use the title you wrote: sometimes it takes the H1, another heading or link text. It does this when the title is too long, stuffed with repeated keywords, the same on many pages or doesn’t describe the page. In August 2021 Google changed how it chooses titles and, after adjustments in September, said it uses the site’s own title in 87% of cases (up from 80%). The fix is simple: clear, unique, relevant titles.
What a meta description is
It’s the grey text under the title. It doesn’t move the page up the rankings, but it helps people decide whether to click. A good length is 70 to 155 characters: enough to say something useful, not so much that it’s cut off.
In code:
<meta name="description" content="Organic Japanese Sencha, whole leaves, with a fresh, grassy taste. Great iced too. Shipped within 24 hours.">The description can be replaced too: Google often shows a piece of the page’s text that answers the search better. It happens mostly with very specific searches.
How to write a good meta description
- Summarise what the person will find on the page.
- Use the keyword naturally: Google bolds it when it matches the search.
- Add a concrete detail: a number, a benefit, a difference.
- Write a different description for each page.
Where to edit them
- Hand-built or framework sites (like this one, built with Astro): in the code or the page data.
- WordPress: with an SEO plugin, which adds two fields under the editor.
- Shopify and other e-commerce platforms: in the “Search engine listing preview” section of each product or page.
A before-and-after example
| Title | Meta description | |
|---|---|---|
| Before | Sencha | Green tea. Buy now. |
| After | Organic Sencha green tea, loose leaf | Five Leaf | Organic Japanese Sencha, whole leaves, with a fresh, grassy taste. Great iced too. Shipped within 24 hours. |
More examples:
| Page type | Title | Meta description |
|---|---|---|
| Category | Organic herbal teas for the evening | Five Leaf | 18 caffeine-free organic infusions, from chamomile to rooibos, each with a brewing guide. Free shipping over €39. |
| Article | How to make green tea: temperature and timing | Water at 70-80 °C and a 2-3 minute steep: the guide to green tea that doesn’t turn bitter, with mistakes to avoid. |
| Homepage | Five Leaf: organic teas and infusions, explained simply | Organic teas and herbal infusions with a guide for every product. Choose by taste or by time of day. |
Watch the rules
For food, in the European Union health claims (“detoxes”, “helps you lose weight”) are only allowed if authorised (Regulation (EC) 1924/2006). That applies to titles and meta descriptions too: talk about taste, quality and service.
Checklist
- Title of 50-60 characters, keyword at the start, unique.
- Meta description of 70-155 characters, with a concrete detail, unique.
- No word repeated several times, no promise the page doesn’t keep.
- Check the preview on desktop and mobile.
To decide which keyword goes into the title, read keyword research: how to choose keywords.
Sources
Which meta description would you choose for the Sencha page?
Correct! It's concrete, says what you'll find on the page and is between 70 and 160 characters.
Not quite. The first one is too vague; the third makes health claims, which are banned for food unless authorised.
Frequently asked questions
Does the meta description help rankings?
No, Google doesn't use it to rank pages. But a good description increases clicks, and more clicks from the same position mean more visits.
How long should a title tag be?
Up to about 580-600 pixels on desktop, which in practice is usually 50-60 characters. Measure it in pixels with a snippet preview tool.
Should the title and the H1 be identical?
They can be the same or similar, but they have different jobs: the title must earn the click in little space, the H1 must reassure someone already on the page that they're in the right place.
Topics:SEOGoogle