H1 Tags: How Many Per Page, and How to Fix Missing or Multiple H1s

You run a site audit and the report comes back with "Multiple H1 tags" on half your pages, or "H1 tag missing or empty" on the other half. Then you search for it and find Google saying a site "can do perfectly fine with no h1 tags or with five h1 tags". Both can't be the whole story.

They aren't. Google does not penalise a page for its headings, but a page with one clear H1 is easier for people, screen readers and search engines to understand, and the warnings in your audit usually point at a template problem that affects every page at once. This guide covers what an H1 is, what Google actually says about it, how many to use, why themes and page builders add extra ones, and how to fix it on plain HTML, WordPress, Shopify and Next.js.

It is the fourth part of my SEO checklist series, after page titles, meta descriptions and canonical tags. When I audited a new 22 page blog before launch, "no H1" was on the list too, and it turned out not to be a heading problem at all. The full audit is in the SEO audit checklist.

The short answers

• How many H1 tags should a page have? One. It is a best practice, not a rule Google enforces.
• Does Google penalise multiple H1s? No. Google's John Mueller has said there is no limit, and a page ranks fine with none or several.
• Is a missing H1 bad? Not for ranking on its own, but it leaves the page without a visible main heading, and Google has one less clue for the page's topic and title link.
• Is the H1 the same as the title tag? No. The title tag is shown in search results and the browser tab. The H1 is the main heading on the page itself. They should describe the same thing, in words that can differ.
• How long should an H1 be? There is no limit. Most audit tools flag anything over 70 characters, and a heading that fits on one or two lines reads best.
• Does heading order matter? Not to Google Search. It does matter to screen reader users, so keep H2 under H1, H3 under H2, and so on.

What an H1 tag is

HTML has six heading levels, <h1> to <h6>. The H1 is the top one: the main heading of the page, usually the biggest text near the top of the content.

<h1>Trail Runner: Lightweight Running Shoes for Men</h1>

The other levels mark the sections under it, like the chapters and sub-chapters of a book:

A product page might look like this underneath:

H1  Trail Runner: Lightweight Running Shoes for Men
    H2  Features
        H3  Grip
        H3  Cushioning
    H2  Sizing
    H2  Reviews

Headings describe structure, not looks. Size and boldness come from CSS, so a heading can look small and normal text can look big. Choosing <h2> because it "looks right" is how most heading problems start.

What Google actually says about H1s

Google has been unusually direct about this. In a 2019 office-hours session, John Mueller put it like this:

You can use h1 tags as often as you want on a page. There's no limit. [...] Your site can do perfectly fine with no h1 tags or with five h1 tags.

In the same answer he pointed at the source of the confusion: some SEO tools flag it as an issue when a page has no H1 or two. Those warnings are the tools' opinion, not Google's. Google's SEO Starter Guide adds that there is "no magical, ideal amount of headings a given page should have".

Three things from Google's own documentation are worth knowing:

• Headings help Google understand the text under them. A heading tells Google what the following section is about, which helps match the section to searches. That works for every level, not only H1.
• Heading order does not matter to Search. Google's SEO Starter Guide says semantic order is fantastic for screen readers, but from Google Search's perspective it doesn't matter if headings are out of order, because the web in general is not valid HTML.
• The H1 can become your title link. When Google decides your title tag does not describe the page well, it builds the clickable headline in results from other text on the page. Its title link documentation lists the main visual title and heading elements such as <h1> among the sources, and says that when a page has several prominent headings, Google may use the first one. I covered when rewrites happen in part 1.

So the honest answer is that the number of H1s is not a ranking factor, and fixing it will not move you up the results by itself.

So why use exactly one?

Because the H1 does jobs that have nothing to do with a penalty:

• It tells people they are in the right place. Someone who clicks a result reads the H1 first. A clear one that matches what they searched for keeps them on the page.
• Screen reader users navigate by it. In WebAIM's 2024 screen reader survey, 71.6% of respondents said their first move on a long page is to navigate through its headings. A page with no H1 has no obvious starting point, and a page with three looks like three documents. MDN's advice is to "prefer using only one <h1> per page and nest headings without skipping levels."
• It protects your title link. If Google rewrites your title, it may use the first heading on the page. When the first H1 is your logo, that can be your site name instead of the page's subject.
• A clean audit is easier to read. If every page shows "Multiple H1 tags" because of the logo, real problems on individual pages get lost among hundreds of identical warnings.

Other search engines and the AI tools that read pages lean on structure even more than Google does. One H1 and sensible H2s cost nothing and make the page easy to read for all of them.

H1 vs title tag

The title tag lives in the <head> and shows in search results and the browser tab. The H1 lives in the <body> and shows on the page. Part 1 covers the difference in detail, including how Google builds the title link from both.

Should they be the same? Audit tools disagree with themselves here. Semrush shows a "Duplicate content in h1 and title" warning when the two match, because a page can look over-optimised, while plenty of SEO guides tell you to keep them identical. Google does neither: it only cares that they describe the same thing. A common pattern is a title written for the results page and an H1 written for the reader:

<title>Trail Runner Shoes for Men - Light Trail Running | Example</title>
<h1>Trail Runner: Lightweight Running Shoes for Men</h1>

Both promise the same thing. What you want to avoid is a title that says one thing and an H1 that says another, like a title about pricing over a page whose H1 is a feature list.

How to write a good H1

• Say what the page is. "Trail Runner: Lightweight Running Shoes for Men" beats "Welcome" or "Built for the trail".
• Match the search. If people search "how many H1 tags per page", a page answering that should say so in its H1, not bury it under a clever headline.
• Put the main term early. Readers scan the first few words.
• Make it unique. Two pages with the same H1 look like the same page, to readers and to search engines.
• Use text, not an image of text. If the heading must be an image, give it an alt that says what the heading says.
• Keep it to one or two lines. Roughly 20 to 70 characters covers most good headings.
• Do not make the logo the H1 on inner pages. "Example Store" on every page tells nobody what the page is about.

Headings under the H1

The H1 is only the start of the outline. A few rules keep the rest of it useful:

• Use H2 for main sections and H3 for parts of them. Do not jump from H1 to H4 because H4 has the font size you want. Screen readers announce the level, and a jump makes users think they missed a section.
• Use headings for headings only. Promo text, "Free shipping over $50", footer column labels and sidebar titles like "Recent posts" are usually styled text, not part of the page's outline.
• Do not hide headings. A heading hidden with CSS is a heading visitors never see. Search engines give hidden text little weight, and a heading stuffed with keywords that only exists for crawlers is exactly the kind of thing they distrust.

Why audits flag your H1s: the usual causes

An H1 warning is almost never about one page. It comes from a template, so the same fix clears the whole site. Tools word it differently: Ahrefs reports "H1 tag missing or empty", Semrush has "Multiple H1 tags", and Screaming Frog's H1 tab filters for missing, duplicate, multiple and over 70 characters. These are the usual causes:

The 404 case is the one from my own audit. Two articles linked to category pages that no longer existed, and the crawler followed the links. Each of those error pages produced "no H1" along with a duplicate title, a duplicate description and a missing canonical. Fixing the broken links cleared all of them at once, so read an audit for causes before fixing lines one at a time.

How to see every H1 on a page

In the browser. Right-click the page and choose Inspect, then press Ctrl+F (Cmd+F on a Mac) in the Elements panel and search for <h1. This shows the page after JavaScript has run.

In the source. Press Ctrl+U (Cmd+Option+U on a Mac) and search for <h1 again. This is the HTML the server sent. If an H1 shows up in Inspect but not here, it is added by JavaScript, and audit tools that do not run scripts will report it missing.

In the console. Open the Console tab and paste this to print the full heading outline, indented by level:

document.querySelectorAll('h1, h2, h3, h4, h5, h6').forEach((h) => console.log(`${'    '.repeat(h.tagName[1] - 1)}${h.tagName} ${h.textContent.trim()}`))

If the first lines show your logo or site name as an H1 above the page's real heading, you have found the most common cause in one go.

How to fix H1 tags

Plain HTML

Keep the site name in the header as a link, and give the page its own H1 at the top of the main content:

<header>
    <a href="/" class="logo"><img src="/logo.svg" alt="Example Store"></a>
</header>
<main>
    <h1>Trail Runner: Lightweight Running Shoes for Men</h1>
    <h2>Features</h2>
</main>

On the home page, where there is no other heading, the H1 can describe the site: "Example Store: Running Shoes and Trail Gear".

WordPress

The post or page title is normally the H1, printed by the theme. Most WordPress H1 problems come from three places:

• Heading 1 inside the post. If you start the content with a Heading 1 block, the page has two H1s: the theme's title and yours. Start the content with Heading 2.
• Block themes. Both the Site Title and the Post Title blocks can render as H1. Go to Appearance, then Editor, and open the Header template part. Select the Site Title block and, in recent block themes, set its level to paragraph instead of H1. While you are there, open the Single Posts and Pages templates and check that the Title block is set to H1.
• Page builders. In Elementor, Divi and similar builders, open the global header in the theme builder, select the site logo or site title widget, and change its HTML Tag from H1 to div or p. Check the heading widget on landing pages too: in Elementor its default is H2, so a page built entirely in Elementor often has no H1.

Classic themes hardcode the tag in header.php. Use a child theme so an update does not undo the change, then keep the H1 for the home page only:

<?php if ( is_front_page() ) : ?>
    <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<?php else : ?>
    <p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></p>
<?php endif; ?>

Add a line of CSS if the new tag looks different from the old one. Many themes, such as GeneratePress and Astra, already do this on their own, so check the theme's settings before editing files.

Shopify

Shopify's own themes already handle the main cases. In Dawn and the themes built on it, the logo is wrapped in an H1 on the home page only, and product, collection and article titles are H1s on their own pages:

{%- if request.page_type == 'index' -%}
    <h1 class="header__heading">
{%- endif -%}

So inner pages are usually fine. The problems come from changes, and mostly on the home page: a text banner section also set to H1 next to the logo, a logo H1 that is only an image with no description of the store, or a third-party theme that wraps the logo in an H1 on every page. Search header.liquid for <h1, and check the heading level setting in the home page sections you added.

Next.js (App Router)

Next.js has no setting for headings. The H1 is whatever your components render, so two rules cover most of it:

• Keep the H1 out of the layout. A layout wraps every page under it, so an <h1> with the site name in app/layout.js adds an extra H1 to the whole site. Use a link or a <p> there.
• Render the H1 on the server. Server Components, and Client Components on their first render, are in the HTML the server sends. A heading that only appears after a useEffect fetch is not.

// app/blog/[slug]/page.js
const Page = async ({ params }) => {
    const { slug } = await params
    const article = await getArticle(slug)

    return (
        <article>
            <h1>{article.title}</h1>
            {/* the rest of the article */}
        </article>
    )
}

export default Page

Blogs that render Markdown have a trap of their own. If the article body starts with a # heading and the page also prints the stored title as an <h1>, every article has two. This blog solves it by checking the rendered HTML: the article's own heading is the H1, and the stored title is printed only when the body has none.

const { html } = renderMarkdown(article.content)
const hasHeading = /<h1[ >]/.test(html)

return (
    <>
        {!hasHeading && <h1>{article.title}</h1>}
        <div dangerouslySetInnerHTML={{ __html: html }} />
    </>
)

It checks the rendered HTML rather than the Markdown, so a # inside a code block is not mistaken for a heading.

A single page React app, built with Vite or Create React App, sends an almost empty HTML file and builds everything in the browser. Google runs the JavaScript and will usually see the heading, but many audit tools and other crawlers do not. If that matters for the pages you want found, prerender them or move them to a framework that renders on the server.

Check every H1 on your site

This script works on any site with a sitemap. It needs Node.js 18 or later, fetches pages one at a time, and lists pages with no H1, more than one, an empty one, a long one, the same H1 as another page, or a jump in heading levels:

// check-headings.mjs
// Usage: node check-headings.mjs https://example.com
const site = process.argv[2]
const sitemap = await (await fetch(`${site}/sitemap.xml`)).text()
const urls = [...sitemap.matchAll(/<loc>(.*?)<\/loc>/g)].map((m) => m[1].trim().replace(/&amp;/g, '&'))

const decode = (text) =>
    text.replace(/&nbsp;/g, ' ').replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/&amp;/g, '&')

// The text a reader or a screen reader gets: the words, plus the alt of any image.
const textOf = (inner) => {
    const alts = [...inner.matchAll(/<img[^>]*\salt=(["'])(.*?)\1/gi)].map((m) => m[2])
    return decode([inner.replace(/<[^>]+>/g, ' '), ...alts].join(' ')).replace(/\s+/g, ' ').trim()
}

const seen = new Map()

for (const url of urls) {
    const res = await fetch(url)
    if (res.status !== 200) {
        console.log(`${url}\n    answers ${res.status} but is in the sitemap`)
        continue
    }

    // Scripts and templates can contain "<h1" that is never shown.
    const html = (await res.text()).replace(/<(script|style|template)\b[\s\S]*?<\/\1>/gi, '')
    const h1s = [...html.matchAll(/<h1\b[^>]*>([\s\S]*?)<\/h1>/gi)].map((m) => textOf(m[1]))
    const levels = [...html.matchAll(/<h([1-6])\b/gi)].map((m) => Number(m[1]))
    const problems = []

    if (h1s.length === 0) problems.push('no H1 in the HTML')
    if (h1s.length > 1) problems.push(`${h1s.length} H1s: ${h1s.map((h) => `"${h}"`).join(', ')}`)
    if (h1s.some((h) => !h)) problems.push('an H1 with no text')
    if (h1s[0]?.length > 70) problems.push(`H1 is ${h1s[0].length} characters`)

    const jump = levels.findIndex((level, i) => i > 0 && level > levels[i - 1] + 1)
    if (jump > 0) problems.push(`jumps from H${levels[jump - 1]} to H${levels[jump]} (fine for Google, harder for screen readers)`)

    if (h1s[0]) {
        const key = h1s[0].toLowerCase()
        if (seen.has(key)) problems.push(`same H1 as ${seen.get(key)}`)
        else seen.set(key, url)
    }

    if (problems.length) console.log(`${url}\n    ${problems.join('\n    ')}`)
}

It reads the HTML the server sends, like most audit tools, so a heading added later by JavaScript shows up as missing. That is deliberate: Google renders JavaScript and will usually find it, but many other crawlers will not.

I ran it on this site before publishing. It found three tool pages that jump from H1 to H3, two older articles with H1s over 70 characters, and a tag page with the same H1 as the category of the same name. None of them is a ranking problem, and all of them are worth a few minutes. It follows the same pattern as the checkers in part 1, part 2 and part 3.

Questions people ask

What is an H1 tag in SEO? The main heading of a page, written as <h1> in HTML. It tells readers and search engines what the page is about, and Google may use it to build the title shown in results.

How many H1 tags per page is best for SEO? One. Google does not penalise more, but one H1 gives the page a single, clear topic for readers, screen readers and search engines.

Is a missing H1 bad for SEO? It will not get a page penalised, and Google can work out the topic from the rest of the page. It does leave visitors without a clear main heading and gives Google one less signal, so add one.

Are multiple H1 tags bad for accessibility? They make a page harder to follow. Screen reader users often jump to the first H1 to find the main content, and several H1s make it unclear which one that is. HTML once planned to treat H1s inside sections as lower levels, but browsers and screen readers never did, and the idea has been dropped from the standard.

Can the logo be the H1? On the home page it can, if the site name is the best description of that page. On every other page, the H1 should be the page's own heading, and the logo should be a plain link.

How long should an H1 be? There is no limit. Aim for one or two lines on a phone, roughly 20 to 70 characters. Most audit tools warn above 70.

How do I fix multiple H1 tags on Blogger? Many Blogger templates show the blog's name as an H1 on every page, next to the post title. Go to Theme, then Customise, then Edit HTML, search for <h1, and change the one around the blog name to a <div> or <p> on post pages. Back up the theme first.

What is the difference between <h1> and <header>? <header> is a container for the top part of a page or section, often holding the logo and menu. <h1> is a heading. A <header> can contain an H1, but it is not one.

Is the H1 a ranking factor? Not in the sense that having one moves a page up. Headings help Google understand what each part of a page is about, which helps it match the page to the right searches.

When should I use H1, H2, H3, H4, H5 and H6? H1 once, for the page. H2 for each main section, H3 for parts of a section, and H4 to H6 only when a long document needs deeper levels. Do not skip a level to get a different font size.

Next in the checklist

This is part 4 of the SEO checklist. Part 1 covers page titles, part 2 covers meta descriptions, part 3 covers canonical tags, and the full list is in the SEO audit checklist. Next come images: what alt text is for, how to write it, and which images should have none.

If your audit lists heading issues across dozens of pages, paste the list somewhere you can mark each one as fixed. txtnode opens a notepad at any URL you type, without an account, and Files keeps notes in folders when you sign in.