Understand canonical tags

Each of your web store pages has a canonical link (or tag) embedded within the head section code. This link signals the source, or original, URL of a page to search engines.

Use canonical links

When a given page on your web store can be accessed via several URLs, then the canonical link indicates to search engines which version of that page is the original version. This is also the case when there are multiple pages with different URLs containing only slight content variations.

The use of canonical links within your web store pages improves search engine rankings as search engines use them to consolidate links to duplicate, or similar, content. This means they assign a higher ranking value to those pages marked as the source URL.

An example of how this may look on your site is outlined below.

Say a robot lands on the following link:

http://www.mystore.com/shoes/category/mens_shoes

In the <head>, this page might include the canonical URL

<html>
<head>
<link rel="canonical" href="http://www.mystore.com/shoes/category/mens_shoes">

If a robot follows a link somewhere that lands the same page, but with a different address, such as:

http://www.mystore.com/footwear/category/mens_shoes

The canonical URL would point to the first category.

<html>
  <head>

           <link rel="canonical" href="http://www.mystore.com/shoes/category/mens_shoes">

Use canonical and pagination tags

Commerce provides two different pagination layouts: numeric (default), or rel="next" and rel="prev" links.

For the first page in a sequence on the numeric pagination layout, you will see a normal request for the category page and a request for page zero of the sequence. Zero should be used to display the first batch of content on the product listing pages. All canonical tags on paginated pages in a sequence should be self-referential, so the URLs might look like www.example.com/category/c1234, www.example.com/category/cshoes/2, www.example.com/category/c1234/3, and so on. The rel=canonical attribute for “/1” will point to the page zero category page URL.

If the page type is ‘Article’ then a non-parameterized self-reference is added.

Each shopping and article page contains a <link> element with the attribute rel="canonical". If the page type is:

‘Home’ then the canonical attribute points to https://www.hostname.domain.
‘Product’, then a self-reference is added to the non-parameterized version of that product detail page.
‘Collection’, then canonical elements are added based on whether or not the listing includes pagination, as described earlier: page zero, page /2, page /3, and so on.

The pagination layout with the HTML attributes rel="next" and rel="prev" indicate to search engines that the relationship between individual URLs should follow a logical sequence. These are automatically added when there is more than one page displaying items from one Collection.

If there is a previous page in the sequence, you will see the rel="prev" element referring to the previous page.

If there is a next page in the sequence, you will see the rel="next" element referring to the next page.

Therefore, aside from page “zero” and the last page in a given sequence, all in-between compound pages will contain both rel=”prev” and rel=”next”.

Making changes to your pagination configurations can result in some of the subsequent URLs being inaccessible to search engines. For example, you may want to use an infinite scroll to load additional items in a Collection, however, search engine crawlers do not scroll so everything that appears after an event of scrolling will not be discovered by the crawler. Therefore, you should not remove your pagination links from mobile views, and prior to your site launch you should always verify they work. The numeric pagination layout provides optimal SEO for all store types, whereas the rel="next" and rel="prev" links work best where there are 1 or 2 paginated pages.

Use canonical and language tags

When at least one additional storefront language exists, then the 'hreflang' tag is added to all pages. Regardless of whether a multi-lingual store uses directories or subdomains, 'hreflang' annotations must be used as these signal the relationship between multi-lingual sites. Canonical tags across different language sites should always be self-canonical.