A broken heading hierarchy means a page's headings do not form a clean outline: there is no H1, there are several H1s, or the levels skip, for example an H2 followed straight by an H4. Readers who skim, screen reader users who jump between headings and crawlers that look for the page's main topic all rely on that outline. The fix is one H1 that names the page, then H2 and H3 in order, with visual size handled by CSS.
What a heading hierarchy is
Headings h1 to h6 describe the structure of a page, like the outline of a document:
<h1>Trail running shoes</h1>
<h2>How to choose</h2>
<h3>Cushioning</h3>
<h3>Grip</h3>
<h2>Our picks</h2>
Going back up is fine: an H4 can be followed by an H2 when a new section starts. The problems are going down a level too far, or having no single H1 at the top:
<!-- No H1: the page title is styled text -->
<div class="title">Trail running shoes</div>
<!-- Several H1s: logo, page title and a promo banner -->
<h1><img src="/logo.svg" alt="Example"></h1>
<h1>Trail running shoes</h1>
<!-- Skipped level: H2 straight to H4 -->
<h2>How to choose</h2>
<h4>Cushioning</h4>
Why it matters
- Accessibility. Screen reader users list a page's headings and jump between them. A missing H1 hides the page topic, and skipped levels suggest sections that are not there. The WCAG guidance on info and relationships expects structure to be available in the markup, not only in the visual design.
- Clarity for search engines. Heading order is not a ranking requirement, and search engines cope with pages that break it. But headings are one of the clearest signals of what each part of a page covers, and a clean outline makes the main topic unambiguous.
- Clear sections for AI answers. Descriptive headings make it easier for any system, AI answers included, to tell what each section covers and which passage answers a question.
- Readers skim. Most visitors scan headings before they read. An outline that makes sense on its own keeps them on the page.
Why it happens
- Headings chosen for their size. An editor picks H4 because it looks right, not because it is the right level.
- The logo wrapped in an H1 in the site header, which adds an H1 to every page.
- Theme sections with fixed levels. A banner, product grid or newsletter block that always renders an H1 or H2, wherever it is placed.
- Page builders and widgets that output headings for card titles, footers and sidebars.
- A missing page title in a template, where the title is styled text instead of a heading.
How to find broken headings
- Check a single page. In Chrome DevTools, run
document.querySelectorAll('h1,h2,h3,h4,h5,h6')in the console to list headings in order, or use an accessibility extension that shows the heading outline. - Check every page. UpCrawler flags Broken heading hierarchy when a page has no H1, more than one H1, or a heading that skips a level on the way down. Because the cause is usually a shared template, the affected pages tend to cluster by template, so one fix clears many URLs.
- Check Lighthouse. The accessibility audit reports Heading elements are not in a sequentially-descending order on the page you test.
How to fix it
Give every page exactly one H1 that says what the page is about, usually the same words as the title tag. Then use H2 for the main sections and H3 for subsections, without skipping. When a heading needs to look smaller or larger, change the CSS, not the level. Elements that are not headings, such as the logo or a promo line, should not use heading tags at all.
Put the H1 in each page component, not in a shared layout, so every route has its own:
export default function Page() {
return (
<article>
<h1>Trail running shoes</h1>
<h2>How to choose</h2>
</article>
)
}
Shared components such as cards should accept the heading level or render an H3 by default, so they fit under the page's H2 sections. Style the visual size with classes instead of choosing a different tag.
Most themes render the post or page title as the H1, so headings inside the editor should start at H2. In the block editor, the List View shows every heading block in order. Check your theme's header: if the site title or logo is wrapped in an H1 on every page, change it to a div or p in header.php or in the Site Editor's header template part.
In most themes the product, collection or page title is the H1, and section headings are H2. Problems usually come from a section that renders an H1, such as an image banner placed on a product page. Search your theme's sections folder for <h1 and make sure only the main template title uses it. Many themes also have a heading size setting, so the visual size can change without changing the level.
Let AI fix it, page by page.
Paste this prompt into AI with your project open. In UpCrawler, every affected page comes with a prompt like this, already filled in with its URL.
Exactly one H1 per page, then H2 and H3 in order with no skipped levels. Change visual size with CSS, never by picking a different heading level.
Frequently asked questions
Can a page have more than one H1?
HTML allows it, and it is not a ranking problem on its own. The problem is clarity: several H1s compete as the page's main heading for readers, screen readers and crawlers. One H1 per page is the simplest rule to follow and to check.
Do heading levels affect rankings?
Not directly, and there is no strict order requirement. Headings help search engines understand what each section covers, and they help visitors find what they came for, which is what keeps the page useful.
Is skipping from H2 to H4 really a problem?
For screen reader users, yes. A skipped level suggests a missing section and makes the outline harder to follow. It is also a sign the level was chosen for its look, which CSS should handle instead.
Should the H1 match the title tag?
It does not have to match word for word, but they should describe the same topic. A close match reassures people who arrive from search that they are on the right page. The missing title tag guide covers writing titles that earn the click.
Share it with whoever runs your site’s SEO.
