Heading Hierarchy

TL;DR — LLMs parse headings to build a topic map of a page before reading body text. A proper H1 → H2 → H3 hierarchy lets the model identify which section answers a specific query and cite it precisely.

Why Heading Hierarchy Matters for AI Engines

When an LLM processes a web page, headings serve as a structural index before body text is read. The model builds a topic map: "This page has a section on X, a sub-section on Y, and a sub-section on Z." This map determines which section the model reads most carefully when matching against a user query.

A flat heading structure — all <h2> with no <h3> sub-sections — tells the model the page has no sub-topics. Every section is treated as equally relevant, which means no section gets precision citation treatment. A proper hierarchy (H2 for sections, H3 for sub-points) lets the model resolve queries at the sub-topic level.

This is not a theoretical concern. AI engines generating answers to specific questions — "how do I add FAQ schema to a Next.js page?" — need to identify the exact paragraph that answers the question, not just the article title. Heading hierarchy is the navigation system that makes that possible.

How to Implement

• One <h1> per page — the page title
• <h2> for major sections: "What is X", "Why it matters", "How to implement", "Common mistakes"
• <h3> for sub-points within a section
• Never skip levels — no <h1> → <h3> without an <h2> in between
• Headings should contain the topic keywords, not generic labels like "More information"

Common Mistakes

• Using heading tags for visual styling — <h3> to make text bold is not structural; use CSS classes instead
• More than one <h1> per page — signals to AI engines that the page has no primary topic
• All content under a single <h2> section — gives the model no sub-topic structure to navigate

Sources

• MDN — Heading Elements
• Google — How to create helpful, reliable, people-first content