Web visitors skim before they read. Heading structure is how a skimmer navigates a page — they read only the headings to decide whether any section is worth their time. Headings that skip levels (h1 → h3 with no h2) break screen reader navigation and signal structural disorder. Vague headings — "Features", "Details", "Section 3" — provide no information to the skimmer, so every section looks equally irrelevant and nothing gets read. Descriptive headings form a readable summary of the page when taken in isolation: a visitor reading only the headings should be able to tell what the page is about. This is a prerequisite for accessibility, SEO, and basic readability.
High because vague or level-skipping headings prevent visitors from using heading structure to navigate and skim — a core reading pattern on the web that determines whether any below-the-fold content gets read.
Audit the heading sequence on the home page and marketing pages. Open browser DevTools and use the Accessibility tree or run document.querySelectorAll('h1,h2,h3') to see the heading order in isolation. Look for: level skips (h1 → h3), vague labels ("Features", "More", "Details"), and major page sections with no heading at all.
Rewrites for common vague headings:
"Features" → "What you can do with [Product]"
"Details" → "How the pricing works"
"More" → "What else is included"
"Section 3" → "Who this is built for"
In a Next.js App Router project, headings are typically in page components (app/page.tsx) or section components (components/FeaturesSection.tsx, components/PricingSection.tsx). Update the heading strings directly. If content is MDX-driven, edit the frontmatter or MDX body. Ensure every major page section has an <h2>, and sub-sections within it use <h3>.
ID: marketing-content-quality.content-structure.heading-hierarchy-supports-skimming
Severity: high
What to look for: Count all relevant instances and enumerate each. Read the heading structure of the home page and key marketing pages (pricing, about, features). Look at whether the sequence of headings (<h1>, <h2>, <h3>) forms a narrative summary of the page when read in isolation — as if someone read only the headings in sequence. Check whether section headings are descriptive (e.g., "How it works", "Who this is for", "What's included") versus vague (e.g., "Features", "Section", "Details") or non-existent (sections separated only by visual spacing with no heading).
Pass criteria: Heading hierarchy follows a logical h1 → h2 → h3 sequence without level skips on marketing pages, and the headings are descriptive enough that reading them in sequence gives a useful summary of the page content. At least 1 implementation must be verified.
Fail criteria: Headings skip levels (e.g., h1 followed immediately by h3), major sections have no headings at all, or headings are so vague ("Features", "More") that they provide no information about section content.
Skip (N/A) when: Never — heading structure applies to all pages with content.
Detail on fail: Describe the specific issue. Example: "Pricing page jumps from <h2> 'Pricing' directly to <h4> labels — no <h3> in between" or "Features section uses no headings — 6 feature cards with visual separation only, no labeled sections"
Remediation: Visitors skim before they read. Your heading structure is your navigation aid — if headings are vague or missing, visitors can't find the section relevant to them.
Each major page section should have an <h2> that tells the visitor what they'll learn from reading that section. Sub-sections within a section use <h3>.
Vague-to-specific rewrites:
For SEO-specific heading analysis, the SEO Fundamentals Audit covers heading hierarchy in the context of search engine optimization.
Review the configuration in src/ or app/ directory for implementation patterns.