Introduction

Canonical Url Explained

6 min read
View contents

Canonical URL: Avoiding Duplicate Content in Google

The canonical URL (canonical tag) is an HTML element that tells Google which is the preferred version of a page when multiple URLs exist with similar or identical content. According to web.dev’s HTML document structure¹ and Google Search Central³, it’s fundamental for avoiding duplicate content issues.

What is the canonical URL?

The canonical URL is a <link> tag in your HTML <head> that specifies the “official” or “preferred” URL of a page.

Basic example:

<head>
  <link rel="canonical" href="https://example.com/product-a" />
</head>

How it works:

  1. Multiple URLs show the same content
  2. Each URL has canonical tag pointing to preferred version
  3. Google consolidates ranking signals toward canonical URL
  4. Only canonical URL normally appears in search results

Why is canonical URL important?

1. Prevents duplicate content

Problem: Google penalizes sites with lots of duplicate content.

Common example - E-commerce:

https://store.com/shoes/nike-air-max
https://store.com/shoes/nike-air-max?color=red
https://store.com/shoes/nike-air-max?size=10
https://store.com/shoes/nike-air-max?color=red&size=10

All show the same product but Google sees them as 4 different pages.

Solution with canonical:

<!-- On ALL variants -->
<link rel="canonical" href="https://store.com/shoes/nike-air-max" />

2. Consolidates ranking signals

Without canonical:

  • URL 1: 10 backlinks
  • URL 2: 8 backlinks
  • URL 3: 5 backlinks
  • Scattered total: 23 backlinks divided among 3 URLs

With canonical:

  • Canonical URL: 23 consolidated backlinks
  • Much stronger in rankings

3. Simplifies crawling

Google Study (2024):

  • Sites with correct canonical: 34% more crawl budget dedicated to unique content
  • 67% reduction in duplicate pages crawled

4. Control over which URL appears in SERPs

<!-- Prefer version without "www" -->
<link rel="canonical" href="https://example.com/page" />

<!-- Google will show this version in results -->

Common cases that need canonical

Case 1: URL parameters (tracking, filters, sorting)

Problem:

https://blog.com/article
https://blog.com/article?utm_source=facebook
https://blog.com/article?utm_source=twitter
https://blog.com/article?sort=date

Solution:

<!-- On all variants -->
<link rel="canonical" href="https://blog.com/article" />

Case 2: HTTP vs HTTPS

Problem:

http://example.com/page   (without SSL)
https://example.com/page  (with SSL)

Solution:

<!-- On BOTH versions, point to HTTPS -->
<link rel="canonical" href="https://example.com/page" />

Case 3: www vs non-www

Problem:

https://www.example.com/page
https://example.com/page

Solution: Choose ONE preferred version:

<!-- If you prefer WITHOUT www -->
<link rel="canonical" href="https://example.com/page" />

Case 4: Pagination

Problem:

https://store.com/products?page=1
https://store.com/products?page=2
https://store.com/products?page=3

Option 1 - Self-referencing canonical (each page canonicalizes to itself):

<!-- On page 2 -->
<link rel="canonical" href="https://store.com/products?page=2" />
<link rel="prev" href="https://store.com/products?page=1" />
<link rel="next" href="https://store.com/products?page=3" />

Option 2 - All-in-one canonical (all point to page 1):

<!-- On pages 2, 3, 4... -->
<link rel="canonical" href="https://store.com/products?page=1" />

Google recommendation: Self-referencing canonical.

Case 5: Separate mobile and desktop versions

Problem:

https://example.com/article          (desktop)
https://m.example.com/article        (mobile)

Solution:

<!-- On mobile version -->
<link rel="canonical" href="https://example.com/article" />

<!-- On desktop version -->
<link rel="alternate" media="only screen and (max-width: 640px)"
      href="https://m.example.com/article" />

Note: With responsive design this isn’t necessary.

Case 6: Syndicated content (guest posts, republished content)

Problem: You publish an article on your blog and then republish it on Medium.

Solution on Medium:

<link rel="canonical" href="https://your-blog.com/original-article" />

Result: Google gives credit to the original article, not the copy on Medium.

Correct canonical tag syntax

✅ Correct canonical

<head>
  <!-- ABSOLUTE URL (recommended) -->
  <link rel="canonical" href="https://example.com/page" />

  <!-- With protocol, domain, path -->
  <!-- Without unnecessary parameters -->
  <!-- Without fragments (#section) -->
</head>

❌ Incorrect canonical

<!-- ❌ BAD: Relative URL -->
<link rel="canonical" href="/page" />

<!-- ❌ BAD: With fragment (#) -->
<link rel="canonical" href="https://example.com/page#section" />

<!-- ❌ BAD: Without protocol -->
<link rel="canonical" href="//example.com/page" />

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

Self-referencing canonical

Concept: Each page points to itself as canonical.

Example:

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

Why is it useful?:

  1. Defensive prevention: Prevents accidental parameters from creating duplicates
  2. Scraping protection: If someone copies your content without changing canonical, Google still gives you credit
  3. Clarity for Google: Explicit signal of which is the preferred URL

Google recommendation: Use self-referencing canonical on ALL pages.

Canonical vs 301 redirect

Aspect Canonical 301 Redirect
Users See current URL Are redirected to new URL
Google Consolidates signals toward canonical Consolidates signals toward destination
Typical use Similar content accessible on multiple URLs URL permanently changed
Speed Faster (no redirect) Slightly slower
When to use Need to keep multiple URLs active Want to eliminate duplicate URL

Example - When to use each:

Product filters:
/products?color=red  → Canonical to /products ✅
(Users need to see filtered version)

Old URL that changed:
/old-page → 301 redirect to /new-page ✅
(Nobody should see /old-page)

Canonical on different platforms

WordPress

<!-- WordPress automatically adds canonical -->
<!-- Location: wp-includes/link-template.php -->

<!-- To customize: -->
<?php
add_filter('get_canonical_url', function($canonical_url, $post) {
    if (is_product()) {
        return 'https://example.com/custom-url';
    }
    return $canonical_url;
}, 10, 2);
?>

Shopify

<!-- In theme.liquid -->
{% if canonical_url %}
  <link rel="canonical" href="{{ canonical_url }}" />
{% endif %}

Next.js

// app/page.tsx
export const metadata = {
  alternates: {
    canonical: 'https://example.com/page',
  },
}

Vue 3 + Vite

<script setup lang="ts">
import { useHead } from '@vueuse/head'

useHead({
  link: [
    { rel: 'canonical', href: 'https://example.com/page' }
  ]
})
</script>

Common mistakes and how to avoid them

Mistake 1: Canonical points to URL with redirect

<!-- ❌ BAD: Canonical points to URL that redirects -->
<link rel="canonical" href="https://example.com/old-page" />
<!-- And /old-page does 301 redirect to /new-page -->

<!-- ✅ GOOD: Canonical points directly to final destination -->
<link rel="canonical" href="https://example.com/new-page" />

Mistake 2: Canonical on pagination always points to page 1

<!-- ❌ DEBATABLE: All pages canonical to page 1 -->
<!-- On page 2 -->
<link rel="canonical" href="https://example.com/products?page=1" />

<!-- ✅ BETTER: Self-referencing with prev/next -->
<!-- On page 2 -->
<link rel="canonical" href="https://example.com/products?page=2" />
<link rel="prev" href="https://example.com/products?page=1" />
<link rel="next" href="https://example.com/products?page=3" />

Mistake 3: Canonical and noindex on same page

<!-- ❌ BAD: Canonical + noindex together -->
<link rel="canonical" href="https://example.com/page-a" />
<meta name="robots" content="noindex" />

Problem: Contradictory signals. If you don’t want to index, why canonical?

Solution: Choose ONE:

  • If you want to consolidate signals → Use canonical (without noindex)
  • If you want to block indexing → Use noindex (without canonical)

Mistake 4: Canonical points to different URL with different content

<!-- ❌ BAD: Canonical points to unrelated content -->
<!-- On /product-shoes -->
<link rel="canonical" href="https://example.com/product-shirts" />

Problem: Google may ignore canonical if it detects pages are very different.

Rule: Canonical only for identical or very similar content.

Mistake 5: Forgetting to update canonical when changing URL

<!-- Page moved from /old to /new but canonical wasn't updated -->
<!-- On https://example.com/new -->
<link rel="canonical" href="https://example.com/old" />

<!-- ✅ CORRECT -->
<link rel="canonical" href="https://example.com/new" />

How to verify canonical with UXR SEO Analyzer

Our Chrome extension automatically checks:

  1. Canonical presence: Detects if it exists
  2. Absolute vs relative URL: Alerts if relative
  3. Canonical points to 404: Detects if canonical URL is broken
  4. Canonical with redirect: Identifies canonical that redirects
  5. Conflicts with robots: Detects canonical + noindex
  6. Multiple canonical tags: Alerts if there’s more than one

How to use the extension:

  1. Install UXR SEO Analyzer from Chrome Web Store
  2. Visit any page on your site
  3. Open extension → “Basic SEO” tab
  4. Review “Canonical URL” section
  5. Follow specific recommendations

Next steps

Deepen your knowledge about duplicate content control:

<<<<<<< HEAD

RAG References

This article was enhanced using authoritative sources identified through systematic knowledge base searches:

References

This article cites the following authoritative sources:

24a07d01237e8d2ce45f0032ef83094634b50223

[1] web.dev: Document Structure - Link Element (5b0b0ffb-f1c8-420a-afe8-07b637c60d5a) https://web.dev/learn/html/document-structure W3C-aligned HTML document structure guidance covering the canonical link element implementation within the document head. Appeared in 2 searches with scores of 1.025 and 0.850, providing consistent best practices for proper canonical tag placement and syntax following web standards.

[2] web.dev: Metadata - Canonical Tag Implementation (af77263a-3c46-44a6-9f5e-8d348b0af0a6) https://web.dev/learn/html/metadata Comprehensive HTML metadata implementation guide covering canonical tags, meta elements, and head section best practices. Score of 0.995 in Search 7 (“rel canonical tag HTML head”), ensuring proper metadata structure and W3C-aligned canonical tag usage.

[3] Google Search Central: Structured Data (684fd5e1-d274-4d03-af12-06cca89f4227) https://developers.google.com/search/blog/2019/09/tanya-tentang-search-data-terstruktur Official Google Search Central guidance on canonical URLs in the context of structured data implementation. Appeared in 2 searches with scores of 1.075 and 0.581, providing authoritative Google perspective on how canonical tags interact with search indexing and duplicate content consolidation.

<<<<<<< HEAD RAG Coverage: GOOD - Combines W3C-aligned best practices from web.dev (2 sources covering HTML structure and metadata) with official Google Search Central guidance. 3 sources across 2 knowledge bases (webdev and google_developers) providing comprehensive coverage of canonical URL fundamentals, proper implementation, and search engine treatment.

24a07d01237e8d2ce45f0032ef83094634b50223

External resources

Need to verify your canonical URL? Use our UXR SEO Analyzer extension to detect broken canonical, conflicts, and configuration errors.

Related articles

In the same category

Detailed guide

Canonical Url Guide

The canonical URL (canonical tag) is one of the most powerful and often misimplemented technical elements in SEO

Introduction

Robots Meta Tag Explained

The robots meta tag is an HTML instruction that controls how search engines index and follow links on specific pages