UXR SEO Analyzer documentation

Introduction

Canonical URL

5 min read
View contents

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:

References

This article cites the following authoritative sources:

[1] web.dev: Document Structure - Link Element https://web.dev/learn/html/document-structure W3C-aligned HTML document structure guidance covering the canonical link element implementation within the document head. Provides consistent best practices for proper canonical tag placement and syntax following web standards.

[2] web.dev: Metadata - Canonical Tag Implementation https://web.dev/learn/html/metadata Comprehensive HTML metadata implementation guide covering canonical tags, meta elements, and head section best practices. Ensures proper metadata structure and W3C-aligned canonical tag usage.

[3] Google Search Central: URL Canonicalization https://developers.google.com/search/docs/crawling-indexing/canonicalization Google’s official documentation on canonicalization: how Google picks the canonical URL among duplicates, which signals it weighs — rel="canonical" included — and why its choice may differ from the one you declare.

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

Implementing Canonical URLs: Methods and Complex Cases

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

Introduction

Robots Meta Tag

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

Detailed guide

URL Structure Optimization Guide

Optimizing your URL structure is fundamental to both technical SEO and international expansion

Last updated: