You’ve seen it on the web.
Table of Contents
You may even use it yourself, but do you know what it is?
In this article by expert website developer we will tell you how to correctly implement the rel=”canonical” tag in your website and why it’s so important.
So let’s get started.
What is a Canonical Tag?
As web development company experts will tell you, the canonical tag is used to specify the preferred URL of a page. The tag prevents duplicate content and stops search engines from indexing multiple pages with the same content.
For example, if you have two identical pages except for the URL, they may be listed as separate pages in search results. The Canonical Tag can specify which one should be preferred over the other.
When should you use a canonical tag?
Search engines use canonical tags to avoid duplicate content issues and provide a better user experience by showing them the most relevant result in their search results when they search for similar content.
If you want to set up canonical tags for your site, then here are some reasons why you should do it:
- SEO Benefits: As mentioned above, canonical tags help search engines and users to know which version of a page is the original one. If there is more than one URL with the same content on your website, it will be difficult for Google or other search engines to decide which URL should rank higher. So by setting up canonicals for each URL with different parameters (i.e., different query strings), it will help Google identify which version is original and return it in its search results list along with other URLs that point towards this particular page; this way there won’t be any duplicate content issues, and users will get their desired result in their search results list.
- Better User Experience: By using canonicals on your website, you’re making sure that users get to see only the best versions of pages they’re looking for on your website; this also improves their user experience because they don’t have to navigate through multiple pages before finding what they’re looking for.
What does a canonical tag look like?
A website developers in mumbai canonical tag is a simple way to tell search engines which version of your content is the original. It looks like this:
<link rel=”canonical” href=”http://example.com/article-2″ />
The link element has a single attribute, rel.
The value of that attribute is canonical.
The href attribute contains the URL for the page you want to identify as the original.
That’s it!
How to implement canonical tag?
There are four ways to specify canonical URLs. These are known as canonicalization signals:
- HTML tag (rel=canonical)
- HTTP header
- Sitemap
- 301 redirect*
Setting canonicals using rel=“canonical” HTML tags.
The rel=canonical tag is the easiest way to specify a canonical URL.
Add this code to the <head> section of any duplicate page:
<link rel=“canonical” href=“https://example.com/canonical-page/” />
Example
Let’s say you have an ecommerce website selling red shirts. You want to set up your content so that users are redirected to https://yourstore.com/shirts/red-shirts/ when they click on any content or links related to red shirts, even though that page’s content is accessible via other URLs (e.g., https://yourstore.com/offers/red shirts).
Simply add the following tag to any duplicate pages:
<link rel=“canonical” href=“https://yourstore.com/shirts/red-shirts/” />
Remember that if you’re using a CMS, you don’t need to touch the code of your page. There’s an easier way!
- How to set up canonical tags in WordPress.
The experts at leading website developers in mumbai recommend that you install the Yoast SEO plugin. This plugin will automatically add self-referencing canonicals to your site. Go to the “Advanced” tab on each post and page to set custom canonicals.
- How to set up canonical tags in Shopify.
Shopify, by default, adds self-referencing canonical URLs to product and blog post pages. You can set custom canonical URLs by directly editing template (.liquid) files. To know more about it, go to Shopify.
Setting canonicals in HTTP headers
Although you can’t place canonical tags in PDFs, which do not have a <head> section, you can use HTTP headers to set canonicals. You can also use canonical HTTP headers on standard web pages.
For example, let’s imagine we’ve created a PDF version of this post and hosted it in our blog subfolder.
Here’s how our HTTP header will look for that file:
HTTP/1.1 200 OK
Content-Type: application/pdf
Link: <https://example.com/page.html>; rel=”canonical”
Setting canonicals in sitemaps
Google recommends that only canonical URLs—the Web pages you want to be indexed—be listed in your sitemap. This is because Google views the pages listed on a sitemap as suggested canonicals and uses them.
However, it’s not always the case that they will choose URLs in sitemaps as canonicals.
Setting canonicals with 301 redirects
When you want to divert traffic away from a duplicate URL to the canonical version, use 301 redirects.
For example, if your website is reachable at these URLs:
- example.com
- example.com/index.php
- example.com/home/
Choose a single URL as your site’s canonical, and redirect all URLs leading to that page.
You should do the same for secure HTTPS and HTTP versions of your site. Please choose one canonical version of a page and redirect the other versions to it.
For example, the HTTPS version of example.com (https://example.com) is the canonical version of the site; all of the following URLs redirect there:
http://example.com/
http://www.example.com/
https://www.example.com/
Canonical tags vs 301 redirects
One common question about search engine optimization is whether canonical tags pass link equity (PageRank, Authority, etc.) like 301 redirects. In most cases, they do, but this is a complicated question. Remember that these two approaches produce very different results for search crawlers and site visitors.
If you 301 redirect Page A–>Page B, search engines will treat Page B as the canonical version of your site, but human visitors will not be redirected. If you rel-canonical Page A–>Page B, search engines will know that Page B is the canonical version of your site, and people will also be able to visit both URLs. Make sure your solution is appropriate for the outcome you’re seeking.
Canonicalization best practices
- Use absolute URLs
Use absolute URLs whenever possible instead of relative URLs. This helps to ensure that if your site changes its location or moves pages around in your site, the links will still work. If you use relative URLs and then change the location of a page or file, all references to those files will break and require manual action on your part.
- Use lowercase URLs
To avoid Google treating uppercase and lowercase URLs as two different URLs, ensure your server forces all URLs to be lowercase before using lowercase URLs in your canonical tags.
- Make sure to use the correct version (HTTPS vs HTTP).
If you set up SSL on your site, ensure that you don’t include any HTTP URLs in your canonical tags. Doing so can theoretically lead to confusion and unexpected results if someone visits your page via an HTTP URL and sees different content than they would see if they visited your page via an HTTPS URL.
<link rel=“canonical” href=“https://example.com/sample-page/” />
As opposed to:
<link rel=“canonical” href=“http://example.com/sample-page/” />
- Make sure that the home page of your site is properly canonicalized.
Since homepages are often duplicated, and people may link to your homepage in different ways, it’s good to use a canonical tag on your homepage template to prevent unforeseen problems.
- Use self-referential canonical tags.
Use a self-referential canonical tag if you have multiple pages with similar content. This will tell search engines that you want to consolidate URLs into one canonical version of the content.
For example, if you have two pages with similar content and you want to consolidate them into one URL, add a 301 redirect from one page to another. Then add the rel=”canonical” tag to the original page and point it at the consolidated version:
<link rel=”canonical” href=”http://example.com/page-1″>
- Avoid mixed signals
If you send mixed signals to search engines about what page to rank, they may not rank on either page well. In other words, if you canonicalize page A -–> page B and then 301 redirect page B -–> page A, don’t also canonicalize page A -–> page B. Likewise, if you canonicalize page A -–> page B, don’t 301 redirect page B -–> page A. It’s also generally not a good idea to chain canonical tags (A-–>B, B-–>C, C–->D) if you can avoid it. Send clear signals, or search engines will have to guess.
- Canonicalize cross-domain duplicates
If you control both domains, you can tag the non-canonical versions with the canonical tag. For example, let’s say you’re a publishing company that often publishes the same article across half a dozen sites. Using the canonical tag will concentrate your ranking power on a single website. Remember that canonicalization will prevent any non-canonical versions from ranking, so make sure this use matches your business case.
Common canonicalization mistakes to avoid
- Blocking the canonicalized URL via robots.txt
One of the most common mistakes, according to experts at a leading website development company, is blocking the canonicalized URL from search engine bots using a robots.txt file. If you’re using rel=”alternate” and rel=”canonical”, you want to ensure that search engines can access both URLs on your site. If they can’t access either URL (or can only access one), then there’s no way for them to know which one should be indexed and which should not be indexed.
- Setting the canonicalized URL to ‘noindex.’
Don’t mix the noindex and rel=canonical directives. They contradict each other.
Google will usually prioritize the canonical page over its duplicate with a ‘noindex’ tag. But it’s still bad to practise using both. Use a 301 redirect to noindex and canonicalize a URL. Otherwise, use rel=canonical.
- Canonicalizing all paginated pages to the root page
Paginated pages should not be referenced by a canonical tag in the head of their respective HTML documents. Instead, self-referencing canonicals should be used on all paginated pages.
Use rel=prev/next tags for pagination. Google no longer uses them, but Bing still uses them.
- Not using canonical tags with hreflang
Hreflang tags are used to specify the language and location of a webpage.
Google suggests using hreflang annotations to specify a canonical page in the same language or the best possible substitute language if a canonical doesn’t exist for the same language.
- Having multiple rel=canonical tags
It’s important not to insert multiple rel=canonical tags on a page. This happens because tags are inserted into a system at different points, such as by the CMS, the theme, and the plugin(s). This is why many plugins have an overwrite option meant to ensure they are the only source for canonical tags.
Including a rel=canonical tag in JavaScript-initiated AJAX requests can sometimes cause issues. If you have no canonical URL specified in the HTML response and then add a rel=canonical tag with JavaScript, it should be respected when Google renders the page. However, if you have a canonical specified in HTML and swap the preferred version with JavaScript, you send mixed signals to Google.
- Rel=canonical in the <body>
The rel=canonical link should only appear in the <head> section of a document. A canonical tag in the <body> section will be ignored.
Although it is good practice to include the rel=”canonical” tag in the correct location when a page is constructed in a browser or rendered by a search engine, many things such as unclosed tags, JavaScript injected, or iframes in the head section can cause the <head> to end prematurely while rendering. In these cases, a canonical tag may be accidentally thrown into the <body> of a rendered page where it will not be respected.
Conclusion
Now that you know what a canonical tag is, when should you use it? When should you use a 301 redirect? For all instances, there is no hard and fast rule. Whether you implement a canonical tag or a 301 redirect (or both) depends on the type of duplicate content that exists on your site and the preference of your web developer or site administrator. But now that you’re armed with some new knowledge about canonical tags, it’s time to give them a try.
You never know if they might just help clean up your website and improve its search engine results page rankings. For a website whos target audience belong to different region and language they need hreflang tag if you want to know about it check out our blog the ultimate guide to hreflang tags: what it is & how to implement it?
We were looking for this information and landed here and literally this is worth sharing.
We are so glad to know our blog was helpful for you.
Nice information about web design and development thanks for sharing this article.
We are glad you liked the blog.
Thank you for sharing such an informative blog on Rel=canonical. It helped me to know in detail about Canonical Tag and why should we use them, how does a canonical tag look like, and the importance of Canonical tags vs 301 redirects.
Hello Ritika, we are glad you found the blog informative. Do check out our recent blog: 2022 Image Metadata & All You Need To Know About It!