How to write title tags and meta descriptions
What title tags and meta descriptions are, how Google uses them in results, why it truncates them by pixels rather than characters, when it rewrites them and how to write them so people choose you.
By Javier Tenjo, Full stack developer
On this page
Before anyone visits your website, they see it on Google as one blue line and two grey ones. That snippet almost always comes from two tags in the code that never appear on the page itself: the <title> and the <meta name="description">.
They are only a few words, often written last and in a hurry, or filled in by a plugin. Yet they are the only part of your page the search engine shows at the moment someone decides whether to click on you or on the result next to you.
What each one is
The title tag is the page’s official name. It is declared in the <head> and appears in the browser tab, in bookmarks, in the search result (Google calls it the “title link”) and as the default text when someone shares the link and no other tags exist. Besides introducing the page, it tells the search engine what the page is about: it is a relevance signal.
The meta description is a summary of the page for someone who has not visited yet. Google has said many times that it does not use it to decide rankings. Its job is different: to persuade. Between two results in the same position, the one that explains better what is inside wins the click.
<title>Air conditioning servicing in Leeds | North Cooling</title>
<meta name="description" content="Inspection, cleaning and regassing of air conditioning units for homes and offices in Leeds. Engineer visit within 48 hours and a three-month guarantee on every job.">
Why Google truncates by pixels, not characters
Search results have a fixed width, and Google trims whatever does not fit with an ellipsis. What it measures is not how many letters there are but how much space they take up in its typeface. And letters are not equal: ten “i”s fit in the space of four “M”s.
That is why the well-known 60-character rule is only an approximation. It works roughly for ordinary text, which mixes wide and narrow letters, but a title in capitals is cut much earlier and one full of “l”, “i” and “t” lasts longer. These are the reference figures usually quoted:
| Element | Desktop | Mobile |
|---|---|---|
| Title | about 600 px | about 580 px |
| Description | about 920 px | about 680 px |
Google does not publish these numbers and changes the layout of its results from time to time, so treat them as guidance rather than law. On mobile they also depend on the width of the phone. The practical consequence stays the same: the important part goes first, so that it survives even if the cut comes earlier than expected.
When Google rewrites your title or description
Google is not obliged to use your text, and it does not always do so.
The title gets rewritten when the search engine believes it does not describe the page well. The usual reasons:
- It is too long, and Google prefers replacing it to truncating it.
- It is a string of keywords separated by pipes or commas.
- It is generic (“Home”, “Untitled page”, “Services”).
- It is repeated across many pages of the site.
- It does not match what the content or the main heading says.
In those cases Google tends to take the text from the H1, from another heading or from the links pointing to the page.
The description is rewritten far more often. Google picks the passage of your page that best answers the specific search, so one page can show different descriptions depending on what was searched. It is not a penalty: it means another paragraph of yours fitted that query better. If your description summarises the page well, you will see it on the most direct searches, which tend to be the ones that matter most.
One detail changes how titles should be written: Google also shows the site name and icon above the title link. Your brand already appears there, so repeating it at the end of the title is useful but not essential when space is tight.
Writing a good title tag
- One per page, and different on each. If two pages share a title, you are telling the search engine they cover the same thing.
- Say what the page is, in one phrase. It should match the visible headline in meaning, even if not word for word.
- The main point first, using the words your customer would search with. Thinking about search intent helps more than repeating terms.
- The brand at the end, short and separated with a simple character. On the home page it can go first.
- No sustained capitals or decoration. They take up more pixels and read like an advert.
An example of the difference: “Services | Home | North Cooling | Air Conditioning Leeds UK” versus “Air conditioning servicing in Leeds | North Cooling”. The second says what is on offer, for whom and where, and leaves the brand for the end.
Writing a good meta description
- Answer “what will I find if I click?”. What the page offers, for whom, and a detail that sets it apart: lead time, area, terms, a starting price if you publish one.
- The essentials in the first sentence. Mobile cuts earlier, and the second half may not be seen.
- Around 120 to 155 characters as guidance, bearing in mind that width is what actually decides.
- Different on every page. A description copied across the whole site adds nothing. If you cannot write them all, start with the pages that get the most visits, or that you most want to.
- Do not promise what the page does not deliver. Winning the click and losing it three seconds later to the back button achieves nothing.
A call to action fits if it comes naturally (“request a quote”, “check opening hours”), but there is no need to force one into every page.
Common mistakes
- The content management system’s default template, which gives every page the same title or builds it from the site name and little else.
- Plugins that generate the description from the first text on the page, which is sometimes the menu, a cookie notice or the footer address.
- Key information at the end, exactly where the cut falls.
- Talking about the company instead of the customer’s problem. “We are leaders in…” uses up space that could say what you solve.
- Forgetting the other language version, when the site is bilingual and the English pages inherit the Spanish text.
- Confusing the title tag with the H1. The H1 is the headline seen on the page; the title is the one seen outside it. They can differ, but they should not contradict each other.
To understand why search engines pay attention to these signals and not others, it helps to review how a search engine works.
Previewing yours
The Google SERP snippet preview shows your result the way the search engine would truncate it, measured in pixels rather than characters, on desktop and mobile at once. You can type the URL of a published page, paste its source code if it is not live yet, or type the title and description by hand to try variants until the important part sits inside the cut. Along the way it reviews what is not visible on the page but still matters: canonical, robots, hreflang, language and structured data.
Bear in mind what a preview can and cannot tell you: it shows how your result would look if Google uses your text, which is the part you control. Write it clear, unique and true to the page, and that is what you will see on most searches.
Title tags and meta descriptions do not make a page better, but they decide whether anyone gets to find out. Ten minutes per page, with the cut in view, is usually enough for your result to say what is really inside.