What the warning means
A heading-order warning appears when heading levels do not describe a logical content hierarchy. A common example is moving from an H2 directly to an H4 because the H4 has the desired visual style.
Headings communicate the organization of a page. Browsers and assistive technologies can use them for in-page navigation, so the level should describe the section structure rather than the font size. The W3C guidance recommends nesting headings by rank and using CSS for visual presentation.
A correct heading hierarchy
<h1>Technical SEO audit</h1>
<h2>Crawling issues</h2>
<h3>Blocked pages</h3>
<h3>Redirect chains</h3>
<h2>Page quality</h2>
<h3>Thin content</h3>
The H1 describes the page topic. Each H2 starts a main section, and each H3 belongs to the H2 above it. A new H2 may follow an H3 when the previous subsection ends.
A hierarchy that needs review
<h1>Technical SEO audit</h1>
<h3>Crawling issues</h3>
<h5>Blocked pages</h5>
The visual result may look acceptable, but the document outline skips levels and makes the relationship between sections unclear.
How to fix heading order
- Identify the main page topic and use the page-level heading component intended for it.
- List every heading in DOM order, not only the headings visible on a desktop screenshot.
- Assign H2 to main sections, H3 to subsections inside an H2, and continue only when the content is genuinely nested.
- Change CSS classes or component variants to control appearance instead of choosing a heading level for styling.
- Review reusable cards, accordions, modals, sidebars, and footer components because they can introduce unexpected levels.
- Test the final page with a heading-outline tool and a screen reader or accessibility inspector.
A page can use more than one H1 in modern HTML, but one clear page-level H1 is usually the simplest and most consistent pattern for templates. The important requirement is a meaningful hierarchy, not an arbitrary heading count.
Common edge cases
- A heading hidden with CSS still exists in the accessibility tree unless it is removed correctly.
- Text that only looks like a heading is not a semantic heading.
- Empty headings create navigation stops with no useful label.
- Component libraries may render a different HTML element than their visual name suggests.
- Changing a heading level can affect anchor links, table-of-contents logic, and automated tests.
Verify the result
Re-crawl the page, inspect the generated HTML, and confirm that headings describe the same hierarchy at every responsive breakpoint. Read the W3C page structure and headings tutorial for accessible examples.