How to fix seo variant urls not canonicalized on Next.js (Headless)

Steps for Next.js (Headless)

1. Locate your product page route file — either `app/products/[slug]/page.tsx` (App Router) or `pages/products/[slug].tsx` (Pages Router). This is where the canonical must be set.
2. Identify how variant parameters are passed — typically as query strings (e.g. `?color=red&size=M`) or as additional dynamic segments. The canonical must always point to the base product URL, stripping all variant params.
3. App Router: Export an async `generateMetadata` function that receives `params` and `searchParams`, constructs the bare product URL (no query string), and returns it under `alternates.canonical`. This injects a `<link rel='canonical'>` in the `<head>` automatically.
4. Pages Router: Import `next/head` in the page component, read the base slug from `router.query`, build the canonical URL, and render `<link rel='canonical' href={canonicalUrl} />` inside `<Head>`.
5. Ensure the canonical URL is absolute (includes `https://` + your domain). Use an environment variable such as `NEXT_PUBLIC_SITE_URL` so it works across staging and production environments.
6. Test by navigating to a variant URL (e.g. `/products/my-shirt?color=blue`) and inspecting the rendered `<head>` — the canonical should point to `https://yourdomain.com/products/my-shirt` with no query string.

What is seo variant urls not canonicalized?

When shoppers (or your platform) navigate to a product with a colour, size, or style selected, the URL often changes — a query parameter like `?color=Pop+Red` or `?size=M` gets appended to the base product URL. Each of those variant URLs is effectively a separate page in Google's eyes. A canonical tag is a small snippet of HTML code (placed in the `<head>` of a page) that tells search engines: "The true, original version of this content lives at this URL." Pointing every variant URL's canonical at the clean, base product URL is the standard way to tell Google that all those variants are the same product, just filtered differently.

Without canonical tags on variant URLs, Google may index hundreds or thousands of near-duplicate pages for a single product. This splits your page's authority (link equity) across all those URLs instead of concentrating it on one, directly weakening your product page's ability to rank. Google may also choose a variant URL as the canonical itself — one that may disappear when stock runs out — causing rankings to drop unpredictably. Crawl budget is wasted re-crawling redundant variants instead of discovering new or updated pages. Fixing this consolidates all ranking signals on your main product page, typically improving organic visibility and protecting you against ranking volatility as variants come and go.

See the complete Seo variant urls not canonicalized guide for every platform and the full background.