How to fix multiple h1 on Remix

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

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.