How to fix a missing or duplicate H1

Give each page exactly one <h1> containing the page's main topic in plain language. Pages with no H1 lose an important relevance and accessibility signal; pages with several H1s dilute it and confuse screen-reader users navigating by heading.

Last updated 2026-07-28

What is an H1 and why does every page need one?

The H1 is the page's main on-page headline, marked up as <h1>, and every page needs one because it is the single unambiguous statement of what the page is about. Search engines use it to confirm the topic; screen-reader users use it as the landmark that tells them where the content starts.

It is also the string Google most often substitutes when it decides to rewrite your title tag, which means a weak H1 does damage twice over — once on the page and once in the search result.

The H1 should cover the same ground as the title without being a word-for-word copy. The title is written for someone scanning ten results; the H1 is written for someone who has already arrived and wants confirmation they are in the right place.

Can a page have more than one H1?

Technically yes, practically no. HTML5 permits multiple H1s inside sectioning elements such as <section> and <article>, but the document outline algorithm that was supposed to make that work was never implemented by a single browser or screen reader, and it was eventually removed from the specification.

So a page with four H1s does not produce a nested outline for anyone. It produces four top-level headings of equal rank, which tells a screen-reader user that the page has four separate main topics and tells a crawler that none of them is definitive. One H1 per page remains the correct advice.

What are the usual reasons an H1 goes missing?

Almost always a visual decision rather than a content one: the headline was styled as a <div> because the H1 default size did not fit the design, or the logo was wrapped in the H1 on the homepage as a leftover from an older convention.

• No H1 at all — common on homepages where the hero headline is baked into an image or marked up as a styled <div>.
• Several H1s — common when a design system reaches for H1 styling to emphasise cards, pull quotes or section intros.
• An H1 containing only a logo image, which leaves the page effectively headline-less unless the image carries real alt text.
• An H1 rendered by JavaScript after load, which is fine for Googlebot but invisible to the many AI crawlers that do not execute scripts.
• A single-page app that keeps one H1 in the shell and never updates it per route, so every URL claims the same headline.

What should the H1 actually say?

It should state the page topic in a full, plain phrase a person would recognise — "How to fix a missing meta description", not "Overview" or the company name. If a reader who landed with no context could not tell what the page delivers from the H1 alone, it is not doing its job.

Keep it to one line where possible; there is no character limit, but an H1 running past about 70 characters usually means two ideas are fighting for the slot. Repeat the primary term once, naturally, and stop — the H1 is a poor place to chase keywords and a good place to earn a reader's trust.

What does correct H1 markup look like?

A single <h1> element containing the headline text, positioned before the body content and above any <h2> sections. Size it with CSS rather than picking a different tag to get the look you want.

<!-- Bad: headline is a div, logo is the only h1 -->
<h1><img src="/logo.svg" alt=""></h1>
<div class="text-4xl font-bold">Audit any website in one click</div>

<!-- Bad: h1 used for visual emphasis inside cards -->
<section><h1>Fast</h1></section>
<section><h1>Local</h1></section>

<!-- Good: one descriptive h1, sized with CSS -->
<h1 class="text-4xl font-bold">Audit any website in one click, right on your computer</h1>
  <h2>What the report covers</h2>

How do I check the H1 on every page at once?

Crawl the site and export a count of H1 elements per URL, then filter for anything that is not exactly one. Zero and two-or-more are different bugs with different causes, so it helps to see them as separate lists.

Audra counts H1 elements on every crawled page and reports both the zero-H1 and multiple-H1 cases, alongside the heading-order check that catches skipped levels. Because it reads the rendered DOM, headings injected by a framework are counted the same as static ones. Fixing the H1 usually clears the matching axe-core accessibility finding in the same pass, since the two checks are looking at the same markup.