Page titles, descriptions and headings that work

The title

The title element names the page. Lighthouse's text for its Document has a `<title>` element audit says the title gives screen reader users an overview of the page, and that search engine users rely on it heavily to decide whether a page is relevant to their search. In Lighthouse 13.5 the audit counts twice: in the accessibility category with a weight of 7, and in the SEO category with a weight of 1.

What real sites do, from the 2025 Web Almanac:

• 98.6% of pages have a title.
• The median title is 12 words and about 77 characters on desktop and 79 on mobile. At the 90th percentile it is 150 to 154 characters.
• Those lengths are well above the often-quoted 50 to 60 character "safe range". The Almanac suggests that publishers care more about keyword coverage than exact display limits, and that Google frequently rewrites titles in results.

So there is no exact length to hit. Write the title for a person who sees it in a list of results or a browser tab:

• Make it unique. Two pages with the same title look like one page.
• Say what the page is about, with the topic first and your brand last.
• Write it like a label, not a sentence of keywords.
• Keep the important words early, since the end may be cut off.

The names above are made up.

The meta description

Lighthouse says the <meta name="description"> element provides a summary of a page's content that search engines include in search results. Its audit fails only when the tag is missing or empty. It does not judge quality. In the SEO category its weight is 1.

The Almanac found a meta description on 67.7% of desktop pages and 67.2% of mobile pages. The median length was 274 characters, far more than what is displayed. It notes that snippet display is limited by pixel width, roughly 920 to 980 pixels on desktop and 680 on mobile, so the cut-off depends on the letters. It also notes that Google frequently rewrites snippets, but that a well-written description still gives you some influence over how the page appears.

Lighthouse's best practices for descriptions:

• Use a unique description for each page.
• Make descriptions clear and concise, and avoid vague ones such as "Home".
• Avoid keyword stuffing. It does not help users, and search engines may mark the page as spam.
• A description does not have to be a complete sentence.

A useful test: read the description as if it were an advertisement for the page. Would a stranger know what they will get, and who it is for?

The headings

Headings give a page its outline. A reader skims them, and assistive technology lists them. In the Almanac, h1 was on 71% of desktop pages and 70% of mobile pages, and non-empty on 66%. h2 was on 72% and 71%, h3 on about 60% and h4 on 37% and 36%. The Almanac points out that empty headings are now the exception, and that some designs skip a main heading on purpose.

Lighthouse's heading order audit says properly ordered headings that do not skip levels convey the structure of the page and make it easier to navigate with assistive technologies. On a test page with an h1 followed by an h3, Lighthouse 13.5 flagged the h3. The empty heading check has a weight of zero, but Lighthouse notes that a heading with no content prevents screen reader users from accessing information on the page's structure.

A simple pattern:

1. One `h1` that names the page, close to the title in meaning but not necessarily the same words.
2. `h2` headings for the main sections.
3. `h3` headings only inside an h2 section, and so on.
4. Headings for structure, not for size. Use CSS to make text bigger and a heading level to say what it is.

The raw HTML

Search tools and assistive tools read the HTML the server sends. If a script writes the title or headings later, a tool that does not run it sees "Loading…" and no outline. See JavaScript and SEO, which also covers the comparison script. For a single-page app, update the title and the main heading each time the view changes.

Where speed comes in

Title and description add a few dozen bytes. The heading matters more, because text can be the Largest Contentful Paint element. A big headline at the top of a page can be the LCP element, and text only counts once it has been drawn.

• Keep the main heading as text in the HTML, not an image of text. Text is smaller, scales, and can be read.
• Make sure its font loads quickly, or the heading will be invisible until it does. See web fonts and speed and Largest Contentful Paint.
• Do not hide the heading behind an animation that waits for script.

How to check

1. View the source of five important pages. Read the title, the description and the headings. Are they unique and sensible?
2. Run Lighthouse and read the title, description and heading order results. On a test page with no title, no description and an h1 followed by an h3, Lighthouse 13.5 failed document-title, meta-description and heading-order.
3. Search for your own pages and see which titles and snippets appear. Search engines may change what they show.
4. Look for duplicates. A crawl, such as the one in the internal linking guide, can be extended to list titles.
5. Read the headings alone, as a list. Does the page still make sense?

Mistakes to avoid

• The same title on every page, such as the site name.
• A title that is only the brand.
• No description, or the same one on every page.
• Keyword lists in place of words.
• A heading level chosen for its size.
• More than one thing called `h1` with no reason.
• The main heading as an image.
• A title set by script that shows "Loading…" in the raw page.
• Empty headings, left by a template.

Check your own page

Run the free audit and read the SEO findings. Then list the title and h1 of your five most important pages side by side. If two look alike, rewrite one.

Sources

• SEO chapter, Web Almanac 2025: title and description presence and length, pixel limits of snippets, heading usage and empty headings.
• The Lighthouse documentation on the meta description audit, and the Lighthouse 13.5 default configuration and audit texts for the document title, heading order and empty heading checks.