Heading Structure Analyzer
Audit any page's H1–H6 hierarchy and get an A–F grade with specific fixes. Catches missing H1s, duplicate H1s, skipped levels, and empty headings.
How to use this tool3 quick steps
Get the rendered HTML
For static pages, View Source (Ctrl+U) is enough. For React/Vue apps, use DevTools → Elements → right-click<html>→Edit as HTML→ copy.Paste the HTML below
We strip everything except H1–H6 tags and analyze the hierarchy.Read the audit
Issues flagged: missing H1, multiple H1s, skipped levels (e.g., H1 → H3), empty headings, and over-deep nesting.
Use this with
Related on-page & serp tools
Heading Structure Guide
Why heading hierarchy still matters
Headings are the outline of your page — for humans scanning, for screen readers navigating, and for Google understanding structure. A broken hierarchy (missing H1, skipped levels, dozens of H2s with no sub-hierarchy) signals a page that wasn't carefully edited and often ranks below pages with clean structure.
Exactly one H1 per page
The H1 is your page's main title — the answer to 'what is this page about?' Multiple H1s fragment the signal. Zero H1s leave Google guessing. Aim for exactly one, matching your main topic closely.
Don't skip levels
Jumping from H1 to H3 without an H2 breaks the outline. Screen readers navigate by level — a skipped level makes sections unreachable. Keep the sequence H1 → H2 → H3 intact.
H2s are your main sections
Think of H2s as book chapters. Each H2 should cover one clear topic. Too few (1–2) means your article is probably too narrow; too many (15+) suggests it should be split into multiple pages.
H3s are your subsections
H3s break up H2 sections when they run long. If your H2 sections are under 300 words, you probably don't need H3s. If they exceed 500 words, H3s help scannability a lot.
Empty headings are a bug
Screen readers announce empty headings as 'heading, blank' — confusing and annoying. Usually caused by stray <h2></h2> tags from a CMS. Fix them in the template.
Repeated H2s may indicate template issues
If 'Related Articles' appears as an H2 three times, you probably have three Related Article widgets. That's fine visually but noisy for Google's outline understanding. Consider demoting duplicates to H3.
Pro Tips
The H1 is a strong on-page signal — include your target keyword naturally. Don't stuff; one instance is enough.
Phrase H2s as questions or question-like ('What is…', 'How to…'). This increases the chance of matching long-tail searches and winning Featured Snippets.
Browse any page, open DevTools, and run: $$('h1,h2,h3,h4,h5,h6').map(h => `${h.tagName} ${h.innerText}`). Copy that output to audit pages without the View Source step.
Frequently Asked Questions
- Can I use more than one H1?
- HTML5 technically allows it — each <section> can have its own H1 in strict HTML5 outlining. But Google's tools and most screen readers still expect one H1 per page. Unless you're building a document-level outline intentionally, stick to one.
- How is this different from Google Search Console?
- Search Console reports on Google's view after crawl. This tool audits any HTML you paste, immediately — useful before a page is published, during a migration review, or on content you don't own.
- What counts as a "skip"?
- Going from H1 to H3 without an H2 in between. Going from H3 back up to H2 is fine (that's normal section change). The rule is: each new level deeper must be one level down, never two.
- Does this work on React or SPA pages?
- Paste the rendered HTML (from DevTools' Elements panel). Component source won't parse — we look for literal <h1> tags. For Next.js or React apps, use the browser's rendered DOM, not the JSX file.