Heading Hierarchy Best Practices for AI Comprehension

When an AI model processes a web page, it does not read it the way a human does. It parses the HTML structure, identifies headings, and uses them as a map to understand how the content is organised. Headings tell the model what each section is about, how sections relate to each other, and which parts of the page are most likely to answer a specific question.

A page with a clear, logical heading hierarchy is dramatically more likely to be cited in AI-generated responses than a page with flat, inconsistent, or missing headings. This is because well-structured headings allow AI models to extract specific sections as standalone answers rather than processing the entire page as a block of undifferentiated text.

This guide covers the rules for proper heading hierarchy, why question-based headings improve AI citation rates, common mistakes that reduce AI comprehension, implementation patterns for Next.js and React, and how to audit your existing pages. Use the AgentReady scanner to automatically check heading structure across your site.

Why Heading Structure Matters for AI

AI models process web content through a pipeline: fetch the HTML, strip away non-content elements (navigation, footers, scripts), and then parse the remaining content using the heading structure as a guide. Headings serve three critical functions in this pipeline.

Headings create a semantic table of contents

When a model encounters an H2 followed by paragraphs, then another H2, it understands that these are two distinct topics at the same level. When it encounters an H3 nested under an H2, it understands that the H3 topic is a subtopic of the H2. This hierarchical understanding lets the model navigate directly to the section that answers a specific query.

Consider a page about mobile app development costs. If the headings are:

H1: How Much Does a Mobile App Cost in the UK?
  H2: What Factors Affect Mobile App Cost?
    H3: App Complexity and Features
    H3: Platform Choice (iOS, Android, or Both)
    H3: Design Requirements
  H2: Cost Breakdown by App Type
    H3: Simple App (5,000-15,000 pounds)
    H3: Medium Complexity (15,000-50,000 pounds)
    H3: Complex Platform (50,000-150,000 pounds)
  H2: How to Reduce Mobile App Development Costs
  H2: Frequently Asked Questions

An AI model can immediately navigate to the specific section needed. If a user asks "how much does a simple app cost?", the model goes directly to the H3 "Simple App (5,000-15,000 pounds)" and extracts the content beneath it. Without this structure, the model would have to scan the entire page and guess which paragraphs are relevant.

Headings enable Q&A pair extraction

When a heading is phrased as a question, the content immediately following it is naturally an answer. AI models exploit this pattern heavily. A heading like "What Factors Affect Mobile App Cost?" followed by a paragraph listing the factors creates a clean Q&A pair that the model can extract and cite directly.

This is why question-based headings are so powerful for AI citation. They pre-structure your content in exactly the format AI models need: question followed by answer. The model does not have to infer the question from the content; you have stated it explicitly.

Headings signal content importance

Heading levels communicate relative importance. An H2 topic is more important than an H3 topic within the same section. AI models use this signal when ranking which sections to cite. If a user's query matches both an H2 heading and an H3 heading, the model typically prefers the H2 because it represents a more prominent topic.

The Rules of Heading Hierarchy

These rules are not arbitrary conventions. They are semantic requirements that AI models, search engines, and screen readers all depend on.

Rule 1: One H1 per page

Every page should have exactly one H1 tag. The H1 declares the page's primary topic. It should match (or closely mirror) the page's title tag and URL slug. Multiple H1 tags tell AI models that the page covers multiple primary topics, which confuses the model about what the page is actually about.

<!-- Correct -->
<h1>How Much Does a Mobile App Cost in the UK?</h1>

<!-- Wrong: Multiple H1s -->
<h1>Mobile App Development</h1>
...
<h1>Pricing Guide</h1>

If a page seems to need multiple H1 tags, it is a signal that the page should be split into multiple pages, each with its own focused H1.

Rule 2: Never skip heading levels

Headings must follow a strict hierarchy: H1 contains H2s, H2s contain H3s, H3s contain H4s. You should never go from H2 to H4 or from H1 to H3. Skipping levels breaks the semantic relationship between sections and confuses AI models about how topics relate to each other.

<!-- Correct -->
<h1>Main Topic</h1>
  <h2>Major Section</h2>
    <h3>Subsection</h3>
    <h3>Another Subsection</h3>
  <h2>Another Major Section</h2>

<!-- Wrong: Skipping from H2 to H4 -->
<h1>Main Topic</h1>
  <h2>Major Section</h2>
    <h4>This should be an H3</h4>

Rule 3: Headings must be descriptive

Every heading should clearly communicate what the section is about. Generic headings like "Introduction," "Overview," "Details," or "More Information" tell AI models nothing about the section content. A model processing a page with an "Overview" heading cannot determine whether that section answers a specific query without reading the entire section.

Bad Heading	Better Heading
Introduction	Why Heading Structure Matters for AI
Overview	How AI Models Parse Web Content
Details	Step-by-Step Implementation in Next.js
More Information	How to Audit Your Heading Hierarchy
Conclusion	Next Steps: Run an AgentReady Scan

Rule 4: Use headings for structure, not styling

Never use a heading tag just to make text larger or bolder. If you need larger text that is not a structural heading, use CSS. Heading tags carry semantic meaning that AI models interpret. An H2 that says "Call us today!" is not a section heading; it is a call-to-action styled as a heading, and it pollutes the page's semantic structure.

Rule 5: Keep heading text concise

Headings should be short enough to serve as a table of contents entry. A heading that runs to two full sentences is too long. Aim for 5-15 words. Long headings are harder for AI models to match against user queries and harder for screen readers to announce.

Question-Based Headings: The AI Citation Multiplier

The single most effective technique for increasing AI citations is to phrase your H2 and H3 headings as questions. Here is why this works and how to implement it.

Why questions work

When a user asks an AI tool "What factors affect mobile app cost?", the model searches for content that answers this question. If your H2 heading is literally "What Factors Affect Mobile App Cost?", the model has an exact match between the user's query and your heading. The content beneath that heading is almost certainly the answer.

Compare this to a heading like "Cost Factors." The model has to infer that "Cost Factors" is likely about the same thing the user asked. This inference is usually correct, but it introduces uncertainty. The question-based heading eliminates that uncertainty entirely.

How to convert statement headings to questions

Statement Heading	Question Heading
Cost Factors	What Factors Affect Mobile App Cost?
Platform Comparison	Should I Build for iOS, Android, or Both?
Timeline Expectations	How Long Does It Take to Build a Mobile App?
Design Process	What Does the App Design Process Look Like?
Maintenance Costs	How Much Does Mobile App Maintenance Cost Per Year?

When not to use question headings

Not every heading needs to be a question. The H1 can be a question or a statement -- both work. FAQ section headings should always be questions. For procedural content (step-by-step guides), numbered step headings ("Step 1: Set Up Your Project") are clearer than questions. Use questions for informational and explanatory sections, and statements for procedural and navigational sections.

Implementation in Next.js and React

Modern component-based frameworks can make heading hierarchy tricky. Here are patterns to keep your heading structure correct.

The heading level problem in components

When you build reusable components, each component might add its own headings. If a component uses an H2 internally but is placed inside a section that already has an H2, you end up with two sibling H2s where one should be an H3. This is the most common cause of broken heading hierarchy in React applications.

// Problem: Component always renders H2
function FeatureSection({ title, description }) {
  return (
    <section>
      <h2>{title}</h2>
      <p>{description}</p>
    </section>
  );
}

// Better: Accept heading level as prop
function FeatureSection({ title, description, headingLevel = 2 }) {
  const Heading = `h${headingLevel}`;
  return (
    <section>
      <Heading>{title}</Heading>
      <p>{description}</p>
    </section>
  );
}

A reusable heading component

Create a heading component that accepts a level prop:

type HeadingProps = {
  level: 1 | 2 | 3 | 4 | 5 | 6;
  children: React.ReactNode;
  className?: string;
};

export function Heading({ level, children, className }: HeadingProps) {
  const Tag = `h${level}` as keyof JSX.IntrinsicElements;
  return <Tag className={className}>{children}</Tag>;
}

Context-based heading levels

For deeply nested component trees, you can use React context to automatically track heading depth:

import { createContext, useContext } from "react";

const HeadingLevelContext = createContext(1);

export function Section({ children }: { children: React.ReactNode }) {
  const currentLevel = useContext(HeadingLevelContext);
  return (
    <HeadingLevelContext.Provider value={Math.min(currentLevel + 1, 6)}>
      {children}
    </HeadingLevelContext.Provider>
  );
}

export function SectionHeading({ children }: { children: React.ReactNode }) {
  const level = useContext(HeadingLevelContext);
  const Tag = `h${level}` as keyof JSX.IntrinsicElements;
  return <Tag>{children}</Tag>;
}

Static HTML page pattern

For static HTML pages (like those in a /public/guides/ directory), heading hierarchy is straightforward because you control the HTML directly. Follow this template:

<article>
  <div class="answer-capsule">
    <p>Direct answer to the page's question.</p>
  </div>

  <h1>Page Title (The Question)</h1>
  <p><strong>Last updated: March 2026</strong></p>

  <p>Introduction paragraphs...</p>

  <h2>First Major Section (Question)?</h2>
  <p>Content...</p>

    <h3>Subsection of First Section</h3>
    <p>Content...</p>

    <h3>Another Subsection</h3>
    <p>Content...</p>

  <h2>Second Major Section (Question)?</h2>
  <p>Content...</p>

  <h2>Frequently Asked Questions</h2>
    <h3>Question one?</h3>
    <p>Answer...</p>
    <h3>Question two?</h3>
    <p>Answer...</p>
</article>

Common Heading Mistakes and How to Fix Them

Multiple H1 tags

This is the most common mistake. Many sites have the site name in an H1 in the header, and then another H1 for the page title. The site name should be in a span, div, or link -- not an H1. Only the page's primary content heading should be H1.

<!-- Wrong: H1 in site header -->
<header>
  <h1><a href="/">Company Name</a></h1>
</header>
<main>
  <h1>Page Title</h1>
</main>

<!-- Correct: Only content H1 -->
<header>
  <a href="/" class="text-2xl font-light">Company Name</a>
</header>
<main>
  <h1>Page Title</h1>
</main>

Using headings for visual styling

Avoid using H2 or H3 tags for call-to-action text, sidebar titles, or widget labels. These elements are not structural headings and should use other elements with CSS styling:

<!-- Wrong -->
<h3>Ready to get started?</h3>
<a href="/contact">Contact Us</a>

<!-- Correct -->
<p class="text-xl font-medium">Ready to get started?</p>
<a href="/contact">Contact Us</a>

Non-descriptive headings

Headings like "Key Benefits," "Our Approach," or "What We Offer" are vague. They do not tell AI models what the section contains. Replace them with specific, topic-focused headings.

Headings that are too long

A heading that runs to a full sentence or more is hard for AI models to match against queries. Keep headings to 5-15 words. If you need more context, put it in the opening paragraph, not the heading.

Missing headings in long content

Long sections of body text with no headings are difficult for AI models to parse. If a section covers multiple sub-topics, break it up with H3 headings even if the original content flowed as a single narrative. AI models need structural anchors to navigate content efficiently.

Heading Structure for Different Page Types

Blog posts and guides

Use H2 for major topic sections, H3 for subtopics within each section. Every H2 should ideally be phrased as a question. Include an FAQ section at the end with H3-level question headings.

Product pages

H1 is the product name. H2s cover key aspects: "What Does [Product] Do?", "How Much Does [Product] Cost?", "Who Is [Product] For?", "How Do I Get Started with [Product]?". This structure maps directly to the questions AI users ask about products.

Comparison pages

H1 is the comparison title (e.g., "Webflow vs Next.js: Which Should You Choose?"). H2s cover each comparison dimension: "How Do Webflow and Next.js Compare on Pricing?", "Which Has Better Performance?". H3s can break down specifics within each dimension.

FAQ pages

H1 is the page title. Every question is an H2 or H3 (H2 for top-level questions, H3 for follow-up questions under a category). Each question heading should match the exact phrasing a user would type into an AI tool.

Landing pages

Landing pages often sacrifice heading structure for visual design. Resist this. An H1 for the main value proposition, H2s for key selling points, and H3s for feature details gives AI models the structure they need while still supporting visual design through CSS.

Auditing Your Heading Structure

AgentReady scanner

The AgentReady scanner automatically checks heading hierarchy as part of its AI readiness audit. It flags: missing H1 tags, multiple H1 tags on the same page, skipped heading levels, and non-descriptive headings. This is the fastest way to identify heading issues across an entire site.

Browser developer tools

Open the browser console and run this JavaScript to extract all headings from the current page:

document.querySelectorAll("h1, h2, h3, h4, h5, h6").forEach(h => {
  const indent = "  ".repeat(parseInt(h.tagName[1]) - 1);
  console.log(`${indent}${h.tagName}: ${h.textContent.trim()}`);
});

This prints a hierarchical view of all headings, making it easy to spot skipped levels or duplicate H1s.

Browser extensions

The HeadingsMap extension (available for Chrome and Firefox) overlays a sidebar showing all headings on any page, with visual indicators for hierarchy issues. The WAVE accessibility tool also checks heading structure as part of its accessibility audit.

Automated testing in CI/CD

For larger sites, add heading structure validation to your build pipeline. Using Playwright or Puppeteer, you can crawl your site and validate heading hierarchy programmatically:

import { test, expect } from "@playwright/test";

test("heading hierarchy is valid", async ({ page }) => {
  await page.goto("https://yourdomain.com/your-page");

  const headings = await page.$$eval(
    "h1, h2, h3, h4, h5, h6",
    (els) => els.map((el) => ({
      level: parseInt(el.tagName[1]),
      text: el.textContent?.trim(),
    }))
  );

  // Check: exactly one H1
  const h1s = headings.filter((h) => h.level === 1);
  expect(h1s).toHaveLength(1);

  // Check: no skipped levels
  for (let i = 1; i < headings.length; i++) {
    const diff = headings[i].level - headings[i - 1].level;
    expect(diff).toBeLessThanOrEqual(1);
  }
});

Accessibility and AI: The Same Requirements

The requirements for AI comprehension and accessibility overlap almost entirely when it comes to heading structure. Both screen readers and AI models rely on heading hierarchy to navigate and understand page content.

Screen reader navigation

Screen reader users navigate pages by jumping between headings. They use keyboard shortcuts to list all headings, move to the next heading, or jump to a specific heading level. If your heading hierarchy is broken (skipped levels, multiple H1s, non-descriptive headings), screen reader users cannot navigate your content effectively.

WCAG requirements

The Web Content Accessibility Guidelines (WCAG) require that headings and labels describe the topic or purpose of the content they introduce (Success Criterion 2.4.6). They also require that information and relationships conveyed through presentation are available in a way that can be programmatically determined (Success Criterion 1.3.1). Proper heading hierarchy satisfies both criteria.

The dual benefit

By fixing your heading structure for AI comprehension, you simultaneously fix it for accessibility. This is one of the few areas where SEO, GEO (Generative Engine Optimization), and accessibility requirements are identical. Every improvement benefits all three audiences: AI models, search engines, and human users with assistive technology.

Frequently Asked Questions

Why does heading structure matter for AI comprehension?

AI models use heading structure to understand the hierarchy and relationships between topics on a page. Headings act as a table of contents that helps models navigate content, extract specific sections, and identify Q&A pairs. A page with clear H2/H3 headings phrased as questions allows AI models to jump directly to the section that answers a user's query, rather than scanning the entire page. This makes your content significantly more likely to be cited in AI-generated responses from ChatGPT, Perplexity, Claude, and Google AI Overviews.

How many H1 tags should a page have?

Every page should have exactly one H1 tag. The H1 declares the page's primary topic and should match the page's title tag and URL slug. Multiple H1 tags confuse both AI models and search engines about the page's primary focus. Common causes of duplicate H1s include using H1 for the site logo in the header. If a page seems to need multiple H1s, it should be split into multiple focused pages.

Should headings be phrased as questions?

Yes, phrasing H2 and H3 headings as questions is one of the most effective techniques for AI citation optimization. When headings are questions, the content beneath them becomes a natural answer, creating implicit Q&A pairs that AI models can extract directly. This also aligns with how users phrase queries to AI tools, increasing the chance your content matches the user's question exactly. Use questions for informational sections and statements for procedural steps.

Can I skip heading levels, such as going from H2 to H4?

No. Skipping heading levels breaks the semantic hierarchy and confuses AI models about the relationship between sections. Always follow the sequence: H1 then H2 then H3 then H4. An H3 must always be nested under an H2. An H4 must always be nested under an H3. This is also a WCAG accessibility requirement that screen readers depend on for navigation.

What makes a heading descriptive enough for AI models?

A descriptive heading contains the specific topic or question the section addresses. Headings like "Introduction," "Overview," or "Details" are not descriptive because they do not tell the AI model what the section is about. Better headings include the specific topic: "How to Configure robots.txt for AI Crawlers," "What Does an MCP Server Cost?," or "Which AI Crawlers Should I Allow?" Aim for 5-15 words that clearly communicate the section content.

How do heading structures affect accessibility?

Screen readers use heading hierarchy to navigate pages. Users can jump between headings to find relevant sections quickly. A proper heading hierarchy (H1 to H2 to H3 without skipping levels) ensures screen reader users can understand the page structure and navigate efficiently. The WCAG accessibility guidelines require headings to describe their content (2.4.6) and to be programmatically determinable (1.3.1). This overlaps perfectly with AI comprehension requirements.

How do I audit heading structure on existing pages?

Use the AgentReady scanner to automatically check heading hierarchy across your site. It flags missing H1 tags, multiple H1s, skipped heading levels, and non-descriptive headings. Browser extensions like HeadingsMap and the WAVE accessibility tool also visualise heading structure on individual pages. For automated testing, use Playwright or Puppeteer to validate heading hierarchy in your CI/CD pipeline.