<h1> is the semantic name of the page’s primary topic. Search engines weight it heavily as a confirmation of what the page is about. Screen readers use it as a landmark — “what page am I on?” Many people who rely on assistive tech don’t read past it if it doesn’t match the link they clicked.
Missing H1s usually aren’t an oversight. They’re a design pattern: a stylized “page title” rendered as a styled <div> or <p>, with no semantic tag underneath.
How to detect it
curl -s https://example.com/some/page \
| grep -oE '<h1[^>]*>[^<]*</h1>'Zero matches = missing. More than one match = problem (next section).
A faster signal: render the page, open DevTools, run document.querySelectorAll('h1').length in the console. 0 is missing; anything > 1 is also a problem.
What good H1 usage looks like
- Exactly one
<h1>per page. - Contains the page’s primary topic in real words. Not an image without alt text. Not “Welcome.” Not an empty container.
- Roughly matches the
<title>, 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>
<!-- everything else -->
</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"><!-- decorative --></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. If the page has no <h1> element, the build should fail or warn. A simple lint rule:
// eslint config (or biome equivalent)
// react/no-missing-h1 — flag any page that doesn't render exactly one <h1>In an App Router page:
export default function Page() {
return (
<article>
<h1>The page topic</h1>
<p>The content.</p>
</article>
);
}Pitfalls
Don’t have multiple <h1>s per page. The HTML5 spec technically allowed multiple H1s with sectioning roots, but Google and assistive tech still treat the first one as canonical. Stick with one.
Don’t hide the H1 with display: none. Screen readers honor it. Visually-hidden via the .sr-only pattern above is fine; display: none is not.
Don’t skip heading levels. An H1 followed directly by an H3 confuses both crawlers and screen-reader users. H1 → H2 → H3 in document order.
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 or run a free AI visibility audit.