# Multiple H1 headings in React

> How to fix multiple h1 headings in React — with the exact fix and copy-paste code.

_Category: Search visibility · Detector `seo` · Check `h1-multiple` · Severity: info_

When several components each render their own `<h1>`, a page ends up with three or four competing “main topics”, and search engines have to guess which one describes the page. It also breaks the heading outline that screen-reader users rely on. Component libraries and AI-generated sections are the usual culprits — each card or hero brings its own `<h1>`.

## The fix for React

Give reusable section components a level prop so only the page owns the `<h1>`. Next.js is identical.

```tsx
function Section({ as: Tag = 'h2', title }: { as?: 'h1' | 'h2' | 'h3'; title: string }) {
  return <Tag>{title}</Tag>
}
// page renders <h1> once; sections default to <h2>
```

### Steps

1. Find every `<h1>` on the page
2. Keep the one that names the page; change the rest to `<h2>`/`<h3>`
3. Parameterise shared components so they do not hard-code `<h1>`

## How VibeCheck detects it

The `seo` detector flags this live in the browser and reports it to the widget's Problems list — and to your coding agent over MCP.

- **Issue string:** `Multiple <h1> headings`
- **Threshold:** more than one <h1> element

## FAQ

### Is multiple H1 actually penalised?

There is no direct penalty, but it weakens the topic signal and hurts accessibility. Keeping one `<h1>` is a clear, low-cost best practice.

### What about the HTML5 outline algorithm?

The sectioning-based outline algorithm was never implemented by browsers or assistive tech. In practice, use a single `<h1>` and ordered `<h2>`+ headings.

See the general, framework-agnostic fix: https://vibecheck.wcgw.fun/fix/multiple-h1-headings.md

---

Fix guide from VibeCheck — https://vibecheck.wcgw.fun/fix/multiple-h1-headings. Full site index for LLMs: https://vibecheck.wcgw.fun/llms.txt