How to fix multiple h1 on Headless / Custom (I build in code)

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

Steps for 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.
Official Headless / Custom (I build in code) documentation ↗

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.

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.

See the complete Multiple h1 guide for every platform and the full background.

Not sure if your Headless / Custom (I build in code) store has this?

Run a free SEOLZ scan — we’ll find multiple h1 and every other issue across your whole site.

Scan my site free

Fix multiple h1 on another platform