Canonical URLs - HTML Canonical Links for SEO

Understanding Canonical URLs

A canonical URL identifies the preferred address for a webpage when the same or substantially similar content can be reached through more than one URL.

In HTML, a canonical URL is commonly specified with a <link> element in the document's <head>. It helps search engines consolidate signals associated with duplicate or similar URLs and select the address that should generally represent the content in search results.

The Canonical Link Element

A canonical URL can be specified with a <link> element using rel="canonical". The element belongs inside the document's <head>.

<head>
  <link rel="canonical" href="https://www.example-web.site/gardening/growing-tomatoes.html">
</head>

The href attribute identifies the URL that the page recommends as the preferred version of the content.

The canonical element does not create a visible link on the webpage and does not redirect a visitor to another address.

Why Canonical URLs Are Useful

The same content can sometimes be available through several URLs. Without a clear preferred version, search engines may need to determine which URL should represent the content.

https://www.example-web.site/gardening/growing-tomatoes.html
https://www.example-web.site/gardening/growing-tomatoes.html?source=newsletter
https://www.example-web.site/gardening/growing-tomatoes.html?ref=homepage

If these addresses display substantially the same page, the primary URL can be identified as canonical.

<link rel="canonical" href="https://www.example-web.site/gardening/growing-tomatoes.html">

Canonicalization helps search engines group duplicate or similar URLs and consolidate signals such as links associated with those versions.

How Duplicate URLs Occur

Duplicate URLs do not necessarily mean that someone intentionally created duplicate webpages. A website's structure or software can make the same content accessible through several addresses.

Common causes include URL parameters used for tracking, filtering or sorting, alternate paths to the same content, and different versions generated by a content management or ecommerce system.

/products/garden-tools.html
/products/garden-tools.html?sort=price
/products/garden-tools.html?source=email

Whether these URLs are actually duplicates depends on the content they return. Canonical URLs should be used when another URL genuinely represents the same or substantially similar content, not simply because two pages discuss the same general subject.

Self-Referencing Canonical URLs

A page can identify its own URL as canonical. This is commonly called a self-referencing canonical.

<link rel="canonical" href="https://www.example-web.site/gardening/growing-tomatoes.html">

When this element appears on that exact page, it clearly identifies the intended primary URL even if alternate versions later become accessible through parameters or other paths.

Self-referencing canonical links are not required for every page to function, but using them consistently can make the preferred URL explicit.

Use Absolute Canonical URLs

Canonical links can technically use relative URLs, but using a complete absolute URL reduces ambiguity and makes the intended canonical address clear.

A complete canonical URL includes the scheme and hostname:

<link rel="canonical" href="https://www.example-web.site/gardening/growing-tomatoes.html">

Compared with:

<link rel="canonical" href="/gardening/growing-tomatoes.html">

Using the complete preferred address also makes it easier to verify details such as HTTPS, hostname, directory path, and filename.

Keep Canonical Signals Consistent

A canonical link works best when other parts of the website support the same preferred URL.

For example, if the canonical URL is:

https://www.example-web.site/gardening/growing-tomatoes.html

Internal links should normally point directly to that URL rather than repeatedly linking to parameterized or alternate versions of the page.

Sitemaps should also use preferred URLs where practical. Consistent signals make it clearer which address the website considers the primary version.

Canonical URL or Redirect?

A canonical link and a redirect solve different problems. A canonical link allows multiple URLs to remain accessible while indicating which URL should represent duplicate or substantially similar content.

A redirect sends visitors and search engines from one URL to another.

If an old page has permanently moved and there is no reason for the old address to remain independently accessible, a permanent server-side redirect is usually more appropriate than relying only on a canonical link.

Old URL:
https://www.example-web.site/gardening/tomatoes.html

New URL:
https://www.example-web.site/gardening/growing-tomatoes.html

In this situation, the old URL can permanently redirect to the new URL, while the new page can identify itself as canonical.

Canonical URL or Noindex?

Canonicalization and noindex also serve different purposes. A canonical link recommends which URL should represent a set of duplicate or substantially similar pages, while noindex requests that a page not appear in search results.

<meta name="robots" content="noindex">

Do not treat noindex as a substitute for canonicalization when the goal is to consolidate duplicate URLs around a preferred version.

The next SEO tutorial on Robots Meta Tags covers noindex and other robots controls in greater detail.

Cross-Domain Canonical URLs

A canonical URL can point to a page on another domain when substantially similar content is legitimately published in more than one location.

<link rel="canonical" href="https://www.example-web.site/original-article.html">

For example, content that is republished by another authorized website can identify the original version as canonical.

Cross-domain canonicalization should be used deliberately because it tells search engines that another URL is the preferred version of the content.

Canonical URLs Are a Signal

A canonical link communicates the website owner's preferred URL, but search engines can consider other signals when selecting a canonical page.

If several signals conflict, a search engine may select a different canonical URL. For example, problems can occur when a page declares one canonical URL while internal links, redirects, or sitemaps consistently indicate another.

For this reason, canonical markup should be part of a consistent website structure rather than treated as a command that overrides every other signal.

Common Canonical URL Mistakes

Mistake	Better Approach
Canonical points to an unrelated page	Canonicalize only duplicate or substantially similar content.
Multiple conflicting canonical links	Identify one clear preferred canonical URL.
Canonical points to a broken URL	Use a valid and accessible preferred URL.
Canonical points to a redirected URL	Point directly to the final preferred URL when possible.
Internal links use alternate URLs	Link directly to the preferred canonical version.
Using canonical instead of a needed redirect	Use a permanent redirect when a page has permanently moved.
Using `noindex` as canonicalization	Use canonicalization when the goal is to identify a preferred duplicate URL.

Canonical URL Example

The following example shows a complete document head containing a page title, meta description, and self-referencing canonical URL.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Growing Tomatoes - Beginner Gardening Guide</title>
  <meta name="description" content="Learn how to grow tomatoes with practical information about planting, watering, feeding, support, and harvesting.">
  <link rel="canonical" href="https://www.example-web.site/gardening/growing-tomatoes.html">
</head>
<body>
  <main>
    <h1>Growing Tomatoes</h1>
    <p>Learn how to plant, care for, and harvest healthy tomato plants.</p>
  </main>
</body>
</html>

The canonical URL identifies the preferred address for the document. If tracking parameters or another duplicate URL lead to the same content, the canonical can continue to identify the primary version.

Best Practices

Use canonical URLs when duplicate or substantially similar content can be reached through multiple addresses.
Place the HTML canonical <link> element inside the document's <head>.
Identify one clear preferred URL for the content.
Use complete absolute URLs for canonical links to reduce ambiguity.
Consider self-referencing canonical links to make preferred URLs explicit.
Keep internal links, redirects, sitemaps, and canonical URLs consistent.
Point canonical links to valid preferred pages rather than broken or redirected URLs.
Do not canonicalize pages merely because they cover related subjects.
Use a permanent redirect when an old URL has permanently moved and no longer needs to remain independently accessible.
Do not use noindex as a substitute for canonicalization.
Remember that search engines can consider multiple signals when selecting the canonical URL.

Summary

Canonical URLs help identify a preferred address when the same or substantially similar content is available through multiple URLs. In HTML, the preferred address can be specified with a <link rel="canonical"> element in the document's <head>.

Use canonicalization consistently with internal links, redirects, and other site signals, and use permanent redirects when content has actually moved. Next, we will look at robots meta tags and how they provide search engines with instructions about indexing and search-result behavior.