How to fix multiple h1 on Next.js (Headless)

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

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.