How to Add a Canonical Link in HTML
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:
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.
<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.
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.
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 Google Search Console 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:
<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.