Multiple h1

Moderate effort

Found on 68% of audited stores.

Remove all but one H1 tag from each page so every page has exactly one clear, descriptive primary heading.

What it is

An H1 is the main heading on a webpage — think of it as the title of a book chapter. It tells both visitors and search engines what the page is fundamentally about. HTML allows you to put as many H1 tags on a page as you like, but best practice — and Google's own guidance — is to use exactly one H1 per page. When a page has dozens or even hundreds of H1 tags (which can happen when a theme or plugin wraps every product card, section, or widget in an H1), the heading structure breaks down entirely. Everything below the H1 should be organized with H2, H3, and so on — like chapters and subheadings in a document.

Why it matters

Google uses heading structure — especially the H1 — as a strong signal for understanding what a page is about and for generating the blue title link shown in search results. A page with 95 H1 tags sends contradictory signals: Google cannot determine which heading represents the page's true topic, which can dilute your keyword relevance and hurt rankings. Beyond SEO, screen readers used by visually impaired shoppers rely on a single H1 to orient users when they land on a page — multiple H1s create a confusing and legally risky accessibility experience (WCAG 2.x guidelines and laws like the ADA reference proper heading structure). Fixing this is typically a quick template or theme change, yet it can meaningfully improve both your organic search visibility and the accessibility of your store.

How to fix it

  1. Audit every page type (homepage, collection/category pages, product pages, blog posts, landing pages) — multiple H1s usually stem from a shared template, so fixing one template fixes many pages at once.
  2. Identify which text should be the single H1 on each page type — for a product page this is the product name; for a category page it is the category name; for the homepage it is your main brand or value statement.
  3. Change all other H1 tags in the template to the appropriate sub-level heading: H2 for major sections, H3 for subsections within those, and so on.
  4. Check that dynamic or app-injected content (product card grids, review widgets, recommendation blocks) also uses H2 or lower — these are common sources of bulk H1 inflation.
  5. Re-crawl or use your browser's developer tools (right-click → Inspect, then search for '<h1') to confirm only one H1 remains on each page type.
  6. Re-run your SEO audit tool to verify the multiple_h1 flag is resolved across all affected page types.

Fix it on your platform

Pick your platform for the exact steps.

How to fix multiple h1 on Shopify
  1. Go to Online Store → Themes → click Actions → Edit code on your active theme.
  2. Open the template file for the affected page type: product.liquid (or sections/main-product.liquid in Dawn-based themes) for product pages, collection.liquid or sections/main-collection-product-grid.liquid for collections, index.liquid or sections/image-banner.liquid for the homepage.
  3. Search (Ctrl+F) for '<h1' in each file. There should be exactly one. Change any extras to <h2> or the correct semantic level.
  4. In product card snippets (e.g. snippets/card-product.liquid), product titles are often wrapped in H3 — confirm they are NOT H1.
  5. Check any installed apps that inject HTML (reviews, upsell widgets) by previewing the page and using browser DevTools → Elements → search for h1.
  6. Save each file, preview on a live page, and confirm with DevTools or an SEO checker.
Full Shopify guide →Official Shopify docs ↗
How to fix multiple h1 on Shopify Plus
  1. Follow the same Shopify steps above — Shopify Plus stores use the same theme architecture.
  2. Additionally audit any custom Liquid templates created for specific scripts or checkout pages via the Shopify Plus admin.
  3. If using a headless or custom storefront (Hydrogen/Oxygen), see the Headless / Custom entry below.
Full Shopify Plus guide →Official Shopify Plus docs ↗
How to fix multiple h1 on WooCommerce
  1. In your WordPress admin, go to Appearance → Theme File Editor (or use a child theme via FTP/SSH).
  2. Open the relevant template: single-product.php for product pages, archive.php or taxonomy-product_cat.php for category pages, front-page.php or page.php for other pages.
  3. Search for '<h1' — WooCommerce's default woocommerce_template_single_title hook outputs the product name as an H1; ensure no other element in the same template also uses H1.
  4. If a page builder (Elementor, Divi, Gutenberg) is used, open the page in the builder and change any Heading blocks set to H1 (other than the main title) to H2 or lower.
  5. For theme-generated product cards on shop/category pages, check loop/content-product.php — product titles in loops should be H2 or H3, not H1.
  6. Install a free plugin like Detailed SEO Plugin or use browser DevTools to spot-check the rendered page for stray H1 tags.
Full WooCommerce guide →Official WooCommerce docs ↗
How to fix multiple h1 on BigCommerce
  1. Go to Storefront → My Themes → click Customize on your active theme, or click Advanced → Edit Theme Files.
  2. In the file editor, open templates/pages/product.html for product pages, templates/pages/category.html for category pages, and templates/pages/home.html for the homepage.
  3. Search each file for 'h1'. The product name ({{product.name}}), category name, or page title should be the sole H1.
  4. Open templates/components/products/card.html — product card titles in grid listings should use a span, H3, or H4, not H1.
  5. Save changes, preview the storefront, and use browser DevTools to confirm one H1 per page type.
Full BigCommerce guide →Official BigCommerce docs ↗
How to fix multiple h1 on Wix
  1. Open your site in the Wix Editor and navigate to the page type with the issue (e.g. a Product Page, a Collection Page, or the Homepage).
  2. Click each text element that appears to be a major heading. In the text toolbar, check the paragraph style dropdown — only one element per page should be set to 'Heading 1'.
  3. For all other section headings, change the style to 'Heading 2', 'Heading 3', etc., using the same text toolbar dropdown.
  4. For dynamic pages (Wix Stores product pages), open the dynamic page template in the Editor; the product name field should be H1 and all other text blocks should be H2 or lower.
  5. Wix does not give direct HTML access, so heading levels are controlled entirely through the text style dropdown — there is no code file to edit.
  6. Use a browser extension (e.g. Web Developer Toolbar) or headless audit tool to verify the rendered H1 count after publishing.
Full Wix guide →Official Wix docs ↗
How to fix multiple h1 on Wix Studio
  1. Open the page in Wix Studio Editor. Click any text element and check the text role/style in the Design panel on the right — set only one element to H1.
  2. For CMS (dynamic) pages such as product or blog templates, open the page template and ensure the connected dataset title field renders as H1 while all other headings render as H2 or lower.
  3. Publish and verify with browser DevTools.
Full Wix Studio guide →Official Wix Studio docs ↗
How to fix multiple h1 on Squarespace
  1. Open Pages and click Edit on the affected page.
  2. Click each text block. In Squarespace, text style options (Heading 1, Heading 2, etc.) are set via the text formatting toolbar that appears when you highlight text.
  3. Ensure only the primary page title or main heading is set to Heading 1. Change all other headings to Heading 2 or Heading 3.
  4. For product pages in Squarespace Commerce, the product title is automatically rendered as H1 by the template — do not add a second H1 in the product description.
  5. For blog posts, the post title is the H1 — do not use Heading 1 style inside the post body; use Heading 2 onward.
  6. Use browser DevTools to confirm the rendered markup after saving.
Full Squarespace guide →Official Squarespace docs ↗
How to fix multiple h1 on Squarespace Commerce
  1. Product names in Squarespace Commerce are output as H1 by the built-in product template — do not duplicate this by adding an H1 in the product description field.
  2. In the product description editor, use Heading 2 and Heading 3 for any structured content — not Heading 1.
  3. If you have added a text block above or below the product block on the page that also uses Heading 1, edit that block and change it to Heading 2.
  4. Verify with DevTools after saving.
Full Squarespace Commerce guide →Official Squarespace Commerce docs ↗
How to fix multiple h1 on Webflow
  1. Open your project in the Webflow Designer and navigate to the affected page or Collection Template page.
  2. In the Navigator panel (left sidebar), expand the page structure and look for all 'Heading' elements. Click each one and check the Tag dropdown in the right-hand Style panel — only one should be set to H1.
  3. Change all additional H1 elements to H2, H3, etc., using the Tag dropdown (it shows H1–H6 and other block options).
  4. For Collection (CMS) pages (e.g. product detail pages), the bound title field should be H1; all other headings in the layout should be H2 or lower.
  5. Publish the site and verify in DevTools or an SEO audit.
Full Webflow guide →Official Webflow docs ↗
How to fix multiple h1 on Adobe Commerce (Magento)
  1. Locate the relevant template file via the Admin or directly in the file system: for product pages it is app/design/frontend/<Vendor>/<theme>/Magento_Catalog/templates/product/view/type/ or the base catalog/product/view.phtml.
  2. Open the template and search for '<h1' — the product name wrapper (typically <span class="base" itemprop="name">) inside an H1 is correct. Remove or downgrade any additional H1 tags to H2.
  3. Check category page templates in Magento_Catalog/templates/category/view.phtml — the category name H1 should be the only H1.
  4. Check layout XML files (e.g. catalog_product_view.xml) for any blocks that inject an H1 via widget or CMS block.
  5. Clear the Magento cache (System → Cache Management → Flush Magento Cache) after changes.
  6. Preview pages and confirm with DevTools.
Full Adobe Commerce (Magento) guide →Official Adobe Commerce (Magento) docs ↗
How to fix multiple h1 on Magento Open Source
  1. Follow the same steps as Adobe Commerce (Magento) above — the template file paths and cache-clearing process are identical for Magento Open Source.
Full Magento Open Source guide →Official Magento Open Source docs ↗
How to fix multiple h1 on PrestaShop
  1. Via FTP or your hosting file manager, navigate to themes/<your-theme>/templates/catalog/ and open product.tpl for product pages and category.tpl (or listing/product-list.tpl) for category pages.
  2. Search for '<h1' — only the main product or category name should be in an H1. Change any other H1 instances to H2 or H3.
  3. Check themes/<your-theme>/templates/_partials/product-cover-thumbnails.tpl and miniatures/product.tpl for H1 tags in product cards — change these to H2 or H3.
  4. Clear the theme cache in PrestaShop Admin → Advanced Parameters → Performance → Clear cache.
  5. Verify with browser DevTools.
Full PrestaShop guide →Official PrestaShop docs ↗
How to fix multiple h1 on Headless / Custom (I build in code)
  1. Search your component library or templates for all usages of <h1> (or any component that renders an H1, e.g. <Heading level={1}>).
  2. For each page type (PDP, PLP, homepage, blog post), ensure only the single most important title component outputs an H1.
  3. In product card/grid components, ensure the product name link uses an H2 or H3, not an H1 — this is the most common source of H1 inflation in headless builds.
  4. If using a CMS to drive content, confirm the CMS rich-text renderer does not allow authors to insert H1 tags inside body content — restrict the toolbar to H2 and below.
  5. Add an automated accessibility/SEO test (e.g. with axe-core or a Playwright/Cypress assertion) that checks for exactly one H1 per page type in your CI pipeline.
Full Headless / Custom (I build in code) guide →Official Headless / Custom (I build in code) docs ↗
How to fix multiple h1 on WordPress.org
  1. In WordPress admin, navigate to Appearance → Theme File Editor. Always work in a child theme to avoid losing changes on updates.
  2. Open the template for the affected page type (single.php, page.php, index.php, archive.php) and search for '<h1'.
  3. Ensure only the primary content title — <?php the_title('<h1>', '</h1>'); ?> — uses the H1 tag. Convert all others to <h2> or <h3>.
  4. If using Gutenberg (block editor): open the page/post, click any Heading block that is set to H1 but is not the main title, and use the block toolbar to change it to H2 or H3.
  5. Install a heading-audit plugin or use the 'Headings Map' browser extension to scan all flagged pages after saving.
  6. Use an SEO plugin (Rank Math or Yoast SEO) to get a per-post H1 check under the 'SEO Analysis' tab in the post editor.
Full WordPress.org guide →Official WordPress.org docs ↗
How to fix multiple h1 on Next.js (Headless)
  1. Audit every page and layout file in your `app/` (or `pages/`) directory for `<h1>` tags. Common offenders are shared layout components (e.g. `app/layout.tsx`, `components/Header.tsx`, `components/Hero.tsx`) that each render their own `<h1>` alongside a page-level `<h1>`. Use a global search: `grep -rn '<h1' ./app ./components ./pages`.
  2. Establish a single rule: *only the page-level component* (e.g. `app/products/[slug]/page.tsx`) is allowed to render an `<h1>`. Shared layout wrappers (`app/layout.tsx`), headers, hero banners, and section components must use `<h2>`–`<h6>` or a semantically neutral element instead.
  3. Create a reusable `<PageHeading>` component (see snippet below) that always renders an `<h1>`. Import and use it in every page component as the single primary heading, passing the page-specific title as a prop. Delete any existing inline `<h1>` tags from those page files.
  4. In shared/global components (`Header`, `Hero`, `Banner`, etc.) demote any existing `<h1>` tags to the appropriate level (`<h2>` for section titles, `<p>` for taglines, etc.) so they never compete with the page-level `<h1>`.
  5. For dynamic routes (e.g. PDP, PLP, blog posts), derive the `<PageHeading>` text from fetched data — for example the product name, category name, or article title — so every unique URL has a unique, descriptive primary heading.
  6. After deploying, validate each page type in a browser DevTools console with `document.querySelectorAll('h1').length` (should return `1`) and re-run your SEO audit tool to confirm the `multiple_h1` issue is resolved.
Full Next.js (Headless) guide →Official Next.js (Headless) docs ↗
How to fix multiple h1 on Elementor
  1. Open Elementor Editor for the affected page: in your WordPress dashboard go to Pages (or Posts) → find the page → click 'Edit with Elementor'.
  2. Audit all H1 tags on the page: click the navigator icon (the stacked-layers icon in the bottom toolbar) to open the Navigator panel, then click through every Heading widget and check its 'HTML Tag' setting (found under Content → HTML Tag). Also inspect any theme-injected H1 (e.g. a page-title section at the top of the template) by switching to Theme Builder if the page uses a custom template.
  3. Identify the single most descriptive heading that should remain as H1 (typically the main page/product/category title). Leave its HTML Tag set to 'H1'.
  4. For every other Heading widget whose HTML Tag is currently set to 'H1', click that widget, go to Content → HTML Tag, and change it to the appropriate semantic level — usually 'H2' for section headings or 'H3' for sub-sections — based on the page's content hierarchy.
  5. Check for H1s hidden inside Global Widgets or saved Template sections: in the Navigator, look for any 'Template' blocks, click 'Edit Template', repeat the same audit inside that template's Heading widgets, and update their HTML Tags accordingly.
  6. Click 'Update' (green button, bottom-left) to publish the changes, then verify by right-clicking the live page → 'View Page Source' and searching (Ctrl+F) for '<h1' to confirm exactly one H1 tag appears in the page HTML.
Full Elementor guide →Official Elementor docs ↗
How to fix multiple h1 on Gatsby
  1. Audit every page and template component (typically in src/pages/ and src/templates/) for multiple <h1> elements. Use a global search (grep -rn '<h1' src/) to find all occurrences across your codebase.
  2. In each page/template, keep exactly ONE <h1> that represents the primary, descriptive heading of that page (e.g. product name, collection title, blog post title). Demote all secondary <h1> tags to the appropriate semantic level: <h2> for section headings, <h3> for sub-sections, etc.
  3. For reusable layout components (src/components/Layout.jsx, Header.jsx, Hero.jsx, etc.) that may render their own <h1> (e.g. a site tagline or banner), convert those to <p>, <span>, or a lower heading level so they never compete with the page-level <h1>.
  4. If you generate pages programmatically via gatsby-node.js (createPage), open the assigned template file (e.g. src/templates/product.jsx) and ensure the single <h1> is driven by the page's dynamic data (e.g. product.title), with no additional hard-coded <h1> elsewhere in the template tree.
  5. Add a development-time assertion (see snippet below) using Gatsby's gatsby-browser.js onRouteUpdate hook to warn in the console whenever more than one <h1> is detected on a rendered page — this catches regressions early without affecting production builds.
  6. Run gatsby build && gatsby serve (or gatsby develop) and use browser DevTools or an accessibility tree inspector to confirm each page has exactly one <h1> before deploying.
Full Gatsby guide →Official Gatsby docs ↗
How to fix multiple h1 on Remix
  1. Identify all Remix route files that render H1 tags — check every file under `app/routes/` (e.g. `app/routes/_index.tsx`, `app/routes/products.$handle.tsx`, `app/routes/collections.$handle.tsx`) and any shared layout components in `app/components/` or `app/root.tsx`. Search the codebase for `<h1` to get a full list.
  2. For each route, audit the full render tree: open the route file, trace through every component it imports (including shared headers, hero banners, page-title components, or CMS-driven content blocks), and list every `<h1>` that could be rendered simultaneously on a single page. Pay special attention to `app/root.tsx` — any `<h1>` placed there will appear on every page.
  3. Decide on the single, authoritative `<h1>` per page — typically the main page title (product name, collection name, blog post title, or homepage headline). Demote all other `<h1>` tags to the appropriate heading level (`<h2>`, `<h3>`, etc.) to preserve visual hierarchy without duplicating the primary heading signal.
  4. If a shared layout component (e.g. a `<PageHeader>` or `<Hero>` component) renders an `<h1>`, and individual route files also render their own `<h1>`, refactor so only one source of truth exists — for example, pass a `level` prop to the shared component (`level={2}` from routes that supply their own `<h1>`) or remove the `<h1>` from the layout and always render it inside the route-level component.
  5. For dynamic routes (e.g. `products.$handle.tsx`), confirm the `<h1>` is populated from the route's `loader` data (e.g. `product.title`, `collection.title`) and is rendered exactly once in the JSX — not both inside a hero section and again in a product-detail section within the same route.
  6. After making changes, run `npm run dev` and visit each page type in the browser. Use DevTools (Elements panel → Ctrl+F `h1`) or a browser extension to verify exactly one `<h1>` exists in the DOM per page, including pages rendered via Remix's nested layouts (`<Outlet>` chains), then deploy and re-crawl to confirm the fix.
Full Remix guide →Official Remix docs ↗

Does your site have this issue?

Run a free SEOLZ scan to find multiple h1 — and every other issue — across your whole site in minutes.

Scan my site free

Frequently asked questions

What is Multiple h1?

An H1 is the main heading on a webpage — think of it as the title of a book chapter. It tells both visitors and search engines what the page is fundamentally about. HTML allows you to put as many H1 tags on a page as you like, but best practice — and Google's own guidance — is to use exactly one H1 per page. When a page has dozens or even hundreds of H1 tags (which can happen when a theme or plugin wraps every product card, section, or widget in an H1), the heading structure breaks down entirely. Everything below the H1 should be organized with H2, H3, and so on — like chapters and subheadings in a document.

Why does multiple h1 matter?

Google uses heading structure — especially the H1 — as a strong signal for understanding what a page is about and for generating the blue title link shown in search results. A page with 95 H1 tags sends contradictory signals: Google cannot determine which heading represents the page's true topic, which can dilute your keyword relevance and hurt rankings. Beyond SEO, screen readers used by visually impaired shoppers rely on a single H1 to orient users when they land on a page — multiple H1s create a confusing and legally risky accessibility experience (WCAG 2.x guidelines and laws like the ADA reference proper heading structure). Fixing this is typically a quick template or theme change, yet it can meaningfully improve both your organic search visibility and the accessibility of your store.

How do I fix multiple h1?

Remove all but one H1 tag from each page so every page has exactly one clear, descriptive primary heading.

Authoritative references

Related SEO issues