Fix Heading Hierarchy Skips (H2 to H4): SEO Guide
A heading-hierarchy skip means your page jumps a heading level, such as an H2 followed directly by an H4 with no H3 in between. It breaks the logical outline that screen readers, search crawlers, and AI answer engines use to understand how your content is organized. This is a low-severity (notice) issue that won't tank your rankings, but fixing it makes your page cleaner for assistive tech, more parseable for machines, and easier to lift into featured snippets and AI answers.
What this means
HTML headings (<h1> through <h6>) form a nested outline of your page, like the levels in a table of contents. Each level should descend one step at a time: an <h1> contains <h2> sections, each <h2> contains <h3> subsections, and so on. A heading-hierarchy skip is flagged when a heading jumps more than one level deeper than its parent, most often an <h2> followed directly by an <h4>, or an <h1> jumping straight to an <h3>.
This almost always happens for visual reasons, not structural ones. Someone picks an <h4> because it renders at the font size they want, or a page builder inserts a widget whose default heading level doesn't match the surrounding content. The result is an outline with a hole in it: a subsection that claims to be two levels deep while its parent is only one level deep.
Skipping levels going back up is fine. An <h4> followed by a new <h2> is valid, because the <h2> closes the previous section and opens a new top-level one. The problem is only skipping down a level, going from a shallower heading to one that's more than one step deeper.
Why it matters
The most direct impact is accessibility. Screen-reader users navigate by jumping between headings and rely on the level numbers to understand nesting. When an <h2> is followed by an <h4>, the screen reader announces "heading level 4" and the user assumes an <h3> was skipped or missed, which is disorienting. Skipping heading levels maps to WCAG 1.3.1 (Info and Relationships) and is flagged by tools like axe and Lighthouse under their heading-order rule, though it's usually treated as a best-practice violation rather than a hard AA failure.
For classic Google ranking, the direct effect is small. Google's John Mueller has said heading order is not a meaningful ranking factor and that fixing it won't lift rankings on its own. That's why this is a notice, not a critical error. But headings still help Google parse which content belongs under which topic, and a clean hierarchy makes your page a better candidate for featured snippets, which are frequently pulled from well-structured heading-and-list content.
The angle increasingly worth caring about is AI answer engines. Tools like ChatGPT, Perplexity, and Google's AI Overviews chunk pages along heading boundaries to decide what a section is about and whether to quote it. A logical, unbroken outline gives these systems clean, self-describing blocks to extract. A broken hierarchy produces ambiguous chunks where a subsection floats without a clear parent, making your content harder to cite accurately.
How to fix it
- 1
Map your current heading outline
Before changing anything, see the actual structure. In Chrome, install a headings-outline extension (such as HeadingsMap), or run
document.querySelectorAll('h1,h2,h3,h4,h5,h6').forEach(h => console.log(h.tagName, h.textContent))in the DevTools console. This shows exactly where the outline jumps, for example an<h2>immediately followed by an<h4>. Decide the correct nesting first, and treat styling as a separate step. - 2
Change the tag, not the look
For each skip, promote the too-deep heading to the correct next level. If an
<h2>is followed by an<h4>, change that<h4>to an<h3>when it's a subsection of the H2. If the heading only needs to look smaller, don't fix that by choosing a lower heading level. Keep the semantic<h3>and control its appearance with CSS (h3 { font-size: 1.1rem; }or a utility class). Heading level communicates structure; font size communicates emphasis, and the two should stay decoupled. - 3
Keep one H1 and descend one step at a time
Confirm the page has a single primary
<h1>(your page title), then check that every heading below it steps down by one level at most. A valid pattern is H1, H2, H3, then back up to a new H2, then H3 again. Going back up any number of levels is fine; only skipping down is the problem. If you need an<h4>, make sure a real<h3>parent exists above it in the source order, not just visually. - 4
Fix the source of the skip in your CMS or builder
Most skips come from a template, block, or widget rather than hand-written content. In page builders (Elementor, Divi, Gutenberg, Wix, Squarespace), each heading block has an HTML-tag dropdown (H1 through H6) that is separate from its style, so open the offending block and set the correct tag. If a reusable component or theme partial hard-codes the wrong level (for example a related-posts widget outputting
<h4>inside<h2>content), fix it in the component so every page inherits the correction. - 5
Re-audit and confirm the outline is unbroken
After editing, re-run your headings-outline tool and your site audit. The corrected outline should read like a clean table of contents with no gaps. Run Lighthouse or axe DevTools, both of which flag
heading-orderissues, to confirm the warning has cleared. Spot-check with a screen reader's heading-navigation shortcut (VoiceOver: rotor to Headings; NVDA: press H) to hear that the levels now announce in a sensible order.
Example
<!-- Bad: skips H3, jumps H2 straight to H4 -->
<h1>Complete Guide to Cold Brew</h1>
<h2>Choosing Your Beans</h2>
<h4>Roast Level</h4> <!-- skip: should be H3 -->
<h4>Grind Size</h4> <!-- skip: should be H3 -->
<!-- Good: descends one level at a time -->
<h1>Complete Guide to Cold Brew</h1>
<h2>Choosing Your Beans</h2>
<h3>Roast Level</h3>
<h3>Grind Size</h3>
<h2>Brewing Method</h2> <!-- valid: jumps back UP to H2 -->
<h3>Steep Time</h3>
<style>
/* Control appearance without breaking the outline */
h3 { font-size: 1.1rem; font-weight: 600; }
</style>Left: a broken hierarchy that skips from H2 to H4. Right: the corrected outline that descends one level at a time, with size controlled by CSS instead of the tag choice.
Platform-specific steps
In the block editor, select a Heading block and use the H1-H6 buttons in its toolbar (or the Level control in the block sidebar) to set the correct tag without touching its style. Yoast and Rank Math both run a heading-structure check in their content analysis and will warn when levels are skipped, so use that panel to spot the offending block. If the skip comes from your theme (single.php, a template part, or a widget), edit the PHP so the heading uses the right level for its context.
Select the Heading widget and change the HTML Tag setting (in Elementor: Content tab, HTML Tag dropdown; in Divi: the Heading Level control). This is independent of the size and typography settings, so you can keep the correct semantic level and adjust the font size separately under the Style tab.
Both let you pick a text style (Heading 1-6 / H1-H4) from the text formatting menu, and that choice sets the underlying tag. Reassign the paragraph to the correct heading level, then use custom CSS or the theme's design panel to control its appearance rather than picking a smaller heading just for the look.
Edit the JSX or template so each section uses the semantically correct tag, and drive appearance with CSS classes. If headings are generated from data (for example a CMS-driven nested menu or a Markdown-to-HTML pipeline), compute the level from the item's depth so the output can never skip a step.
Frequently asked
Not directly or meaningfully. Google's John Mueller has said heading order is not a real ranking factor and that fixing it won't improve rankings on its own, which is why this is flagged as a low-severity notice. The real payoff is accessibility, cleaner parsing for featured snippets, and better chunking by AI answer engines, not a rankings boost.
It's discouraged and gets flagged by tools like Lighthouse and axe under the heading-order rule. It maps to WCAG 1.3.1 (Info and Relationships) but is usually treated as a best-practice violation rather than a hard AA failure. Screen-reader users rely on level numbers to understand nesting, so an unexpected jump from level 2 to level 4 is confusing even when it doesn't technically fail conformance. It's quick to fix and worth doing.
Yes. Jumping back up any number of levels is valid, because a new higher-level heading closes the previous section and starts a new one. An <h4> followed by an <h2> is fine. The only pattern to avoid is skipping down more than one level, such as an <h2> immediately followed by an <h4> with no <h3> in between.
Use CSS, not a lower heading tag. Keep the semantically correct element (say <h3>) and style it: h3 { font-size: 1.05rem; font-weight: 600; }, or apply a utility class. Heading level should reflect structure, and visual size should reflect emphasis. Choosing an <h5> just because it renders smaller is exactly what creates hierarchy skips in the first place.
Yes, indirectly but importantly. Systems like ChatGPT, Perplexity, and Google AI Overviews break pages into chunks along heading boundaries to decide what each section covers and whether to quote it. A clean, unbroken outline gives them well-labeled, self-contained blocks to extract, which makes your content easier to cite accurately. A broken hierarchy produces orphaned subsections that are harder to attribute to the right topic.
Does your site have this issue?
Run a free, AI-powered audit and we’ll flag this and 150+ other checks in about a minute. No signup.