More than one H1 heading
What it is
The page contains two or more <h1> elements. HTML allows this, but the common practice, which MDN recommends , is one H1 that names the page, with H2 to H6 for the sections under it. Extra H1s usually come from a logo or site name marked up as H1 in the header, or from a page builder that gives every large heading the H1 tag.
Why it matters
Google says the number and order of headings do not matter for Search, so the cost is clarity rather than ranking. Screen reader users jump between headings, and several H1s make it harder to tell where the main topic starts. Asky’s length check reads the first H1 with text and the title comparison the first H1 of all, so if a site name in the header comes first, the real heading is never checked.
How Asky checks it
Asky counts the <h1> elements anywhere in the page’s raw HTML, including headers, footers and elements hidden with CSS; headings added by JavaScript are not seen. Two or more are reported, whatever their text, and the finding lists each one. The length check reads the first H1 that has text, the same-as-title check reads the first H1, and the image alt text check applies only when no H1 has text. An empty H1 next to one with text is not reported as H1 missing or empty.
Reported as a warning with medium severity.
How to fix it
- Read the H1s listed in the finding and decide which one names the page.
- Change the others to H2 if they head a section, or to a non-heading element if they do not: a logo becomes a link around the image, a tagline a
<p>. In Webflow, change the element’s tag in its settings; in WordPress, pick the tag on the heading block or in the page builder. - If the extra H1 is in the header or footer, change it in the template, which fixes every page at once.
- Keep the remaining H1 as the first heading on the page, or it is reported as not the first heading.
- To leave it as it is: if the page deliberately uses several H1s, for example a one-page site with equal sections, and the first H1 names the page, mark the issue resolved.
Example
On https://example.com/blog/pricing-guide the theme wraps the logo in an H1:
<!-- Before -->
<header><h1><a href="/">Example Co</a></h1></header>
<main><h1>How to price a SaaS product</h1></main>
<!-- After -->
<header><a href="/" class="logo">Example Co</a></header>
<main><h1>How to price a SaaS product</h1></main>