skewcheck

All 30 checks Missing or multiple H1

Missing or multiple H1

Updated

A page should have one <h1> that says what the page is about, and a launched page with none, or with several competing for the job, gives readers, screen readers and search engines no clear starting point.

Fails: No <h1>, or two of them
<h1>Acme</h1>
<section>
  <h1>Our services</h1>
</section>
Fix: One <h1>, sections below it
<h1>Plumbing and heating in Leeds</h1>
<section>
  <h2>Our services</h2>
</section>

Why one main heading

The <h1> is the title of the page's content, as opposed to the <title> in the browser tab. Screen reader users often jump straight to the main heading to learn what a page is about, and the heading outline below it is how they move around. Search engines read it as one of the clearest statements of the topic. When the heading is missing, a visually large line of text styled with a <div> or a <span> tells sighted visitors what the page is but says nothing to software.

Multiple <h1> elements are allowed by the HTML specification, so this is a softer problem than a missing one. In practice they often come from a template that wraps the logo in an <h1> on every page, or a page builder that makes each hero block an <h1>. The outcome is a page where nothing is clearly the main heading, and the outline is harder to follow.

How Skewcheck detects it

Skewcheck counts the <h1> elements in the HTML the server sends. Exactly one passes. None fails with medium severity and removes 5 points from the score. Two or more is a low-severity warning that removes 2 points. The count is of the markup, so an <h1> hidden with CSS still counts, and a heading that a script adds after load is not seen.

Skewcheck does not judge the wording. A single <h1> that says Welcome passes, even though a heading that names what the page offers would do more good. It also does not check that the heading levels below it are in order.

Count the headings on the live page
curl -s https://example.com | grep -oi '<h1[ >]' | wc -l

Fixing it in your builder

Pick the line that best states what the page is for, usually the hero headline, and make that the <h1>. Turn other former headings into <h2> or <h3>. In Webflow, each heading element has a tag setting in its settings panel, so change the tag rather than the styling, since the look is controlled by the class. Framer text layers have a similar setting for the tag they output. In WordPress, the block editor's Heading block has a level control, and the theme usually prints the post title as the <h1>, so a second <h1> typed into the content duplicates it.

When a logo is wrapped in an <h1> on every page, change it to a plain link or a <div> except on the home page, where some sites keep it. After publishing, re-check, and look at a couple of other page types, because templates differ.

Before and after

Before
<div class="hero-title">Plumbing and heating in Leeds</div>
After
<h1 class="hero-title">Plumbing and heating in Leeds</h1>

Check your page

Run all 30 checks on any URL. Free, no account.