Heading Structure Checker
Enter any URL to extract its full H1 through H6 heading tree. Find missing H1 tags, skipped levels, and structural issues that affect how Google ranks your pages, how screen readers navigate them, and how AI models extract and cite your content.
Why Heading Structure Matters for SEO
Heading tags (H1 through H6) are not just visual formatting cues — they define the semantic outline of your page. Google's crawler reads this outline to understand what your page is about, which sections cover which sub-topics, and where to find answer-ready text for featured snippets and People Also Ask results.
A page with one clear H1 and logically nested H2 and H3 sub-headings signals a well-organized, trustworthy document. A page where H3 tags appear before any H2, or where the H1 says "Welcome" while the actual topic is buried in an H2, tells Google that the page structure is unreliable. Both patterns reduce the chance of earning featured placements and make it harder for Google to confidently attribute topical relevance.
The Accessibility Dimension
Screen reader users navigate pages almost exclusively by headings. When a keyboard-only user presses H to jump to the next heading, the sequence they encounter is your heading hierarchy. WCAG 2.1 Success Criterion 1.3.1 (Info and Relationships) requires that information conveyed through structure is available programmatically. Skipped heading levels break this requirement.
Beyond compliance, a well-structured heading tree means your product pages, documentation, and blog posts are usable by the 2.5 million Americans with visual impairments who rely on assistive technology daily. Accessibility and SEO are aligned here: the heading structure that earns featured snippets is the same structure that works best for screen readers.
The Correct Heading Hierarchy
Think of headings as a document outline. Each level introduces a sub-section of the level above it. The rules are straightforward:
Never skip levels: going from H1 to H3 without an H2 is invalid. Never use heading tags purely for font size — that is a styling concern, not a structure concern. If you want smaller text, use CSS or Tailwind classes and keep the semantically correct heading level.
Structuring Headings to Earn Featured Snippets
Featured snippets and AI-generated answers both pull from pages that answer a specific question in a specific way. The pattern that works is: write your H2 or H3 as the exact question a user searches, then immediately follow it with a direct, concise answer in the first paragraph below the heading. Example structure:
H1: Sitemap Guide for Next.js Developers H2: What is an XML Sitemap? <paragraph: 2-3 sentences answering directly> H2: Does Google Use the Priority Field in Sitemaps? <paragraph: direct yes/no then explanation> H2: How Do I Submit My Sitemap to Google Search Console? <ordered list of steps> H2: How Do I Generate a Sitemap in Next.js? <code example>
Each H2 becomes a candidate for a separate featured snippet. The heading text does not need to be keyword-optimized jargon — it should be the natural language question the reader has in their head. Google's NLP is better at matching intent than exact keywords.
Common Heading Mistakes in React and Next.js
Styling with semantic heading tags
Using H3 because it looks like the right font size in your design system, not because it follows an H2 in the document outline. Fix: apply font-size via Tailwind classes and use the semantically correct heading level. In Tailwind: <h2 className="text-sm font-bold"> renders H2 text at any size you want.
Multiple H1 tags from component composition
A page template has an H1 in the site header, and the page component also renders an H1 for the content heading. React's component model makes this easy to miss. Fix: audit the full rendered DOM, not just each component individually. This tool shows you what the browser actually renders.
H1 inside a CMS field that is duplicated
Blog or documentation CMS setups where the post title renders as both an H1 in the page layout and as the first heading inside the content field. Result: two H1 tags. Fix: configure your CMS to render the title-from-layout only, and tell editors to start content headings at H2.
Dynamic page sections with no heading context
Accordion sections, tabs, and modal-generated content that use H3 or H4 to label sections but appear before any H2 on the page. To Google and screen readers, these headings appear to belong to the H1 directly, skipping a level.
How to Implement Correct Headings in Next.js
Next.js renders standard HTML headings. The common mistake is coupling visual size to heading level. Here is a pattern that decouples them so you can use the correct semantic heading at any visual size:
// components/Heading.tsx
type Level = 1 | 2 | 3 | 4 | 5 | 6
interface HeadingProps {
level: Level
className?: string
children: React.ReactNode
}
export function Heading({ level, className = '', children }: HeadingProps) {
const Tag = `h${level}` as keyof JSX.IntrinsicElements
return <Tag className={className}>{children}</Tag>
}
// Usage: semantically correct H2, visually large
<Heading level={2} className="text-2xl font-bold">
How Does This Work?
</Heading>
// Usage: semantically correct H3, visually small
<Heading level={3} className="text-sm font-semibold text-neutral-500">
A sub-section note
</Heading>Heading Structure and AI Visibility
AI models that generate answers with citations — Perplexity, ChatGPT with web search, Google AI Overviews — use heading structure to identify the most relevant section of a page for a given query. When a model needs to answer "what is a redirect chain," it looks for a heading that matches or closely relates to that question, then extracts the text immediately following it. Pages with vague headings like "Overview" or "Details" are passed over in favor of pages where headings explicitly name the topic being covered. Treating your H2 and H3 tags as the answers to specific user questions is the single highest-leverage change you can make to improve AI citation frequency.
Frequently Asked Questions
How many H1 tags should a page have?
One. A single H1 is the correct and widely recommended pattern. Historically, Google stated that multiple H1 tags are fine technically, but every major SEO guide and accessibility standard (WCAG) treats one H1 as the rule because it creates a clear, unambiguous document title. Using multiple H1 tags dilutes the primary topic signal, makes the heading tree harder for screen readers to navigate, and reduces your page's chance of earning a featured snippet, which requires a clearly identified primary question or topic.
Do heading tags directly affect Google search rankings?
Yes, but modestly. Google uses heading tags as signals for understanding the topic and structure of a page, not as direct ranking factors like backlinks or content depth. An H1 that matches the primary keyword helps confirm topical relevance. H2 and H3 tags that use question-format text can earn featured snippets and People Also Ask placements. The bigger SEO impact is indirect: well-structured headings improve readability, reduce bounce rate, and make it easier for Google to extract answer-ready text for featured snippets and AI-generated responses.
What is a skipped heading level and why does it matter?
A skipped heading level occurs when a page jumps from H2 directly to H4, bypassing H3, or from H1 directly to H3 without an H2. This is a problem for screen readers, which use the heading hierarchy to help keyboard-only users navigate page sections. WCAG 2.1 Success Criterion 1.3.1 requires information structure to be programmatically determinable, and skipped levels break that structure. For SEO, skipped levels make the page's content hierarchy ambiguous, which can reduce the likelihood that Google extracts structured answer text from within sections.
How should I structure headings for featured snippets?
To maximize featured snippet opportunities, write H2 and H3 tags as the exact question a user would type into Google, then immediately follow the heading with a concise 40-60 word paragraph that directly answers it. This question-answer pattern is what Google extracts when generating paragraph snippets. For list snippets, follow an H2 question with a bullet or numbered list. For table snippets, follow an H2 question with a comparison table. The heading itself does not need to contain the keyword verbatim, but it must read as a natural question.
What are common heading mistakes in React and Next.js apps?
The most common mistake is using heading tags for visual styling rather than semantic structure. Developers reach for H3 because it looks like the right size in their design system, not because it follows logically from the H2 above it. The fix is to style headings independently of their semantic level using Tailwind classes or CSS, so you can write the correct heading level and apply any font size you want. A second mistake is rendering headings dynamically from CMS content without validating that the hierarchy is correct — a blog post's editor may not know that their document already has an H1 in the page template.