Skip to Content
UX Patterns for Devs GPT is now available! Read more →
GlossaryCanonical Tags

Canonical Tags

A canonical tag (rel=“canonical”) is an HTML element that helps webmasters prevent duplicate content issues by specifying the “canonical” or “preferred” version of a web page. This is crucial for SEO as it consolidates ranking signals for duplicate or similar content to a single URL.

What Problems Do They Solve?

Duplicate Content Issues

Search engines may penalize sites for duplicate content. Common causes include:

  • HTTP vs HTTPS versions
  • WWW vs non-WWW versions
  • URL parameters (sorting, filtering, tracking)
  • Mobile vs desktop URLs
  • Paginated content
  • Print versions of pages

Without canonicalization, link equity (PageRank) gets split between duplicate pages instead of consolidating to one authoritative version.

Implementation

Basic Syntax

Add to the <head> section of your HTML:

<link rel="canonical" href="https://example.com/preferred-page">

Self-Referencing Canonicals

Even unique pages should include self-referencing canonicals:

<!-- On https://example.com/unique-page -->
<link rel="canonical" href="https://example.com/unique-page">

Common Use Cases

Pagination

Self-canonicalize each page in the series; only use a view-all page if it fully represents the series and canonicalize that page to itself:

<!-- On page 2 of results -->
<link rel="canonical" href="https://example.com/products?page=2">
<!-- OR point to view-all if it exists and represents the series -->
<link rel="canonical" href="https://example.com/products?view=all">

URL Parameters

Point filtered or sorted versions to the main category:

<!-- On /products?sort=price&color=red -->
<link rel="canonical" href="https://example.com/products">

Cross-Domain

Syndicated content can point to the original source:

<!-- On republishing site -->
<link rel="canonical" href="https://original-site.com/article">

Mobile/AMP Versions

Mobile or AMP pages reference the desktop version:

<!-- On m.example.com/page -->
<link rel="canonical" href="https://example.com/page">

Best Practices

Do’s ✅

  1. Use absolute URLs

    <!-- Good -->
<link rel="canonical" href="https://example.com/page">
 
<!-- Bad -->
<link rel="canonical" href="/page">

  2. Be consistent

    • Pick one version (www or non-www, HTTP or HTTPS)
    • Use the same format everywhere

  3. Validate URLs exist

    • Canonical URLs should return 200 status
    • Don’t point to 404s or redirects

  4. Match content closely

    • Canonical pages should have very similar content
    • Don’t canonicalize unrelated pages

  5. Include in sitemaps

    • Only include canonical URLs in XML sitemaps
    • This reinforces your preference

Don’ts ❌

  1. Don’t chain canonicals

    <!-- Page A → Page B → Page C (Bad) -->
<!-- Page A → Page C (Good) -->

  2. Don’t mix signals

    • If using canonical to Page A, don’t noindex Page A
    • Don’t block canonical URLs in robots.txt

  3. Don’t canonicalize to redirects

    • Point directly to the final URL
    • Avoid redirect chains

  4. Don’t use relative URLs

    • Protocol and domain can be misinterpreted
    • Always use full absolute URLs

Relationship with Other Tags

With rel=“prev” and rel=“next”

For paginated content, can be used together. Note: major search engines like Google do not use these hints for indexing; treat them as navigational aids, not SEO signals:

<link rel="canonical" href="https://example.com/article">
<link rel="prev" href="https://example.com/article?page=1">
<link rel="next" href="https://example.com/article?page=3">

With hreflang

Each locale self-canonicalizes and references alternates:

<!-- On English page -->
<link rel="canonical" href="https://example.com/page">
<link rel="alternate" hreflang="es" href="https://example.es/page">
<link rel="alternate" hreflang="fr" href="https://example.fr/page">
 
<!-- On Spanish page -->
<link rel="canonical" href="https://example.es/page">
<link rel="alternate" hreflang="en" href="https://example.com/page">
<link rel="alternate" hreflang="fr" href="https://example.fr/page">
 
<!-- On French page -->
<link rel="canonical" href="https://example.fr/page">
<link rel="alternate" hreflang="en" href="https://example.com/page">
<link rel="alternate" hreflang="es" href="https://example.es/page">

With meta robots

Canonical and robots directives should align:

<!-- Don't do this -->
<link rel="canonical" href="https://example.com/page">
<meta name="robots" content="noindex"> <!-- Conflicting signal -->

JavaScript Implementation

For SPAs or dynamic content:

// Remove existing canonical(s)
document.querySelectorAll('link[rel="canonical"]').forEach(el => el.remove());
 
// Add new canonical
const link = document.createElement('link');
link.setAttribute('rel', 'canonical');
link.setAttribute('href', 'https://example.com/preferred-url');
document.head.appendChild(link);

Common Mistakes

Multiple Canonical Tags

Having multiple canonical tags confuses search engines:

<!-- Wrong: Multiple canonicals -->
<link rel="canonical" href="https://example.com/page1">
<link rel="canonical" href="https://example.com/page2">

Protocol Mismatches

Ensure canonical URLs match your site’s protocol:

<!-- If site is HTTPS, don't use HTTP canonical -->
<link rel="canonical" href="http://example.com/page"> <!-- Wrong -->
<link rel="canonical" href="https://example.com/page"> <!-- Right -->

Parameter Handling

Be careful with parameter URLs:

<!-- Decide if parameters create different content -->
<!-- Same content: canonicalize to base URL -->
<link rel="canonical" href="https://example.com/page">
 
<!-- Different content: self-canonical with parameters -->
<link rel="canonical" href="https://example.com/page?category=shoes">

Testing & Validation

Tools for Testing

  • Google Search Console URL Inspection
  • Screaming Frog SEO Spider
  • Browser extensions (SEO Meta in 1 Click)
  • Google Rich Results Test (structured data)

What to Check

  1. Canonical tag is present
  2. URL is absolute and valid
  3. No redirect chains
  4. Content similarity between pages
  5. No conflicting signals

Canonical tags are crucial for:

  • Pagination - Managing duplicate content across pages
  • Infinite Scroll - Handling dynamically loaded content
  • Filtered/sorted product listings
  • Multi-step forms with unique URLs

Key Takeaways

  1. One canonical tag per page pointing to the preferred version
  2. Use absolute URLs including protocol and domain
  3. Ensure canonical URLs are accessible (200 status)
  4. Align with other SEO signals (sitemaps, robots.txt)
  5. Test implementation with SEO tools
  6. Monitor in Search Console for canonicalization issues

Stay updated with new patterns

Get notified when new UX patterns are added to the collection.

Last updated on
Progressive LoadingCLS (Cumulative Layout Shift)