SEO is important for every website, and an online store is no exception. Canonical URLs play a critical role in ensuring that your client’s website isn’t penalized by search engines and that the SEO is strong. They make sure that search engines don’t get confused when different URLs point to the same content or webpage, and can help inform which URLs have identical or highly similar content.
Whether you’re already familiar with canonical URLs or you’ve never seen the term rel=”canonical” before, this article unpacks the details you need to know, so that your client’s online store is on the road to being fully search engine optimized. Let’s dive in.
What is a canonical URL?
A canonical URL refers to an HTML link element, with the attribute of rel="canonical" (also known as a canonical tag), found in the <head> element of your client’s webpage. It specifies to search engines their preferred URL.
That means the canonical URL element informs Google and other search engines to crawl a website, and what URL to index that specific page’s content under. This is important because URLs can have variations, based on a variety of factors, but be serving up the same or similar content. The specification went live in April of 2012, and was described in RFC 6596.
"That means the canonical URL element informs Google and other search engines to crawl a website, and what URL to index that specific page’s content under."
Take for example the following URLs:
fancytshirts.com
www.fancytshirts.com
https://m.fancytshirts.com
https://amp.fancytshirts.com
https://fancytshirts.com?ref=twitter
Each URL is referring to the same homepage content for my fancy t-shirt website, however the URLs themselves are slightly different. This can be an issue for search engines, because the engine itself doesn’t necessarily know which page should be the source of truth, and it may just choose a canonical URL algorithmically for you.
In other words, if you have a web page accessible by multiple URLs, or different pages with similar content (e.g. separate mobile and desktop versions), you should specify to a search engine which URL is authoritative (canonical) for that page.
Why do canonical URLs matter?
1. They help to specify which URL you want people to see in search results
You might prefer people reach your blue t-shirts product page via:
https://www.fancytshirts.com/tshirts/blue/bluetshirt.html
Rather than:
https://fancytshirts.com/tshirts/sportswear?gclid=ABCD
Using canonicals can help you keep things “clean.”
2. They simplify tracking metrics for a single product/topic
When there are a variety of URLs, it becomes more difficult to get consolidated metrics for a specific piece of content. Canonical URLs help keep things simple and organized, especially when it comes to reporting performance to your client.
3. They consolidate link signals for similar or duplicate pages and manage syndicated content
Canonical URLs help search engines consolidate the information they have for the individual URLs (such as links to them) into a single, authoritative URL. Also, if you syndicate your content for publication on other domains, canonical URLs help to consolidate page ranking to your preferred URL. In other words, similar or duplicate content across websites won’t have to compete for traffic/ranking in search engines.
"If you syndicate your content for publication on other domains, canonical URLs help to consolidate page ranking to your preferred URL."
The canonical_url object
In Shopify, the canonical_url object returns the canonical URL for the current page. The canonical URL is the page's "default" URL with any URL parameters removed. It can be output like this:
{{ canonical_url }}
For Shopify products and variants, the canonical URL output is the default product page with no collection or variant selected.
For example, a product in a collection with a variant selected might look something like this:
https://fancytshirts.com/collections/classics/products/classic-t?variant=17287731270
The canonical_url output for this page would be:
https://fancytshirts.com/products/classic-t
For specific use cases, you can create custom canonical URLs for pages or blog posts by using if statements, based on various templates in your theme and using theme settings. This is usually only required if you are doing some fancy URL masking.
You might also like: An Introduction to Theme Options.
SEO considerations and best practices for canonical URLs
Various ways to canonicalize multiple URLs
Focusing on canonical URLs primarily falls under the category of on-page SEO rather than off-page SEO (though you should be tracking your overall redirection strategy somewhere). Outside of using rel="canonical", there are multiple ways to canonicalize URLs. In most cases, rel="canonical" is the recommended way of consolidating duplicate content for search engines, however here are a few other ways of canonicalization to consider.
1. Use a 301 redirect
A 301 redirect is a status code that tells Google or other search engines that you wish to create a permanent redirect from one URL to another. A 301 redirect sends visitors and search engines to a different URL than the one they originally requested in their browser or click on from a search results page. These redirects also link various URLs together, so that search engines rank all of the addresses based on the domain authority from inbound links.
You might also like: How to Make SEO and Paid Social Work Together to Drive Traffic and Revenue.
2. Use Passive parameters in the Google Search Console
In Google Search Console, you can find the option to set URL parameters, once your website is verified. What this does is give you the ability to tell Google which parameters you would like to consider passive. This means that you can tell Google, “Whenever you see this URL parameter, just treat it like it doesn’t exist.” There’s a great tutorial on how to set passive parameters with the URL parameters tool in Google Search Console.
"This means that you can tell Google, “Whenever you see this URL parameter, just treat it like it doesn’t exist.”"
3. Use location hashes
Also known as fragment identifiers, a fragment URL is a URL with a # at the end of it that specifies a specific section on a page (usually jumping to an id that matches the name of the fragment identifier).
A hash can exist in the URL and Google, along with other search engines, will consider it a single URL. This means that that jumped content won’t be ranked differently, and therefore not indexed differently. Essentially, it will be canonicalized to the same URL.
You might also like: 5 Simple Google Analytics Reports You Should Create for Every Client.
Things to keep in mind or avoid 📝
When playing around with SEO and canonicalization, it’s important to fully understand the implications it has with search ranking. These can be both good and bad, but to avoid the bad bits, I’ve put together a few things to keep in mind when using canonical URLs.
1. Canonical URL or a 301 redirect?
Shopify creates automatic redirects for you (for example in blog posts) when you change the URL of an already published post to a new URL. However, making the choice between a 301 redirect or setting a canonical URL can sometimes be tough. According to SEO expert Joost de Valk at Yoast, “If there are no technical reasons not to do a redirect, you should always do a redirect. If you cannot redirect because that would break the user experience or be otherwise problematic, set a canonical URL.”
If there are no technical reasons not to do a redirect, you should always do a redirect. If you cannot redirect because that would break the user experience or be otherwise problematic, set a canonical URL.
If you’re looking to create manual redirects for specific pages on Shopify, you can follow this handy tutorial found in our documentation.
2. Do not block Google from crawling specific URLs
You can use robots.txt to tell Google what pages to disallow, essentially which to crawl and not to crawl.
However, this is problematic when it comes to duplicate content. This is because you’re essentially telling Google not to look at a specific page, therefore Googlebot doesn’t crawl or index the page at all, which means any ranking signals that page might have had (though duplicate content) could have contributed to the original source if specified with a canonical URL. This means you miss out on engagement signals, content signals, and anything that would have helped contribute to a Google ranking.
So, don’t block Google from crawling specific URLs when it comes to duplicate content. Setting up proper canonical URLs takes care of this, and Google will know which pages to look at.
3. Don’t just delete non-canonical versions 🙅
Additionally when it comes to duplicate content, there is sometimes the inclination of wanting to “clean up” and delete or remove old posts, products, etc. The problem with this is that sometimes that content has been linked to or referenced in other places.
For example, someone might have saved a product on Pinterest, and will no longer be able to access it once it’s been deleted. A solution here is to instead redirect to the new page, product, etc., which should be available for potential customers. The only time it’s recommended to remove pages entirely without redirects is if they were made in error, are very new, or have little-to-no traffic whatsoever.
In case you accidentally delete old content, make sure you’ve set up your client with a 404 error page that improves the user experience (UX), rather than ruining it. Some of the best 404 pages are memorable because they include a good combination of humor and strong UX.
Canonical URLs for everyone!
SEO is important for every website, and using canonical URLs can help to better inform search engines which URLs have identical or highly similar content. Understanding how to use canonical URLs is one of many essential front-end developer skills you’ll need to optimize your client’s website. Get started by making sure the Shopify theme you built, or use, contains canonical URLs.
Illustrations by Tiffany Tse.
Have you set up canonical URLs for your clients? Let us know in the comments below.
Read more
- How Open Graph Tags can Optimize Social Media Experiences
- How to Use Polaris to Build an App UI in HTML or React
- How to Improve Your Shopify App's Onboarding Flow
- 5 Ways to Overcome Choice Paralysis and Improve Conversion
- Free Course] 10x Your Shopify Theme Development Skills with These Free Courses
- How to Use Liquid to Create Custom Landing Page Templates
- Building an Accessible Breadcrumb Navigation with Liquid and Shopify
- Introducing Online Store 2.0: What it Means For Developers
- Getting the Most Out of Chrome Developer Tools: 4 Modern Features You Need to Know
- Free Webinar] Getting Started with Sass and Shopify
