# No H1 heading in Vanilla JS

> How to fix no h1 heading in Vanilla JS — with the exact fix and copy-paste code.

_Category: Search visibility · Detector `seo` · Check `h1-missing` · Severity: warning_

The `<h1>` is the strongest on-page signal of what a page is about, for both search engines and screen-reader users navigating by heading. AI-built pages often style a big `<div>` or `<p>` to look like a heading, so it looks right but carries zero semantic weight. Others start the document at `<h2>` because the `<h1>` “felt too big”.

## The fix for Vanilla JS

Ensure the page has one real `<h1>` element for its main topic.

```html
<h1>Pricing</h1>
```

### Steps

1. Identify the page’s single main topic
2. Mark it up as one `<h1>` (restyle with CSS, not by changing the tag)
3. Ensure sub-sections use `<h2>`/`<h3>` in order

## 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:** `No <h1> heading`
- **Threshold:** zero <h1> elements on the page

## FAQ

### Can I have more than one H1?

HTML5 technically allows it, but for SEO clarity ship exactly one `<h1>` per page and use `<h2>`+ for the rest. Multiple `<h1>`s dilute the topic signal.

### Does the H1 have to be the biggest text?

No. Semantics and styling are separate — style your `<h1>` however you like. What matters is that the tag is an `<h1>`.

### Should the H1 match the <title>?

They should be closely related but need not be identical. The `<title>` is tuned for search results; the `<h1>` is the on-page headline.

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

---

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