Title tag length: why pixels matter more than characters

Craig AddymanUpdated 4 November 20266 min read

Why pixels, not characters

The title tag (<title>) is the page name shown in browser tabs and, usually, as the headline in search results. Its letters aren't all the same width. "W" and "M" take up about four times the room of "i" and "l", and capitals are wider than lowercase. Both of these titles are exactly 50 characters:

So "keep titles under 60 characters" is a rough guide, not a rule. It's right for typical mixed-case titles. It's wrong for titles in capitals, with lots of W and M, or in languages with wide characters.

What the numbers really are

Google doesn't publish a limit. It says there's no limit on how long a title can be, and that long ones are cut "to fit the device width". The figures everyone uses come from measuring the results page:

Treat these as targets, not cliffs. Results pages change, and Google may show more or less depending on the query and device.

Too short is a problem too

A title of a few words, such as "Home" or "Products", wastes the space and doesn't tell searchers what the page is. Google names vague titles like "Home" as something to avoid. Aim to describe the page in a full phrase.

When Google rewrites your title

The title in search results isn't always your <title>. Google may build its own from the main heading, og:title, link text pointing to the page or other prominent text. It's more likely when the title:

• is the same boilerplate on many pages, such as just the site name
• doesn't match what the page is about, or has an out-of-date year in it
• repeats the site name, or is in a different language from the page
• is half empty, such as starting with a separator

A clear, unique title that matches the page's main heading is the best way to keep the one you wrote. A heading pushed out of place by bad markup doesn't help: see invalid elements in the head. A page should also have exactly one <title>: with two, browsers use the first, and search engines may not pick the one you meant.

How to check by hand

Copy// Measures this page's title and description at the size Google's desktop results use
// (roughly: titles in 20px Arial, cut near 561px; descriptions in 14px Arial, cut near 985px)
const ctx = document.createElement('canvas').getContext('2d');
const width = (text, font) => { ctx.font = font; return Math.round(ctx.measureText(text).width); };
const fits = (text, font, max) => { let n = text.length; while (n > 0 && width(text.slice(0, n), font) > max) n--; return n; };
const clean = s => (s || '').replace(/\s+/g, ' ').trim();
const title = clean(document.title);
const desc = clean(document.querySelector('meta[name="description" i]')?.getAttribute('content'));
const tw = width(title, '20px Arial'), dw = width(desc, '14px Arial');
console.table({
  Title: { characters: title.length, pixels: tw,
    result: !title ? 'MISSING: the page has no title' : tw <= 561 ? 'fits' : 'too wide, cut around: ' + title.slice(fits(title, '20px Arial', 561)).trim() },
  Description: { characters: desc.length, pixels: dw,
    result: !desc ? 'none' : dw <= 985 ? 'fits' : 'too wide, cut around: ' + desc.slice(fits(desc, '14px Arial', 985)).trim() },
});

How to write a title that fits

1. Lead with what the page is. If the end is cut off, it should be the least important part, usually the brand.
2. Avoid capitals for whole titles. They take up far more room and read as shouting.
3. Keep the brand short, or leave it off long titles: | Lilyfield rather than | Lilyfield Clothing Company Ltd.
4. Make each title unique, and close to the page's main heading.
5. Measure it, then shorten from the end until it fits.

On Shopify, WordPress and Next.js

• Shopify: Open the page in the admin and choose Edit website SEO under the search engine listing preview, then change Page title. The homepage title is under Online Store > Preferences.
• WordPress: Titles are usually set in an SEO plugin. If you see two title tags, check whether the theme prints its own as well as supporting title-tag.
• Next.js: Set title in the metadata object. A title.template in a layout adds your brand to child pages, so count it towards the length.

How crawlers report this

If a crawl sent you here, these are the labels to look for. Our guide to Screaming Frog and Sitebulb issues covers other common ones.

Related checks