--- title: "Missing H1 heading - Serpwise" description: "The H1 heading names a page's primary topic for readers, assistive technology, and search engines. Learn how to audit and fix missing or unclear headings." url: "https://serpwise.ai/learn/missing-h1-heading/" source: "https://serpwise.ai/learn/missing-h1-heading/" --- [← Back to Learn](/learn/) Page Metadata Info # Missing H1 heading The H1 heading names a page's primary topic for readers, assistive technology, and search engines. Learn how to audit and fix missing or unclear headings. `

` is the semantic heading for the page’s primary topic. It helps readers, assistive technology, and search systems understand the page structure. It can also contribute to the title link Google generates for a result. Missing H1s usually aren’t an oversight. They’re a design pattern: a stylized “page title” rendered as a styled `
` or `
`, with no semantic tag underneath. ## How to detect it ``` curl -s https://example.com/some/page \ | grep -oE ']>[^<]

' ``` Zero matches means the primary heading may be missing. Multiple matches are not automatically invalid, but they are worth reviewing when the page has no clear heading hierarchy. A faster signal: render the page, open DevTools, and run `document.querySelectorAll('h1').length` in the console. A result of `0` needs attention. A result above `1` needs a quick hierarchy review. ## What good H1 usage looks like - **One clear primary `

` is a reliable site convention. Multiple H1 elements are not automatically a Google violation, but one primary heading keeps templates and accessibility reviews predictable. - Contains the page’s primary topic in real words. Not an image without alt text. Not “Welcome.” Not an empty container. - Roughly matches the ``, but doesn’t have to be identical. Title can include the brand; H1 can omit it. - Visually styleable however you want** - semantic tag is independent of CSS. Example: a blog post. - `<title>`: `How to write a meta description that survives Google rewrite - Acme` - `<h1>`: `How to write a meta description that survives Google rewrite` ## The fix ### Universal HTML ``` <body> <h1>The page's primary topic, in real words</h1>  </body> ``` The `<h1>` should come early in the body, before any sub-section. Don’t nest it inside a `<header>` that contains site-wide nav - it’s the page landmark, not a section header. For decorative “hero” sections where the visual title is an image with overlay text, render the heading as text and visually hide it only if absolutely needed - never the other way around: ``` <h1 class="sr-only">Project management for engineering teams</h1> <div class="hero-art"></div> ``` ``` /* universal "screen-reader only" pattern / .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } ``` ### WordPress In most themes, the post title renders as `<h1>` automatically. The bug shows up when: - A page builder (Elementor, Divi) lets you mark any element as a “Heading” without enforcing one H1. - The theme’s homepage template uses `<h2>` for the page title because the site name is hard-coded as `<h1>` somewhere. Open page source and search for `<h1`. If there’s no match, locate the template emitting the title and change the wrapping tag. ### Shopify Themes vary. The fix is in `templates/product.liquid`, `templates/collection.liquid`, etc: ``` <h1 class="product__title">{{ product.title }}</h1> ``` Many free themes put the store name as `<h1>` in the header and the product title as `<h2>` - flip them. ### Next.js / React Treat H1 as required content, not decoration. Add a template test that checks important page types after rendering: ``` const headings = document.querySelectorAll("h1"); if (headings.length === 0) throw new Error("Missing primary heading"); ``` In an App Router page: ``` export default function Page() { return ( <article> <h1>The page topic</h1> <p>The content.</p> </article> ); } ``` ## Pitfalls Don’t let multiple `<h1>` elements create competing page topics. One primary H1 is the easiest convention to maintain. If a template uses more than one, confirm that the hierarchy remains clear to readers and assistive technology. Don’t hide the H1 with `display: none`. That removes it from the accessibility tree. A visually-hidden pattern can work when a visible text heading is genuinely impossible, but visible headings are preferable. Keep heading levels logical. A predictable H1, H2, H3 hierarchy makes navigation easier for assistive-technology users and keeps the document structure understandable. Don’t put the site name as H1 on every page. Site name belongs in the logo (which can be an `<a>` wrapped around an `<img>` or text). The H1 is the page* topic, not the brand. Don’t auto-generate H1 from the URL slug. “Best-espresso-machines-2026” reads like a slug, not a title. Use a real, writer-edited heading. ## Fix at the edge with Serpwise When a section of the site renders the page title as a styled `<div>` and the template fix sits behind a vendor or a team you don’t own, the upstream fix takes weeks. Serpwise can promote any element to `<h1>` based on a CSS selector - find `<div class="page-title">`, rewrite its tag to `<h1>`, preserve the styling. The semantic markup is correct in the response that reaches crawlers and assistive tech; the visual design doesn’t change. [See pricing](/pricing) or run a [free AI visibility audit](/audit). From diagnosis to deployment ## Find the issue. Ship the fix. Use Learn to understand the problem, then run Serpwise against your own site to see what can be approved and deployed. [Run free audit](/audit/) [Book a demo](/demo/)