Skip to main content
SlapMyWeb

SEO fix

How to Fix Multiple H1 Tags

Use one h1 per page so the document outline and the page's subject are unambiguous.

Difficulty
Easy
Impact
Medium
Time
30 min

Before

<h1>SlapMyWeb</h1>          <!-- logo -->
<h1>Website Audit Tool</h1>  <!-- page title -->
<h1>Features</h1>            <!-- section -->

After

<a href="/"><img src="/logo.svg" alt="SlapMyWeb"></a>
<h1>Website Audit Tool</h1>
<h2>Features</h2>
Before and after code for: How to Fix Multiple H1 Tags

Multiple h1 tags on a page leave the document without a single top-level heading, which weakens the outline screen readers navigate by and blurs what the page is about. HTML5 technically permits several, but one h1 naming the page's subject, with h2s beneath it, is the structure that works for both readers and search engines.

Why it matters

The h1 is the strongest structural signal about a page's subject. Three of them means three candidate subjects, and a screen-reader user navigating by heading level gets three tops with no hierarchy between them.

How to fix it

  1. Count them

    Check how many h1 elements the page renders. They are often introduced unintentionally: a logo wrapped in an h1 in the header, plus the real page title.
  2. Keep the one that names the page

    The h1 should be the page's own subject, not the site name. The logo belongs in a link, not a heading.
  3. Demote the rest

    Convert the others to h2 or h3 according to their place in the hierarchy. Style them however you like: the level is structure, not size.
  4. Check the resulting outline

    Read the headings in order. They should describe the page like a table of contents, with no skipped levels.

The code

Beforehtml
<h1>SlapMyWeb</h1>          <!-- logo -->
<h1>Website Audit Tool</h1>  <!-- page title -->
<h1>Features</h1>            <!-- section -->
Afterhtml
<a href="/"><img src="/logo.svg" alt="SlapMyWeb"></a>
<h1>Website Audit Tool</h1>
<h2>Features</h2>

On your platform

WordPress

Many themes wrap the site title in an h1 on every page. The setting is usually in the theme's header template or customiser.

Next.js

Check shared layout components: a heading in a layout renders on every page that uses it, alongside each page's own h1.

Sources

Fixed that one.
Now find the rest.

A free audit ranks every issue on your site by the score points it costs, and links each one straight to its guide.

Run a free audit
Free foreverNo signupLive scan progress