Heading Structure Mistakes That Confuse Google and Screen Readers

The outline that search engines and screen readers depend on

HTML heading tags (<h1> through <h6>) create the outline of your page. They tell search engines what your content is about and how it's organized. They also tell screen readers how to navigate your page - visually impaired users jump between headings to find the content they need.

When the heading structure is wrong, both audiences suffer. Google gets confused about your page's topic. Screen reader users can't navigate. And you lose both rankings and accessibility compliance. Here are the most common mistakes.

1. Multiple H1 tags (or no H1 at all)

The H1 tag is the main heading of your page - the primary topic signal for search engines. Every page should have exactly one.

<!-- Bad: two competing H1 tags -->
<h1>Welcome to Our Site</h1>
<h1>Best Pricing Plans</h1>

<!-- Good: one clear H1 -->
<h1>Pricing Plans</h1>
<h2>Starter Plan</h2>
<h2>Pro Plan</h2>

Having multiple H1 tags dilutes the topic signal. Having no H1 at all means Google has to guess what your page is about. Both hurt your ability to rank for your target keyword.

A common cause: component libraries or CMS templates that inject extra H1 tags. Your page might have an H1 you don't know about hidden inside a header component or widget.

2. Skipped heading levels

Heading levels should follow a sequential order: H1, then H2, then H3. Jumping from H1 to H3 (skipping H2) breaks the document outline:

<!-- Bad: H1 jumps to H3 -->
<h1>SEO Guide</h1>
<h3>Meta Tags</h3>
<h3>Robots.txt</h3>

<!-- Good: proper hierarchy -->
<h1>SEO Guide</h1>
<h2>On-Page Factors</h2>
<h3>Meta Tags</h3>
<h3>Robots.txt</h3>

This matters for screen readers: users navigate by heading level, and skipped levels suggest missing content. It also matters for SEO: a logical outline helps Google understand the relationship between sections.

The usual cause? Using heading tags for styling. Developers pick H3 because it looks the right size, not because it's the right level. Use CSS for sizing and keep the heading hierarchy semantic.

3. Using headings for styling instead of structure

This is the root cause of most heading problems. Headings exist to define document structure, not to make text big and bold:

<!-- Bad: heading used for visual effect -->
<h4>Subscribe to our newsletter</h4>

<!-- Good: use a styled paragraph or span -->
<p class="text-lg font-bold">Subscribe to our newsletter</p>

If you need big bold text that isn't a content section heading, use a styled <p>, <span>, or <div>. Reserve heading tags for actual content sections.

4. Empty headings

Headings with no text content are invisible to users but visible to crawlers and screen readers. They create noise in the document outline and confuse assistive technology:

<!-- Bad: empty heading (sometimes from CMS templates) -->
<h2></h2>
<h2></h2>

<!-- Also bad: heading with only an image and no alt text -->
<h2><img src="icon.png" /></h2>

Empty headings usually come from CMS templates or dynamic components where content wasn't filled in. Audit your pages for these - they're invisible when browsing but show up immediately in a heading structure check.

5. Too many headings (or too few)

A page with 50 H2 tags is just as problematic as a page with none. Over-heading dilutes the structural signal and makes the page harder to navigate.

Too many headings: Usually happens when every small element gets a heading tag. Sidebar widgets, footer sections, and card titles don't always need to be headings.

Too few headings: Long-form content with no headings is a wall of text. Break it into scannable sections with descriptive H2 and H3 tags.

A good rule of thumb: use one H2 for each major section and H3 for subsections within those. Your heading structure should read like a table of contents.

Why this matters for accessibility

Heading structure isn't just an SEO concern - it's an accessibility requirement. WCAG 2.1 Success Criterion 1.3.1 (Info and Relationships) requires that information conveyed through presentation (like headings) also be programmatically determinable.

Screen reader users navigate pages primarily through headings. If your heading hierarchy is broken:

• They can't get an overview of the page content
• They can't jump to the section they need
• They may miss important content entirely
• Your site fails WCAG compliance

Checking your heading structure

You can inspect headings manually in browser dev tools, but it's tedious - especially across an entire site. The LintPage Heading Structure Checker shows you every heading on any page in a hierarchical view, instantly flagging:

• Missing H1 tags
• Multiple H1 tags
• Skipped heading levels
• Empty headings
• Overall structure quality

Run your important pages through it now. Heading issues are some of the easiest SEO and accessibility wins to fix - most are just a matter of changing one HTML tag.