How to fix duplicate title on Next.js (Headless)

Steps for Next.js (Headless)

1. Identify every route segment in your `app/` directory (e.g. `app/page.tsx`, `app/products/[slug]/page.tsx`, `app/collections/[handle]/page.tsx`, `app/blog/[slug]/page.tsx`, etc.) that currently exports a static or duplicate `metadata` object or uses a shared `<title>` tag.
2. For static pages (e.g. Home, About, Contact), export a unique `metadata` object directly from the route file with a page-specific `title` string — never reuse the same string across routes.
3. For dynamic pages (e.g. Product, Collection, Blog Post), replace the static `metadata` export with an async `generateMetadata()` function that fetches the resource by its route param (`slug`, `handle`, etc.) and builds the title from real data (e.g. product name, collection title).
4. Use Next.js's built-in `title.template` in your root `app/layout.tsx` `metadata` export to automatically append your brand name (e.g. `'%s | My Store'`), so every page only needs to supply the unique `%s` portion — eliminating accidental duplicates from copy-paste.
5. Remove any legacy `<Head><title>…</title></Head>` blocks from `pages/` router files or custom `_app.tsx`/`_document.tsx` if you are migrating to the App Router, since mixing both systems causes duplicate or overriding titles.
6. Run `next build` and review the build output for any route that still emits a generic or repeated title; fix each one until every route shows a distinct title in the terminal summary.

What is duplicate title?

The title tag is the line of text that appears as the clickable headline in Google search results and in your browser tab. When two or more pages on your store share the exact same title tag, search engines — and shoppers — cannot easily tell them apart. A duplicate title means at least one page is missing its own distinct identity, usually because a template has been applied without customisation, a CMS generated a fallback title, or pages were accidentally copied without updating their metadata.

Google uses the title tag as one of its primary signals to understand what a page is about. Duplicate titles confuse its crawlers, can cause the wrong page to rank (or neither page to rank well) for a given query, and split ranking authority between pages that should each stand on their own. For shoppers, identical titles in search results make it impossible to choose between two links — reducing click-through rates and, ultimately, revenue. Google may also silently rewrite a duplicate title to something generic, stripping away any keyword targeting you intended.

See the complete Duplicate title guide for every platform and the full background.