Canonical Tag is also known as canonical URL or URL canonicalization. It is incorporated in the HTML code of a webpage to show the original source of content. So, it is an HTML element that is used to prevent duplicate content issues. It specifies the canonical URL "the preferred version" of a web page and tells search engines that the other similar URLs are not different or duplicates; they are one and the same. Thus, it prevents the issues that arise when the same content appears on multiple URLs, which may be due to one of the following reasons.
Canonical Tags have simple and consistent syntax and are placed within the <head> section of a web page. It appears as rel="canonical".
For example: <link rel="canonical" href=https://example.com/sample-page/"/>
The meaning of each part of the code:
1. link rel= "canonical": The link contained in this tag is the original (canonical) version of this page.
2. href="https://example.com/sample-page/": You can visit this URL to find the canonical version.
Search engines like Google don't like duplicate content. It creates confusion for them, here's how:
1. Google does not know which version of a page to index out of multiple pages.
2. Which page to rank for queries.
3. Whether consolidate link equity on one page or split it among multiple versions.
4. Furthermore, too many duplicate pages can also affect the "crawl budget." Google may waste time crawling different URL with similar content instead of discovering other new pages on your website.
So, you must use a canonical URL if you have two or more pages of similar content on your website or if the content of your site is also used on another site. In this way, you can point Google to the original content and make sure the main page gets all of the credit and SEO benefits.
See the following example of product page duplication of an e-commerce company;
In the image shown above, there are three product pages for the same product "yellow toy car". These pages have the same content except the breadcrumb links. So, with the help of canonical tag we can mark one page as canonical version and eliminate two of the copies.
In the above image, using the canonical tag, we have informed the search engine to consider the page located at [ http://www.example.com/toys/cars/yellow] as the original page and the other two URLs as variations of the original page.
So, if your site displays the same content on multiple URLs, then by using the canonical tag, you can select the one URL as canonical version and can clear that other URLs are not the duplicates. See one more example given below:
Now, to show the main page as canonical a version, we can place a canonical tag that references the main page( http://www.example.com) in the header of the other two URLs. See the related image shown below;
You can apply this tag by adding a link tag to the head of the HTML code of the page that you want to be recognized as canonical by the search engine, e.g. to designate www.cfamily.com with the canonical tag, the code will look like as shown below;