How to fix duplicate title on Next.js

Give every page a unique, descriptive title tag that accurately reflects that page's specific content.

Steps for Next.js

  1. Centralise your title strategy in a shared `lib/seo.ts` helper that builds a unique, descriptive title from page-specific data (product name, category, page type) plus a consistent brand suffix.
  2. For the App Router, export an async `generateMetadata()` function from every `app/**/page.tsx` that calls the helper with data fetched for that specific route — never hard-code a static string shared across pages.
  3. For the Pages Router, replace any shared/static `<title>` strings in `_app.tsx` or individual pages with per-page `<Head><title>` tags using `next/head`, driven by the same `lib/seo.ts` helper.
  4. Use Next.js `metadata.metadataBase` (App Router) or an absolute URL in Pages Router so Open Graph titles and canonical tags resolve correctly alongside the unique `<title>`.
  5. Add the `template` key inside a root `layout.tsx` `metadata` export as a fallback pattern (e.g. `'%s | Brand'`) so any page that only provides a short segment still gets a fully-formed, unique title.
  6. Audit with `generateStaticParams` or your sitemap to assert every slug produces a distinct title — add a CI test that fetches rendered HTML for key routes and asserts no two `<title>` values are identical.
Official Next.js documentation ↗

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.

Not sure if your Next.js store has this?

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

Scan my site free

Fix duplicate title on another platform