Skip to content
SeenLens

Heading hierarchy: how to fix skipped heading levels

A skipped heading level means the page uses H3 headings with no H2 above them, or jumps from H1 straight to H3. Themes and page builders cause this when they pick a heading tag for its size. Fixing it takes minutes per template: use H2 for sections and H3 only inside an H2. SeenLens warns when a page has H3 headings and no H2.

By SeenLens · Last updated

Run the free 43-check scan on your page

What does the heading hierarchy check test?

The check counts the visible H2 and H3 headings on the page. It warns when the page has at least one H3 and no H2. It passes in every other case, including a page with no subheadings at all. The count covers the whole page, so a footer or sidebar widget with H3 headings counts too. Empty and hidden headings are skipped.

The check has low weight (priority P3). A page with a clean outline does not rank higher because of it. The outline matters because browsers, screen readers and extraction tools use headings to split a page into sections.

Two standards back the outline. The W3C accessibility tutorial on headings says lower ranks form subsections under higher ranks and advises against skipping ranks. WCAG success criteria 1.3.1 (Info and Relationships) and 2.4.6 (Headings and Labels) apply to headings.

On AI search, the evidence is thin. Google says you do not need to split content into small pieces for AI systems. Treat the heading outline as accessibility and editing hygiene that also helps tools find sections.

How can I see the heading outline of my page?

Count the heading tags in the HTML your server sends. Replace the URL with your page.

Terminal
curl -s https://example.com/page | grep -oiE '<h[1-6]' | tr 'A-Z' 'a-z' | sort | uniq -c

Output such as 1 <h1 and 6 <h3 with no <h2 line confirms the problem. This count includes hidden headings, so the SeenLens number can be lower. You can also run the free scan. The evidence line shows the H2 and H3 counts.

How do I fix skipped heading levels?

Choose the heading tag by its place in the outline. Choose the size with CSS. The example shows the fix.

HTML
<!-- Before -->
<h1>Pricing</h1>
<h3 class="section-title">What is included</h3>
<h3 class="section-title">Refunds</h3>

<!-- After -->
<h1>Pricing</h1>
<h2 class="section-title">What is included</h2>
<h2 class="section-title">Refunds</h2>

Next.js and React

Give shared components a level prop instead of a fixed tag. Callers then pick the right level.

components/section-title.tsx
type Level = 2 | 3 | 4;

export function SectionTitle({ level = 2, children }: { level?: Level; children: React.ReactNode }) {
  const Tag = ("h" + level) as "h2" | "h3" | "h4";
  return <Tag className="section-title">{children}</Tag>;
}

WordPress

In the block editor, select a Heading block and change the level in the block toolbar. If a theme template or widget area prints H3 headings by itself, edit the theme template or the widget block. Block themes let you change the tag in the Site Editor.

Shopify

Open the theme code editor and search the section files (the sections folder) for <h3. Change the tag to <h2> where the heading starts a section. Many themes let you pick the heading size in section settings, which leaves the tag alone.

Static sites and page builders

Edit the HTML or Markdown source. In Markdown, ## makes an H2 and ### makes an H3. Page builders usually have a Heading tag option next to the font size setting. Set the tag to H2 and use the size option for the look.

How do I verify the fix?

  1. Run the curl command again. An <h2 line must appear before the first <h3.
  2. Scan the page with SeenLens. The check passes when the page has at least one H2, or no H3.
  3. Use a browser extension or the accessibility tree in Chrome DevTools to view the outline. It must read like a table of contents.

When can I ignore this warning?

A short page with no subheadings passes already. If the warning comes from a footer or widget that uses H3 for small labels, the content of the page is unaffected. Change the widget tags when you next touch the theme. The check is the lowest priority in the content group, so fix the title, description and H1 first.

Sources