# Multiple H1 headings in Vue

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

Use a dynamic component so the heading level is a prop, defaulting to h2.

```vue
<template>
  <component :is="as">{{ title }}</component>
</template>

<script setup lang="ts">
defineProps<{ as?: 'h1' | 'h2' | 'h3'; title: string }>()
</script>
```

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