# Multiple H1 headings in Svelte

> How to fix multiple h1 headings in Svelte — 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 Svelte

Use `svelte:element` so the tag is data-driven, defaulting to h2.

```svelte
<script>
  export let as = 'h2'
  export let title
</script>

<svelte:element this={as}>{title}</svelte:element>
```

### 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