How to Fix Multiple H1 Tags on a Page
Your page has more than one h1 element. Google says multiple H1s won't directly hurt your rankings, but one clear H1 per page is still best practice: it states the page's primary topic for search engines, AI answer engines, and screen-reader users. This guide shows you how to find the extra H1s and fix them across common platforms.
What this means
The multiple_h1 warning means our crawler found two or more <h1> elements in your page's HTML. The H1 is the top-level heading, traditionally the single most important on-page label describing what the whole page is about.
Extra H1s usually aren't something you typed on purpose. They come from templates: a theme wraps the site logo or site title in an <h1>, and your post or page title is also an <h1>. Page builders (sliders, hero blocks, CTA sections) frequently default their large display text to H1 as well. The result is a page with three or four H1s where only one describes the actual content.
This is different from a "missing H1", where you have zero. Here you have too many. It's flagged as a warning rather than an error because it rarely causes a ranking penalty on its own, but it's a reliable symptom that your heading structure is muddled, which is worth cleaning up.
Why it matters
Google has been explicit that multiple H1s are fine and won't directly hurt rankings. John Mueller has said a page will "rank perfectly fine with no H1 tags or with five H1 tags." The value of fixing this is clarity and hygiene, not dodging a penalty.
Why it still matters:
- One clear topic signal. Search engines use headings to understand page structure. A single H1 states your primary topic without ambiguity. When four elements all claim to be the most important heading, you dilute that signal and make the crawler work harder to infer what the page is about.
- AI answer engines lean on structure. ChatGPT, Perplexity, and Google AI Overviews parse your heading hierarchy to extract and attribute answers. A clean H1, H2, H3 outline makes your content easier to quote correctly. A page with several competing H1s and no logical nesting is harder for these systems to segment into a coherent answer.
- Accessibility. Screen-reader users navigate by headings. Multiple H1s break the expected "one main title, then subsections" model and make the page confusing to move through. This is the most concrete, non-debatable reason to fix it, and Google's own guidance ties good heading order to accessibility.
- It signals a template problem. Multiple H1s across many pages usually points to a theme or page-builder misconfiguration. Fixing it once at the template level improves every page and often cleans up related heading-order problems.
How to fix it
- 1
Find every H1 on the page
Open DevTools and run
document.querySelectorAll('h1')in the Console. It returns every H1 and its text, so you can see exactly which elements are the culprits. You'll often find the real page title plus one you didn't expect: the logo, a tagline, a slider headline, or a widget title. Decide which single H1 should describe the page's main topic; everything else needs to change. - 2
Keep exactly one H1, the page title
Pick the one H1 that names what the page is about, usually the article, product, or page title, and leave it as
<h1>. It should appear once, near the top of the main content, and match the page's core topic. Write it as a clear, human headline rather than a keyword string. If your page ends up with no H1 after cleanup, that's a separate issue to fix; you want exactly one. - 3
Demote the extras to the right level
Change the other H1s to the level that reflects their role in the outline. Section headings become
<h2>, sub-sections become<h3>, and so on. Non-content elements like a logo or tagline shouldn't be a heading at all; a logo is a link with an image and alt text, not an<h1>. Keep a logical, non-skipping hierarchy. Heading levels describe document structure, not font size, so style them with CSS and never pick a tag because it looks big. - 4
Fix it at the template, not page by page
If the same extra H1 shows up sitewide, which is common with the logo-as-H1 pattern, fix the template once instead of editing individual pages. In most themes the homepage logo can be an H1 while inner pages use a plain
<div>or<p>for the logo; check your header template or theme settings. Page builders (Elementor, Divi, WPBakery, Shopify sections) let you set the HTML tag per heading widget, so walk through your global header, hero, and footer blocks and downgrade any stray H1s. - 5
Re-crawl and verify the outline
After your changes, re-run the audit or run
document.querySelectorAll('h1').lengthin the Console, which should return 1. Sanity-check the full heading order with a heading-outline browser extension or DevTools' Accessibility tree to confirm there are no skipped levels, such as an H1 jumping straight to an H4. A clean outline is the goal, not just a single H1.
Example
<!-- BEFORE: two competing H1s -->
<header>
<h1><a href="/"><img src="/logo.svg" alt="Acme Co"></a></h1>
</header>
<main>
<h1>How to Brew Cold Brew Coffee at Home</h1>
<h1>What You'll Need</h1> <!-- should be a section, not an H1 -->
<p>...</p>
</main>
<!-- AFTER: one H1, logical hierarchy -->
<header>
<a href="/" class="logo"><img src="/logo.svg" alt="Acme Co"></a>
</header>
<main>
<h1>How to Brew Cold Brew Coffee at Home</h1>
<h2>What You'll Need</h2>
<p>...</p>
<h2>Step-by-Step Method</h2>
<h3>1. Coarsely grind the beans</h3>
</main>Before: the logo and the article title are both H1s. After: only the article title is an H1, the logo becomes a plain linked image, and section headings drop to H2.
Platform-specific steps
Yoast and Rank Math flag multiple H1s in their content analysis but don't set the tags; your theme does. Most block themes let the editor apply H1 to the post title automatically (correct) while the logo may also be an H1. Go to Appearance > Editor (or Customizer) and check the header template. In Full Site Editing, select the Site Title or Logo block and confirm it isn't set to Heading level 1. If your theme hardcodes <h1> around the logo in header.php, change it to a <p class="site-title"> or <div>. Inside content, use the block toolbar to change any extra Heading blocks from H1 to H2 or H3.
Page builders are the most common source of stray H1s because every Heading widget has an HTML-tag selector that people leave on the default. Edit the page, click each Heading or Title widget, and change the 'HTML Tag' (Elementor), 'Heading Level' (Divi), or equivalent from H1 to the appropriate level. Check hero sections, sliders, and CTA blocks specifically. If a global header template contains an H1 logo, edit the Theme Builder header once to fix it everywhere.
Shopify themes often wrap the store name or logo in an <h1> on the homepage and repeat it site-wide, colliding with your product or page title H1. Many themes apply the logo H1 only on the homepage by design, which is acceptable. For product, collection, and blog templates, open the relevant Liquid file (for example sections/header.liquid, sections/main-product.liquid) and ensure only the product or page title uses {{ product.title }} inside an <h1>. Change the logo wrapper to a <div> on inner pages with a {% unless template == 'index' %} conditional.
Wix lets you set the semantic heading tag independently of text size. Select the text element, open the text settings, and use the tag dropdown to assign 'Heading 1' to only one element per page (the main page title) and 'Heading 2' or 'Heading 3' to the rest. Wix's built-in SEO tools also surface the H1 status per page, which you can use to confirm each page has exactly one.
In Squarespace, the site title and some banner or hero text can render as H1 depending on the template, on top of your page title. In the editor, click a text block and use the H1, H2, H3 formatting options to demote extras. For site-title or banner H1s baked into the template, adjust them in Site Styles, or on developer-platform sites edit the template header files so only the page heading uses <h1>.
You control the markup directly, so this is the easiest to fix cleanly. Ensure each page or route renders exactly one <h1>, driven by the page's title, and use <h2> and <h3> for sections. Watch shared layout components: a <Header> or <Logo> reused on every page should not contain an <h1>; use a <div> or <Link> with an image and alt text instead. In Next.js, keep the visible <h1> in the page body separate from the <title> in metadata; they serve different purposes and both should exist.
Frequently asked
Not directly. Google has repeatedly confirmed that multiple H1s won't cause a ranking penalty; a page can rank fine with zero, one, or several H1s. The reason to fix it is clarity and accessibility. One H1 gives search engines and AI answer engines an unambiguous statement of the page's main topic, and it gives screen-reader users a sane structure to navigate. Treat this as a hygiene warning, not an emergency.
One. The long-standing best practice is a single H1 that names the page's primary topic, followed by H2s and H3s for sections and sub-sections. Google will tolerate more, but one H1 per page remains the cleanest, most predictable structure for search engines, AI crawlers, and accessibility, so there's no upside to keeping extras.
Almost always the theme or page builder added the others. A common pattern is the site logo or site title being wrapped in an <h1> in the header template, so it appears on every page in addition to your content title. Sliders, hero sections, and CTA blocks also frequently default their big display text to H1. View source and search for <h1 to see where the extras come from; the fix is usually in a template or widget setting, not your content.
No. Heading tags define document structure, not appearance. If you want large text that isn't the page's main heading, use the correct heading level (or a <p> or <div>) and make it big with CSS font-size. Choosing <h1> for visual size is what creates most multiple-H1 problems in the first place.
No. HTML5 once proposed that each <section> or <article> could have its own H1, with the browser computing an implied outline from nesting. No browser or assistive technology ever implemented that algorithm, and it was effectively dropped from the spec. For real-world SEO and accessibility, use explicit heading levels (H1 to H6) and keep a single H1 per page.
Does your site have this issue?
Run a free, AI-powered audit and we’ll flag this and 150+ other checks in about a minute. No signup.