The Canonical Tag
The <link> tag with the rel="canonical" attribute is used to set the so-called canonical URL or the preferred URL for our page.
The syntax
The canonical tag is placed inside the <head> section of our page and has the following syntax:
<link rel="canonical" href="https://www.example.com/this_page.html">
Note: Replace https://www.example.com/this_page.html with the actual URL of your page.
The canonical link tag tells search engines what the preferred address/URL for your page is. The href attribute specifies that actual address/URL.
Usage
A web page (or a route) should have a self-referencing canonical tag. For example, the about.html page should have the following canonical code in its <head> section:
<link rel="canonical" href="https://www.example.com/about.html">
The contact.html page should have the following canonical metadata:
<link rel="canonical" href="https://www.example.com/contact.html">
With the index.html file, things are a bit different. The index.html file is usually displayed as the root/first page of our website, so the canonical tag for an index file should be the domain root:
<link rel="canonical" href="https://www.example.com/">
Note: Replace https://www.example.com/ with your website's address.
The full page
To demonstrate the use of the canonical tag, we will create a new HTML file, called my_page.html. This page has the required metadata, plus the canonical link:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Page Title</title>
<link rel="canonical" href="https://www.example.com/my_page.html">
</head>
<body>
</body>
</html>
If we include all the metadata from our previous tutorials and then add the canonical link, the full source code looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Page Title</title>
<meta name="description" content="A short description summarizing the content on this web page.">
<meta name="author" content="Sample Name">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="canonical" href="https://www.example.com/my_page.html">
</head>
<body>
</body>
</html>
The www and the non-www version
Please note that https://www.example.com and https://example.com are two different URLs from the search engine standpoint. That is why you need to pick one and use that URL as part of your canonical URLs in all pages. If you opt for a www version, your page would have the following canonical URL:
<link rel="canonical" href="https://www.example.com/my_page.html">
Or:
<link rel="canonical" href="https://www.example.com/my_other_page.html">
If you opt to use the non-www version, your canonical URLs should look like the following:
<link rel="canonical" href="https://example.com/my_page.html">
Or:
<link rel="canonical" href="https://example.com/my_other_page.html">
Summary
It is recommended to include a canonical tag on all your pages as this metadata informs search engines of the preferred canonical URL/address for each page. Also, avoid having duplicate canonical addresses across multiple pages.
