Skip to content

Metadata · Next.js (App Router)

How to fix duplicate title tags in Next.js (App Router)

Identical titles make separate pages look like the same page. Search engines pick one and suppress the rest, so your pricing, docs and blog pages compete with each other instead of ranking for their own terms.

The fix for Next.js (App Router)

13x detects your framework from the response and hands you this version rather than the generic one — below 50% confidence it hedges and gives you the generic one instead.

Use the template field so each route only supplies its own part:

ts code
// app/layout.tsx
export const metadata: Metadata = {
  title: { default: "example.com", template: "%s — example.com" },
};

// app/pricing/page.tsx
export const metadata: Metadata = { title: "Pricing" };

// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }): Promise<Metadata> {
  const { slug } = await params;
  const post = await getPost(slug);
  return { title: post.title };
}

Any route without its own title falls back to default, which is what produces the duplicates.

On a different stack? The general version of this fix explains what 13x checks and why it matters, without assuming a framework.

Check your Next.js (App Router) site

113 deterministic checks against your live URL, in about 30 seconds. Framework detected from the response, so every fix comes back in the form your stack actually uses.

No signup. Results in 30 seconds.