How to fix missing canonical on Next.js (Headless)

Steps for Next.js (Headless)

1. Identify your router: App Router (app/) uses `generateMetadata` / `metadata` exports; Pages Router (pages/) uses the `<Head>` component from `next/head`. Apply the correct approach for each route type.
2. Set a NEXT_PUBLIC_SITE_URL environment variable (e.g. https://www.example.com) in .env.local and in your hosting provider's env config — this is the base used to build every canonical URL.
3. App Router — In every page.tsx (or layout.tsx for shared defaults), export a `generateMetadata` function that returns `alternates.canonical` set to the page's full absolute URL. For dynamic routes, receive `params` and construct the URL accordingly.
4. Pages Router — In every page file, add a `<Head>` block containing `<link rel='canonical' href={canonicalUrl} />`, where `canonicalUrl` is built from `NEXT_PUBLIC_SITE_URL` + `useRouter().asPath` (strip query strings as needed).
5. For the Pages Router, extract the logic into a reusable `<CanonicalTag />` component and drop it into your shared `<Layout>` component so every page gets it automatically without repetition.
6. Verify the output with `curl -s <page-url> | grep canonical` or the browser DevTools Elements panel — each page must render exactly one `<link rel='canonical'>` pointing to its own clean, absolute URL.

What is missing canonical?

A canonical tag is a small snippet of HTML code placed in the `<head>` of a web page that tells search engines "this is the official, preferred URL for this content." It looks like `<link rel="canonical" href="https://www.yourstore.com/your-page/" />`. When the same (or very similar) content is accessible at multiple URLs — for example, with and without "www", with tracking parameters like `?utm_source=email`, or through category filter combinations — the canonical tag acts as a signpost that points all the credit back to one master URL. Without it, search engines must guess, and they often guess wrong.

Without a canonical tag, Google may discover multiple URLs showing identical or near-identical content and split the ranking signals (links, authority) across all of them instead of concentrating them on the one URL you actually want to rank. This directly dilutes your organic search rankings and can cause the wrong URL to appear in search results — hurting click-through rates and conversions. For ecommerce stores, product pages are especially vulnerable because filtered URLs (`/shoes?color=red&size=10`), session IDs, and affiliate parameters create dozens of duplicate variants every day. Consistently missing canonical tags is one of the most common technical SEO issues that silently erodes organic traffic over time.

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