No H1 heading
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”.
Framework fixes
Symptoms
How VibeCheck catches it
In your widget · Problems
No <h1> heading
To your coding agent · MCP
agent › get_detected_issues
→ { detector: "seo", issue: "No <h1> heading", threshold: "zero <h1> elements on the page" }
The same string in your widget and in your agent’s context — no screenshot, no copy-paste.
Root causes
The fix
Add exactly one <h1> per page that describes its main topic, and style it however you like — semantics and visual size are independent. Keep the rest of the outline logical (<h2> for sections, <h3> for subsections).
- Identify the page’s single main topic
- Mark it up as one
<h1>(restyle with CSS, not by changing the tag) - Ensure sub-sections use
<h2>/<h3>in order
<!-- fake heading -->
<div class="text-4xl font-bold">Pricing</div>
<!-- real heading -->
<h1 class="text-4xl font-bold">Pricing</h1>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.