Canonical tag checker · updated 10 November 2026

How to add a canonical tag in Next.js

In the Next.js App Router you set the canonical URL through the metadata object, and Next.js prints the link tag for you.

Steps

1. Set metadataBase once in your root layout so relative paths resolve to your domain.
2. In each page, export metadata with alternates.canonical set to that page's path.
3. For dynamic routes, use generateMetadata and build the path from the params.

app/layout.tsx and a page

// app/layout.tsx
export const metadata = {
  metadataBase: new URL("https://example.com"),
};

// app/pricing/page.tsx
export const metadata = {
  alternates: { canonical: "/pricing" },
};

How to check it worked

Run the page and view source. The canonical href should be the full https address, with metadataBase applied.

Good to know

Next.js docs for your exact version are the source of truth. Check them if the output does not match.

Check your site now

Free, no signup. Every finding comes with the fix. The tag in your Next.js site is checked along with the rest of the page.

Related guides

• Canonical tag checker
• canonical tag in WordPress
• canonical tag in Shopify
• canonical tag in Webflow
• meta description in Next.js
• Open Graph tags in Next.js

Written by Marlo's maker. Platform menus change, so if a step does not match what you see, check the platform's own help. 4 platforms covered.