Sitemap

What is canonical tag?

A canonical tag is an HTML element. If there will be same or similar content available under different URL, canonical tag use to specify which version is the main.

A canonical tag can be placed in the head section of a webpages HTML code, to tells search engines robots that the content of the specified page should be given to the page specified in the tag, rather than to the page on which the tag is placed. This can help search robots in resolving issues with multiple pages on a website that have similar or duplicate content and helps to understand which page should be indexed and returned in search results.

Importance of canonical tag

Canonical tags are an important code for website because it help to know duplicate content issues, which can negatively impact a site's search engine rankings. A few key ways that canonical tags can help improve a site's SEO.

• Preventing duplicate content: Due to multiple pages on a website, which have similar or identical content, search engines getting difficult to determining which page should be indexed and returned in search results. By using canonical tags, it can be specify the preferred version of a page, helping search engines understand which page should be indexed and shows in search results.
• Consolidating link equity: Due to multiple pages on a website, which have similar or identical content, it can be difficult to develop website and to maintain strong search engine rankings. By using canonical tags to consolidate link equity on a single page, help improve the search engine rankings of that page.
• Simplifying tracking and analysis: Due to multiple pages on a website, which have similar or identical content, it can be difficult to track and survey the performance of each page. The canonical tags use to consolidated data and metrics on a single page, can simplify tracking and analysis, making it easier to understand and improve a site's performance.
• Handling paginated content: If there is paginated content, it's important to use rel="next" and rel="prev" tags in addition to canonical tags. This is to specify the relationship between component URLs and help search engines understand that the pages are part of a series and should be consolidated.
• Handling mobile and desktop versions: When a website is develop in seperate mobile and desktop versions, Canonical tag use to specify which version is the preferred one, so that search engines can consolidate the data and show the correct version for the user.

How to write canonical tag?

The basic code of a canonical tag is as follows.

					
<link rel="canonical" href="http://www.example.com/page-name.html" />


					

In the above example, http://www.example.com/page-name.html is the URL of the webpage, tell search engines robots to page index.
The href attribute of the tag should be written in the full URL of the webpage, including the http or https protocol. The specified URL should be accessible and returns a 200 HTTP status code.

To specify the canonical URL for a webpage of same website, the relative URL of the page use as given below

					
<link rel="canonical" href="/page-name.html" />
					
					

The canonical URL can also use for a page on another website, if the website owner allow and the URL is accessible.

					
<link rel="canonical" href="http://www.example2.com/preferred-page.html" />
					
					

It's generally a good practice to include a self-referencing canonical tag on all pages of website to avoid any confusion and specify the preferred version of the page

How to define mobile page version in canonical tag?

To specify the preferred version of a mobile page in a canonical tag, use the rel="canonical" link element in the head of the HTML code for the mobile page, and specify the URL of the corresponding desktop version in the href attribute.

An example given below of how the canonical tag would look for a mobile page.

					
<link rel="canonical" href="http://www.example.com/desktop-page.html" />
					
					

In this example, the mobile page is shows that the desktop version of the page at desktop-page.html is the preferred version to be indexed by search engines.
Alternatively, use the link element on the desktop page, and specify the mobile page URL with the rel="alternate" and media="only screen and (max-width: 640px)".

					
<link rel="alternate" media="only screen and (max-width: 640px)"
href="http://www.example.com/mobile-page.html">
					
					

In this way, tag telling to search engines that the mobile version of the page at "http://www.example.com/mobile-page.html" is an alternative for the desktop version for users who are on mobile devices.

When using the rel="alternate" method, it is recommended to also use the rel="canonical" method on the mobile version, to specify that the desktop version is the preferred one.

The URLs which specified in the href attribute are accessible and return a 200 HTTP status code.

Conclusion: canonical tags help search engines understand the structure of the website and the preferred version of a page, which can improve your site's search engine rankings, simplify tracking and analysis, and prevent duplicate content issues.