How to fix non self canonical on Next.js (Headless)

Steps for Next.js (Headless)

1. 1. Create a canonical utility (`lib/canonical.ts`) that derives the canonical URL from the incoming request — using `NEXT_PUBLIC_SITE_URL` plus the current pathname — so every page always self-references unless you explicitly override it.
2. 2. For the App Router: replace every hard-coded or missing `alternates.canonical` inside `generateMetadata()` with a call to this utility, ensuring the returned value always matches the page's own public URL.
3. 3. For the Pages Router: in `_app.tsx` (or in each page), replace any `<link rel='canonical'>` inside `next/head` that points to a different URL with `<link rel='canonical' href={canonicalUrl(router.asPath)} />`.
4. 4. Audit dynamic routes (e.g. `[slug]`, `[handle]`, `[...path]`) — these are the most common source of non-self canonicals. Confirm that the `params`-derived URL in `generateMetadata` exactly matches the final public URL (no trailing-slash mismatch, no www/non-www mismatch).
5. 5. If a page intentionally cross-canonicalises to another URL (e.g. a paginated variant pointing to page 1), add a `// canonical: intentional cross-reference` comment and document the reason so future audits can skip it safely.
6. 6. Run a post-deploy audit with a script (or a crawler) that fetches every page, extracts the `<link rel='canonical'>` value, and asserts it equals `location.href` — fail the CI build if any unintentional mismatch is found.

What is non self canonical?

A canonical tag is a small snippet of HTML code, placed in the `<head>` of a page, that tells Google "this is the definitive version of this content." A self-canonical means the tag points back to the page itself — the norm for any page you want indexed. A non-self-canonical means the tag points to a different URL, effectively telling Google: "don't index me, index that other page instead." This is sometimes intentional (e.g., a filtered product-listing page deferring to the main category page), but when it happens by accident, Google will ignore the page entirely and index the wrong destination instead.

When a page has a non-self-canonical by mistake, Google treats it as a duplicate and removes it from search results — meaning all the organic traffic that page could earn is lost. If important product, category, or landing pages are accidentally canonicalized to the wrong URL, your store effectively disappears from Google for those queries. Even if Google doesn't fully honour the tag, it still dilutes your crawl budget and creates confusing ranking signals. Fixing accidental non-self-canonicals can restore lost rankings quickly, while verifying intentional ones ensures you're not accidentally de-indexing pages you need.

See the complete Non self canonical guide for every platform and the full background.