Create Canonical URL Tags

Canonical URLs help prevent duplicate content issues by specifying the "canonical", or "preferred", version of a web page as part of search engine optimization. Normally, search engines lower the rankings for pages that appear to be duplicates. Indicating that a page has a canonical URL helps preserve those rankings.

There are two ways that a search engine recognizes a canonical URL:
  • 301 redirects from URLs to a canonical URL. For example: if www.test.com, test.com, and www.example.com/index.html have 301 redirects to example.com/home.asp, then example.com/home.asp is a canonical URL.
  • A canonical URL tag is included in the header of multiple pages. For example, if test.com, and www.example.com/index.html have canonical URL tags in their header to example.com/home.asp, then example.com/home.asp is a canonical URL.
A canonical URL tag is included as a link element in the header of an HTML page. For example: <link rel="canonical" href="http://www.company.com" />

A canonical URL tag is often the easier way of establishing a canonical URL, especially for Salesforce B2C Commerce pages, where similar content might have different URLs depending on the category navigation, search feature, or landing page used to find the content. In the SiteGenesis application, canonical URL tags are standard. However, if your storefront is based on a previous code version, you must alter your templates to include canonical URLS.

  1. In the pt_productsearchresult.isml template, include the following code in the <head> tag:
    <isif condition="${(pdict.CurrentHttpParameterMap.cgid.submitted && pdict.CurrentHttpParameterMap.cgid.value != '')}">
    <link rel="canonical" href="${URLUtils.abs('Search-Show','cgid', pdict.CurrentHttpParameterMap.cgid)}" />         
    </isif>
  2. In the pt_productdetails.isml template, include the following code in the <head> tag:
    <link rel="canonical" href="${URLUtils.abs('Product-Show','pid', pdict.Product.ID)}"/>

Creating Canonical Links for Base Products

Salesforce recommends creating canonical links to a base product for it's all variation product to preserve or improve rankings for the product. You might need to implement this differently, depending on how your application is configured. If your application is based on SiteGenesis, you can edit the pt_productdetails.isml template and include the following code to implement a canonical URL link for product variations:

<iscomment>Determine if the product is a variation product and if so use the ​ base product as the Canonical Link, will help SEO for color slicing</iscomment>
<isif condition="${pdict.Product.isVariant}">
                <link rel="canonical" href="${URLUtils.abs​('Product-Show','pid', pdict.Product.variationModel.master.ID)}"/>
<iselse>
                <link rel="canonical" href="${URLUtils.absβ€Œ('Product-Show','pid', pdict.Product.ID)}"/>     
</iselse>
</isif>