Heading hierarchy is the single most broken thing on SaaS marketing sites. We see it on nearly every audit: multiple H1s on a page, H2s used as visual styling rather than structure, H4s that follow H2s with H3 skipped entirely, and entire sites built in tools that quietly make correct hierarchy harder.
[Insert diagram: a side-by-side of broken vs correct heading hierarchy — left side showing a page with three H1s, an H4 following an H2 with H3 skipped; right side showing one H1, nested H2s and H3s in a clean tree]
The cost is real and it compounds. Search engines and AI search models (ChatGPT, Claude, Perplexity, AI Overviews, Gemini) read heading hierarchy to understand what your page is about and what sections cover what. Accessibility tools navigate by it. Internal site search uses it. A broken hierarchy is one of the highest-leverage technical SEO problems on most marketing sites — and one of the cheapest to fix.
Here's the rule, the four mistakes most teams make, the platform-specific gotcha that bites Framer users in particular, and how to audit your entire site in an afternoon.
What correct heading hierarchy actually is
The rule is short. Read it once and you'll know more than 80% of marketing teams.
One H1 per page. That H1 names the page. It is the single most important text element on the page from a semantic standpoint. The H1 is usually the page title (the article title on a blog post, the hero headline on a landing page, the section title on a category page).
H2s for major sections within the page. Each H2 introduces a top-level section. A page can have as many H2s as it has major sections — five, ten, twenty is fine. What you can't have is two H1s.
H3s for sub-sections within an H2. When an H2 covers a major topic and that topic has named sub-parts, each sub-part is an H3.
H4, H5, H6 for further nesting — rarely needed in marketing content. Blog posts almost never need to go past H3. The exception is technical documentation with deep nesting.
Don't skip levels. An H2 is followed by another H2 or by an H3 — never by an H4 with no H3 in between. The nesting is strict.
That's it. The whole rule fits in five lines. The fact that most SaaS sites get this wrong despite the rule being this simple is a function of how marketing site components get built — which is what we'll cover next.
The four mistakes we see on nearly every SaaS audit
1. Multiple H1s per page
The most common. A page has three "big" headlines (hero headline, mid-page section break, lower-page CTA section) and the developer used <h1> for all three because they needed to be large.
The fix is to use H1 for the page-defining headline only, and use H2 (with custom styling to make it the visual size you need) for the others. Visual size is a CSS problem. Semantic structure is an HTML problem. Solve them separately.
2. Every section is an H2 — no nesting
A blog post with twelve H2s and zero H3s. Each section is treated as a top-level section regardless of whether it's actually a major topic or a sub-point of the previous major topic.
The fix is to read the page like an outline. If a section is "How to do X" and the next section is "Step 1 of how to do X," that next section is an H3, not an H2. The outline rule: if it would be indented as a sub-bullet in a Word document, it's an H3.
3. Skipped heading levels (H2 → H4)
A page has H2s for major sections. Inside an H2, there's an H4 for a sub-point. No H3 in between. This usually happens because the H4 has a smaller visual size than H3 in the design system, and the developer picked H4 because they wanted that size.
The fix is to use H3 with custom CSS to make it whatever size the design needs. Visual size, again, is a CSS problem.
4. Decorative H1s baked into shared components
The most insidious version of mistake #1. A site has a global navigation component that uses <h1> for the brand wordmark. The wordmark is small and styled — visually it's not "a heading" — but semantically it's H1 because that's what the dev used.
Now every page on the site has at least two H1s: the brand wordmark in the nav and the actual page H1. The team never notices because the visual layout looks fine. Search engines see two H1s and don't know which one is the page's actual heading.
Audit your shared header, footer, sidebar, and nav components. If any of them use H1 or H2 for decorative styling, fix them.
The Framer problem (and why it's worth calling out)
Framer is a great visual website builder. It has one specific failure mode around heading hierarchy that affects SEO meaningfully.
Framer's text components default to specific semantic levels based on the visual style preset you pick. If you pick "Headline 1" style for visual reasons, Framer ships an <h1> element. If you pick "Headline 2," it ships an <h2>. The visual chooser and the semantic level are coupled by default.
The result: designers building Framer pages pick the visual styles they want without realizing they're also choosing the semantic structure. A hero with a giant headline at the top gets H1 (correct). A mid-page section break styled with the same "big text" preset also gets H1 (broken). The page now has two H1s and the designer has no idea.
Framer does let you override the semantic level independently of the visual style — you can pick "Headline 1" visual and ship <h2> semantic. But that override is buried in a property panel that designers rarely touch. The default behavior produces broken hierarchy.
If you're on Framer: audit every page for multiple H1s. The fix is the override pattern (set the semantic tag manually for every text element that isn't actually the page's H1). Set it as a team convention so anyone publishing a new page knows to check.
The same advice applies to other visual builders to varying degrees (Webflow handles this slightly better; raw code is fully under your control). We covered the broader platform tradeoffs in our best website builder for SaaS marketing sites post.
What broken hierarchy costs you in SEO and AI search
The cost shows up in three places.
Traditional SEO rankings. Google uses heading hierarchy as one signal among many to understand what a page is about and which sections cover which topics. A broken hierarchy doesn't tank rankings on its own, but it makes the page harder to rank for long-tail keywords because Google can't cleanly map sections to sub-topics. Pages with correct hierarchy tend to capture more featured-snippet positions and more "people also ask" appearances.
AI search citations. ChatGPT, Claude, Perplexity, and Google's AI Overviews all rely on extracting structured content from pages they crawl. A page with one H1 and clear H2/H3 nesting is much easier for an LLM to parse and cite. A page with three H1s and no H3 nesting is harder — the model doesn't know which heading represents the page's primary topic or which sections cover which sub-topics. The page becomes citation-resistant.
Accessibility. Screen readers navigate by heading level. A user with a screen reader hits a key combo to jump to the next H2, then the next H3 under it. Broken hierarchy makes that navigation pattern fail. The page becomes harder to use for anyone relying on assistive tech. This isn't a hypothetical edge case — accessibility compliance increasingly matters for B2B SaaS (especially when selling into government, healthcare, education).
The combined cost is meaningful for SEO-driven SaaS. The fix is cheap. The asymmetry is the point.
How to audit your site this afternoon
The audit is fast.
Step 1. Install a Chrome extension like "HeadingsMap" or "Web Developer Toolbar." Both surface the heading structure of a page in one click.
Step 2. Run it on your homepage. Look at the heading tree. Count the H1s. There should be one. Note any skipped levels.
Step 3. Run it on your pricing page, features page, about page, and three random blog posts.
Step 4. Make a list of every place hierarchy is broken. Group the fixes by the mistake type from the section above. Some will be in shared components (fix once, helps every page). Some will be page-specific (fix per page).
Step 5. Have a developer (or your dev partner) work through the list. Most fixes are one-line HTML/component changes. The whole site usually fixes in an afternoon, two at most.
Step 6. Re-audit. Confirm every page now has exactly one H1 with sensible nesting underneath.
You don't need to wait for an AI search expert or an SEO consultant to do this. It's a checklist any developer can run.
This is one of eight tactics we cover in our broader SaaS Marketing Tips: 8 Easy Wins Most Founders Skip post. It earned its own deep dive because the keyword opportunity is significant and the fix is genuinely afternoon-scale.
[Insert screenshot: HeadingsMap Chrome extension output for the homepage of a major SaaS site, showing the heading tree with H1s/H2s/H3s color-coded]
Frequently asked questions
"We have a blog header that uses H2 for the site name across every blog post. Is that broken?"
Yes. The site name in the blog header is decorative; the article title on the page is the actual H1 of the blog post. Currently you have a blog template where every article has an extra H2 above the title that doesn't represent a section of the article. The fix is to make the site name a <div> or <p> with display styling — not a semantic heading. Once you fix it in the template, every blog post on the site gets corrected at once.
"Does it matter if I use heading tags that don't appear visually as headings (e.g., for hidden semantic structure)?"
Yes, but be careful. Visually hidden headings (using .sr-only CSS) can be a legitimate accessibility pattern when you need to provide a semantic landmark that doesn't fit the visual design. But abusing hidden headings to stuff keywords or game search engines will get penalized. The rule of thumb: every semantic heading should describe a real section of the page, whether or not that heading is visually displayed.
"We use AI to generate blog content. The AI sometimes outputs H1s in the middle of an article. How do we handle that?"
You strip them in editorial review. AI tools (especially when generating Markdown) often produce H1s mid-document because Markdown's # syntax maps to H1 by default. Your editorial process should include a step that demotes every H1 in AI-generated content to H2 (and adjusts deeper nesting accordingly) before publishing. This is a standard line item in any content workflow that uses AI drafting — it should not be a manual one-off.
"How does heading hierarchy interact with structured data / schema markup?"
They're complementary, not redundant. Schema markup (JSON-LD) tells search engines specific facts about the page: this is an Article, here's the author, here's the publish date, here's the headline. Heading hierarchy tells search engines about the page's content structure: this is the H1, these are the major sections, these are the sub-sections. Both matter and both are read. Don't skip one for the other.
"Are H1s through H6 the only options? What about ARIA heading levels?"
For the vast majority of marketing site content, native HTML headings (H1–H6) are the right answer. ARIA roles (role="heading" aria-level="N") exist for cases where you can't use native HTML for some reason — usually in JavaScript-rendered apps with constrained markup. If you're writing a Next.js, Webflow, Framer, or custom marketing site, use native headings. ARIA is for edge cases that don't apply to standard marketing content.
"Will fixing this actually move our rankings?"
Often, yes — but usually not immediately. Heading hierarchy is one of many signals; fixing it doesn't catapult you to position 1. What it does is unlock the page's full ranking potential for the topics it actually covers. Pages we've fixed for clients typically see 10–30% organic traffic lift within 60–90 days as Google re-crawls and re-evaluates the content structure. The compounding effect is biggest on blog content where you have a lot of pages — each one gets a small lift and they add up.
