HTML rel="canonical"

A rel="canonical" attribute value on a <link> tag specifies the preferred URL for the current page. This attribute value prevents duplicate URL issues.

Example

#

A rel="canonical" on a <link> element.
The href value represents the preferred URL for the current page.

<head>
  <link rel="canonical" href="www.mycompany.com/products">
</head>

Using rel="canonical"

The rel attribute defines the relationship between the current page and the linked page or resource.

The rel="canonical" value tells search engines that the href value is the 'official' URL of the page.

The biggest benefit is for SEO purposes as this prevents multiple URLs for the same content or page.

Example

Potential duplicates for url www.mycompany.com/products include:

  • http://www.mycompany.com/products
  • http://www.mycompany.com/products/
  • https://www.mycompany.com/products
  • https://www.mycompany.com/products/
  • www.mycompany.com/products
  • www.mycompany.com/products/
  • mycompany.com/products
  • mycompany.com/products/

All are valid urls referencing the same content, but automatic readers see these urls as different.

Building consistent URLs and avoiding duplicates increases the quality of SEO data that can be collected.


Syntax

<link rel="canonical" href="url" />

Elements that accept rel="canonical"

Only one element accepts the canonical value on the rel attribute.

Elements Description
<link> Specifies a resource to the current page -- see example above

Browser support

Here is when rel support started for each browser:

Chrome
6.0 Sep 2010
Firefox
4.0 Mar 2011
IE/Edge
12.0 Jul 2015
Opera
11.1 Mar 2011
Safari
5.0 Jun 2010

You may also like

Guides