How to fix seo facet url not canonicalized on Next.js (Headless)

Steps for Next.js (Headless)

1. Locate (or create) your collection/category route. In the App Router this is typically `app/collections/[slug]/page.tsx`; in the Pages Router it is `pages/collections/[slug].tsx`. All canonical logic below targets the App Router — see the Pages Router note at the bottom of the snippet for the equivalent.
2. Extract the clean canonical URL from the route segment alone (the `slug` param) — deliberately ignoring every search-param that represents a facet, sort order, or page number (e.g. `?color=red&sort=price&page=2`). Build the full absolute URL with your `NEXT_PUBLIC_SITE_URL` environment variable.
3. In the App Router, export an async `generateMetadata` function from the same `page.tsx` file. Set `alternates.canonical` to the clean URL string — Next.js renders this as `<link rel='canonical'>` in `<head>` automatically.
4. Ensure the `generateMetadata` function receives the `searchParams` prop but does NOT include any of those params in the canonical href — the canonical must always point to the unfiltered base URL regardless of which filters or page numbers are active.
5. For the Pages Router, import `next/head` and render `<link rel='canonical' href={canonicalUrl} />` inside `<Head>` in the page component, applying the same logic: derive `canonicalUrl` from `router.query.slug` only, ignoring all other query params.
6. Deploy and validate with 'Inspect URL' in Google Search Console or by viewing page source — confirm `<link rel='canonical'>` points to the clean category URL on filtered, sorted, and paginated variants.

What is seo facet url not canonicalized?

When shoppers filter your product listings by size, colour, price, or sort order — or browse to page 2, 3, etc. — your store generates a new URL for each combination (e.g. `/collections/hoops?color=red&sort=price` or `/collections/hoops?page=5`). These "facet URLs" display largely the same products as the base category page, making them near-duplicate pages. A canonical tag is a small piece of HTML that tells Google: "Treat THIS page as the authoritative, indexable version — not the one you just crawled." Pointing every facet URL's canonical back to the clean category URL (e.g. `/collections/hoops`) is the standard, Google-recommended way to handle this.

Without canonical tags, Google may index hundreds or thousands of near-identical filter and pagination URLs instead of your core category pages — diluting the ranking signals (links, authority, clicks) that should be concentrated on those pages. Crawl budget is wasted on low-value filter combinations, meaning new or updated products get discovered more slowly. Duplicate content confusion can push the wrong URL into search results, giving shoppers a paginated or pre-filtered page that looks broken. Fixing canonicals consolidates ranking signals onto your clean category pages, improves crawl efficiency, and protects your organic traffic from unnecessary duplication penalties.

See the complete Seo facet url not canonicalized guide for every platform and the full background.