How to Add Canonical URLs in Magento 2

Search engines such as Google often index multiple URLs inside your store with identical content, and this is not good for the ranking of your store as duplicated pages are considered bad for SEO. The canonical meta tag is then used specifically for this purpose, as with a canonical meta tag (e.g., <link rel =”canonical” href=”https://website.com/main-url.htm/ “ />), you can hint to the search engine what is the master content of a page.

1. Why should I be careful of duplicate contents?

Having the same content on many different web pages is a very common problem that you have to encounter when going about your daily business. It happens when one day, you decide to add a product under several relevant categories or to talk about similar topics on more than two pages. All this is supposed to help your customers to have a better understanding of your products, but it’s harmful to your page rank. Precisely, Google bots will consider duplicate pages as low-quality pages and rank them very badly – which simply leads your website to lose all its competitive ranking ability.

2. How to add Canonical URLs in Magento 2

Adding canonical URLs can go from being simple to mildly complicated, depending on which kind of page that you need to add it to.

For categories and products

Fortunately, the process of adding canonical URLs in Magento 2 is relatively simple. You only need to enable one or two settings in the Magento Admin Panel in order to have canonical URLs automatically generated.

• First, log in to your Magento account and click on Stores > Settings > Configuration

• After which, go to Catalog > Catalog > Search Engine Optimization:

In this Search Engine Optimization section, you’ll want to change the Use Canonical Link Meta Tag For Categories and Use Canonical Link Meta Tag For Products settings.

Clear Use system value and:

• Set Use Canonical Link Meta Tag for Categories to Yes will generate canonical meta tags for your full category URLs.

E.g., http://example.com/women/tops-women/hoodies-and-sweatshirts-women.html

• Set Use Canonical Link Meta Tag For Products to Yes will generate meta tag for all your product URLs. The canonical link will point to the short form of product URLs.

E.g., http://example.com/lifelong-fitness-iv.html

The recommended best practice is to enable both of these settings. After you’re finished configuring, click on Save, refresh your cache and you should see the canonical meta tag appearing in all your product pages and your category pages.

This whole process is easy enough and shouldn’t take you longer than a few minutes. However, as for CMS pages, it’s a totally different story.

For CMS pages

As part of the security enhancements from Magento 2.3.4, custom layout updates are now a little bit harder to be implemented in, as you can no longer freely add and remove code in the Custom Layout Update anymore. And this means adding canonical URLs to your CMS pages can be a little bit of a challenge, but that doesn’t mean it’s not possible.

To start adding canonical URLs to your CMS pages, first identify the specific page you need to add canonical URLs. For demonstration purposes, we’re going to add a canonical URL to the default About Us page.

And then, we’ll need to create an .XML file containing our layout updates and put it in a designated folder in the Magento directory.

The filename of our XML files must adhere to the following format:

cms_page_view_selectable_<CMS Page Identifier>_<Name for Layout Update>.xml

So with our About Us page, we’re gonna have our XML file like so:

cms_page_view_selectable_about-us_test.xml

where:

• about-us : is the CMS Page Identifier
• test: the name for our layout update. This name will be displayed as a selectable option in your Magento Admin Panel later on

After you’ve finished creating the XML file, fill it with the following code:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
 <head>
      <link rel="canonical" src="http://example.com/about-us" src_type="url"/>
 </head>
 </page>

Replace http://example.com/about-us with your chosen canonical URL, and the above code will add a canonical URL (http://example.com/about-us) into your CMS page’s <head>.

Now, place this file in (your_Magento_root)\vendor\magento\theme-frontend-luma\Magento_Theme\layout, and flush cache using:

php bin/magento cache:flush

You should now be able to see a selectable test option in your Magento Admin Panel. Go to Content > Pages > About Us > Design > Custom Layout Update and choose test.

Save configuration and refresh your frontend. When inspecting your About Us page, you should now see a canonical URL in the page’s <head>:

An easier way

Alternatively, you can use an extension to help you do the job. There’s this SEO extension from BSS Commerce that can help you with canonical tags and much more:

Magento 2 SEO Extension

$149 $357

Conclusion

We hope the tutorial has helped you understand canonical URLs, as well as how to add them to your stores in the best way possible. If there’s any part in the tutorial that seems confusing to you, don’t hesitate to shoot us a feedback in the comment section below!