How to check a page's heading structure
A page's heading outline is what a screen reader user navigates by, and what a search engine reads to understand which parts of the page matter. Checking it takes about ten seconds once you know where to look. Knowing which problems are real and which are cosmetic saves you from pointless rewrites.
The ten-second check
Open DevTools on the page and run this in the Console:
[...document.querySelectorAll('h1,h2,h3,h4,h5,h6')]
.map(h => h.tagName + ' ' + h.innerText.trim().slice(0, 60))
.join('\n')You get the outline in document order, with the level attached. Read it top to bottom. If the sequence jumps from H2 to H4, or there is no H1 at all, you have found the two problems worth fixing.
What a healthy outline looks like
- One H1 that describes the page's subject, not the site name.
- No skipped levels. H2 for main sections, H3 for their subsections. Jumping H2 → H4 breaks the outline tree.
- Headings in order, in the markup. A visual match is not enough; screen readers follow tag order, not layout.
- Descriptive text. “Pricing” is better than “More”.
Which heading problems actually matter
Matters: missing or empty H1; skipped levels; headings used purely for font size, so a paragraph that looks like a heading is not marked up as one; headings carrying no text, such as an image with no accessible name.
Does not matter much: more than one H1. HTML5 allows it and Google has confirmed it handles it. Multiple H1s are untidy, not broken. It is not worth a rewrite on its own.
Headings are also not a direct ranking factor. Google uses them to understand page structure, and clear structure tends to correlate with better content, but adding keywords to headings does not lift rankings by itself.
Why it is an accessibility requirement, not a preference
Screen reader users list headings and jump between them constantly, which is far faster than reading a page linearly. Skipped levels make that navigation confusing because the hierarchy no longer matches what the reader announces. WCAG 2.2 treats headings as a structural requirement for this reason, and a missing H1 removes the page's main landmark label entirely.
Checking a whole site rather than one page
For a handful of pages, the console snippet is fastest. For a full audit, open each template once — homepage, product page, article, contact — because templates repeat. Crawling every URL finds the same three problems thousands of times.
We build a tool for the full-page version of this: SEOAudit Pro shows the heading tree alongside meta tags, JSON-LD, alt text and keyword density, in one pass, with no API key. The SEO Minion comparison explains the difference.
SEOAudit Pro
Heading tree, meta tags, JSON-LD, alt text and keyword density in one local scan.
See SEOAudit Pro →Common questions
- Does every page need exactly one H1?
- A single H1 is the clearest structure and what most accessibility guidance assumes, but multiple H1s are valid HTML and Google handles them. Missing or empty H1 is a real problem; having two is a tidiness issue.
- Do headings affect SEO rankings?
- Not directly. They help search engines and assistive technology understand the page, and clear headings usually accompany good content, but heading keywords alone do not move rankings.
- How do I see headings without DevTools?
- Most screen readers expose a heading list with a single shortcut. In Chrome, an accessibility inspection or a dedicated outline view shows the same tree. DevTools is simply the fastest option for a quick check.