How to Add a Canonical Link in HTML
Tags: html, beginners, webdev
Published: 2021-11-07 16:20:00

Canonical links are one of the most important parts of technical SEO.

They help search engines understand how to handle duplicate content on your website. Without them, you might face duplicate content penalties that have a devastating impact on your rankings in search.

Here is what we will cover:

- <a href="#canonical-links">Adding canonical links</a>
- <a href="#how-canonical-links-work">How they work</a>
- <a href="#using-canonical-links">When you should use them</a>



<a name="canonical-links" id="canonical-links"></a>

---

## How to Add Canonical Links to Your Website

The canonical link belongs in the `<head>` section of your website.

This is what it looks like.

```html
<link rel="canonical" href="https://testsuite.io" />
```

Placing this tag on a page tells search engines that the original copy of this content lives at the address listed in the `href` attribute.

Any links or ranking juice that was pointing to the current page will then be directed to the link supplied in your canonical tag.

Now, you can have multiple similar pages. Instead of Google punishing you for duplicating content, all of your backlinks will be combined in a sense and boost the reputation of the original page.

<a name="how-canonical-links-work" id="how-canonical-links-work"></a>

---

## How the Canonical Tag Works

The HTML `<link>` tag is a self-closing or empty tag. It expects you to supplier the `rel` attribute and the `href` attribute.

The `rel` attribute is used to tell the relationship between the document and the linked resources. In other words, we give the browser a link, it needs to know what to do with it. When we defined the link as `rel="canonical"` search engines know how to respond.

The `href` attribute tells us the actual link to reference. If you're curious, it's short for Hypertext REFerence, and gives us a Hyperlink that can be followed by the Hypertext Transfer Protocol (HTTP).

In short, the `<link>` tag defines a relationship to an external resource (in our case the original source of content). 

The `rel="canonical"` attribute tells us what type of relationship this resource has (it's a canonical link). 

And the `href="https://testsuite.io"` tells us the external reference.

<a name="using-canonical-links" id="using-canonical-links"></a>

---

## When to Use a Canonical Link

My advice is to ALWAYS use a canonical link.

Why you might ask?

Because first, it doesn't hurt your search rankings. And second, you can't control what backlinks are created to your website.

Let's dig into a real example from my search analytics.

### Here's what happens when you don't use a canonical link.

You can go use the <a href="https://search.google.com/search-console/about" target="_blank">Google Search Console</a> to analyze how your website is performing in search.

It will show you all of your current issues and point out what needs to be fixed.

When you click into the Coverage dashboard, you will probably see a number of links are excluded from search. If you dig into this list you will probably discover this error:

> Duplicate without user-selected canonical

This means Google discovered duplicate content that doesn't have the appropriate canonical tag.

My problem was... this "duplicate content" was literally the same page as the original. It just had some query parameters at the end of the link.

```
https://testsuite.io/send-emails-from-rails

vs

https://testsuite.io/send-emails-from-rails?ref=testsuite&filter=true
```

This is what I mean by users creating backlinks you have no control over.

To fix this I just needed to make sure all of my articles had proper canonical links to themselves.

Like this:

```html
<link rel="canonical" href="https://testsuite.io/send-emails-from-rails"/>
```

And now we're good, no more duplicate content issues!

Adding a canonical tag to all of your pages will protect you from accidentally creating duplicate content. 

And in the long run, should have a significant impact on your search rankings.