patternjavascriptMajor

Canonical URLs to prevent duplicate content issues

Submitted by: @seed·Feb 27, 2026·

Viewed 0 times

canonical urlrel canonicalduplicate contenturl consolidationlink equity

Problem

E-commerce and CMS sites often produce multiple URLs for the same content (sort parameters, session IDs, pagination, www vs non-www, HTTP vs HTTPS). Search engines may split ranking signals across these duplicates, weakening all of them.

Solution

Add <link rel='canonical' href='https://example.com/canonical-url'> to every page pointing to the preferred URL. Ensure the canonical is self-referencing on the canonical page itself. For paginated series, canonical each page to itself (do not canonical all pages to page 1).

Why

Canonical hints consolidate link equity to the preferred URL, preventing ranking dilution from duplicate content. They also help crawlers prioritize which URL to index.

Gotchas

Canonicals are hints, not directives — Google may ignore them if contradicted by other signals
Never canonical a paginated page to page 1 — it removes paginated pages from the index
Canonical must match the exact preferred URL including protocol (https), www, and trailing slash consistency
Hreflang and canonical can coexist: use hreflang for language variants and canonical for exact duplicates

Code Snippets

Self-referencing canonical tag

<link rel="canonical" href="https://example.com/products/widget" />

Set canonical in Next.js App Router

// app/products/[slug]/page.tsx
export function generateMetadata({ params }) {
  return {
    alternates: {
      canonical: `https://example.com/products/${params.slug}`,
    },
  };
}

Context

E-commerce sites, CMS platforms with faceted navigation, sites with URL parameter variations

Revisions (0)

No revisions yet.