How to fix multiple h1 on Gatsby

Steps for 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.

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.