Fix Missing H1 Tag: Add a Single Primary Heading Per Page

What's happening

The element is the document's top-level heading. Search engines use it as a strong topical signal alongside the tag and main content. Screen readers expose it as the page's primary landmark, and keyboard users navigate by heading level. When the H1 is missing, Google falls back to the title or a content-derived heading, and screen reader users have to scan the page to figure out what it is about.

Missing H1s are common on app-like pages built with component libraries that default to H2 or H3 for visual headings. They also appear on landing pages where designers used a styled for the main heading instead of. Visually identical, semantically empty.

The Lighthouse SEO audit flags missing H1s under 'Document has a heading hierarchy' (and axe-core flags them under 'page-has-heading-one'). Both tools are part of any modern accessibility/SEO pipeline.

Why it matters

Topical relevance signal weakens. The H1 is one of three primary signals (title, H1, main content) Google uses for relevance scoring. Missing it puts more weight on the others, making mismatches between title and content more impactful.

Accessibility scoring drops. WCAG 2.5 Level A success criteria require a meaningful heading structure, and missing H1 fails an automated check. For sites in regulated markets (gov, finance, healthcare) that may be a compliance issue.

Featured snippets and AI Overviews rely on heading hierarchy. Pages without H1 are less likely to be selected for the snippet because the extractor cannot identify the primary topic.

Common causes

• Designer used a styled or for the hero headline.
• Component library defaults to H2 because the H1 is reserved for the page chrome.
• Migration stripped headings during a content import.
• Markdown source was rendered without a leading H1 (the document title was outside the body).
• App route renders an empty layout slot where the page-specific H1 should be.
• JavaScript framework set the heading client-side, but the SSR HTML had no heading at all.

Detect this on your site

Run a quick scan with the SEO Auditor. The tool surfaces this exact issue with the records and context needed to apply the fix below.

How to fix it

1. 1

   Audit which pages lack an H1

   Crawl the site and report the H1 count per URL. Pages with zero H1s need a heading added. The SEO Auditor groups results by URL pattern so you can identify systemic template gaps.

2. 2

   Add the H1 in the SSR template

   Set the H1 in the server-rendered HTML, not via document.querySelector after hydration. Googlebot indexes rendered DOM, but ranking signals are stronger when present in the initial HTML — and screen readers only see SSR HTML on first paint.

3. 3

   Match the H1 to user intent

   The H1 should express the page's primary topic in plain language. For an article it is the headline. For a product it is the product name plus a short modifier. Avoid generic headings like 'Welcome' or 'Home'.

4. 4

   Style the H1, do not avoid it

   If the design calls for the heading to look different from default H1, style it with CSS. Do not replace the H1 with a styled. Use class-based styling on the element itself.

5. 5

   Audit heading hierarchy below the H1

   Section headings should be H2, sub-sections H3. Do not skip levels. The page should read as a logical outline when you list every heading in order.

6. 6

   Verify with Lighthouse and a screen reader

   Lighthouse's SEO audit should pass the heading-hierarchy check. Open VoiceOver or NVDA and use the heading-navigation shortcut to confirm the H1 is announced first.

Related fixes