Canonical URL

Definition

A canonical URL is the preferred version of a page specified via <link rel="canonical">. It helps search engines consolidate signals when the same content is accessible via multiple URLs.

Why it matters

• Prevents duplicates caused by parameters and tracking codes
• Consolidates ranking signals to the preferred URL
• Reduces crawl waste
• Solves duplicate URL issues from pagination, sorting, and filtering
• Specifies authoritative source for cross-domain content mirrors
• Prevents signal dilution from HTTP/HTTPS or www/non-www versions
• Makes Search Console reports more accurate (consolidates data to canonical)

How to implement

• Point canonical to an indexable, 200 OK, content-equivalent URL
• Avoid pointing canonicals to unrelated pages or homepage (often ignored)
• Include only canonical URLs in sitemap
• Every page should have a canonical, even self-referencing
• Use absolute URLs, not relative paths
• Ensure canonical URL is accessible (no 404 or redirects)
• Generate canonical programmatically for dynamic pages (don't hardcode)

Examples

<!-- Basic canonical tag -->
<link rel="canonical" href="https://example.com/products/iphone" />

<!-- Pagination canonical (point to first page or view-all) -->
<link rel="canonical" href="https://example.com/products" />

<!-- URL with parameters points to clean URL -->
<!-- Current URL: /products/iphone?utm_source=newsletter -->
<link rel="canonical" href="https://example.com/products/iphone" />

// React/Vite dynamic canonical generation
import { useLocation } from 'react-router-dom';
import { Helmet } from 'react-helmet-async';

function SEOHead({ title, description }: SEOProps) {
  const { pathname } = useLocation();
  const baseUrl = 'https://example.com';
  // Remove trailing slash and generate canonical
  const canonicalUrl = `${baseUrl}${pathname.replace(/\/$/, '') || '/'}`;

  return (
    <Helmet>
      <title>{title}</title>
      <meta name="description" content={description} />
      <link rel="canonical" href={canonicalUrl} />
    </Helmet>
  );
}

Related