How To Set a Canonical URL for a Shopify Page Using Metafields

Kyle Risley is a senior lead, SEO, at Shopify.

When web pages have the exact same content under multiple URLs, search engines need to decide which version to index. Canonical tags help search engines stay organized by telling them to consolidate all the different versions of a page under one URL—the canonical URL.

Shopify themes automatically canonicalize URLs, so most of the time, you don’t have to think about them. Use this tutorial for those rare cases when you need to manually set a canonical URL.

What is a canonical URL?

A canonical URL is a preferred URL for indexing. When you have multiple URLs with similar or identical content, you can ask search engines to index the canonical URL using this tag:

<link rel="canonical" href="{{ canonical_url }}">

Canonical URLs are defined by default in first-party Shopify themes and should be defined by default in all good third-party themes. If you need to add default canonical URLs to your store, you can add one line of code before the closing </head> tag in your theme layout file to fix that.

Here’s an example of how a canonical URL looks in Shopify’s Dawn theme:

When to use canonical URLs

If you have multiple URLs with highly similar content indexed, then setting the canonical URL is one way to tell search engines which URL you want to be ranked and indexed. As a best practice, Shopify first-party themes set a canonical URL on all pages.

A common example of when you might use canonical URLs is when URLs contain UTM parameters. UTM parameters are a type of URL parameter used by Google Analytics to track marketing campaign performance. They are the characters at the end of a URL that show the source of the referral. For example, the same product page will have a different URL if you land on it via an email campaign versus a Google ad. This is great for attributing sales, but not so great for search engines. That’s because search engines treat every URL the same way: If one letter changes, that’s a brand-new URL that needs to be crawled. Instead of indexing each of these URLs separately, search engines can index all the different versions under one URL (the canonical URL).

How to set a canonical URL for a Shopify page

1. Create a metafield for each page type you want to canonicalize
2. Add code to your theme file to reference your newly created metafields

In most cases, the default canonical URL is correct. This tutorial is for one-off cases when you want to manually override the default canonical URL and set a new canonical URL value. To do this, you’ll create a metafield for each page type you want to canonicalize, then you’ll add code to your theme file to reference your newly created metafields. Here’s how:

1. Create a metafield for each page type you want to canonicalize

Begin by creating metafields. If you only want to override the canonical URL (for example, on one or more product pages), then you only need to create one metafield. If you want to override the canonical URL on other page types too (like a collection page or blog post), you also need to create a metafield for each of the applicable page types.

Navigate to the metafields page within your Shopify Admin. You can do this by typing “metafield” into your Admin search bar and selecting “Metafields.”

Next, select the page type you wish to create a canonical URL override for, such as Products, Collections, Pages, and Blog posts. (Note: “Blogs” refers to the whole blog, while “Blog posts” refers to individual articles.)

Select “Add definition.” Set the name to something short and descriptive, like “Product Canonical URL.” If you’d like, you can also add a description like: “This URL overrides the default canonical URL for this page.”

Set type to “URL” and click Save. Your metafield should look something like this:

The namespace and key are super important, as you’ll reference them later.

From here, navigate to the product page editor, and you should see the “Product Canonical URL” metafield under “Product metafields.” Enter the new canonical URL value and click save.

2. Add code to your theme file to reference your newly created metafields

Next, open whichever file is generating your canonical tag logic. This will typically be your theme.liquid file in the Layout folder.

The canonical Liquid code should look like this:

You’ll replace this existing line of code—

<link rel=”canonical” href=”{{ canonical_url }}”>

—with this code block:

{% assign custom_canonical = null %}

{% if product and product.metafields.custom.product_canonical_url != blank %}

{% assign custom_canonical = product.metafields.custom.product_canonical_url %}

{% elsif collection and collection.metafields.custom.collection_canonical_url != blank %}

{% assign custom_canonical = collection.metafields.custom.collection_canonical_url %}

{% elsif page and page.metafields.custom.page_canonical_url != blank %}

{% assign custom_canonical = page.metafields.custom.page_canonical_url %}

{% elsif article and article.metafields.custom.blog_post_canonical_url != blank %}

{% assign custom_canonical = article.metafields.custom.blog_post_canonical_url %}

{% endif %}

<link rel="canonical" href="{{ custom_canonical | default: canonical_url | default: page_url }}">

This code block assumes you use the following names for your metafields:

• product_canonical_url

• collection_canonical_url

• page_canonical_url

• blog_post_canonial_url

It also assumes the namespace “custom” (the default value provided by Shopify) is used. If you use different names, you can change the bolded text above. If you didn’t create custom canonical metafields for a certain page type, then you can remove the “elsif” and “assign” rules for that page type.

Here’s what the same code block would look like if you only created custom canonical metafields for product and collection pages:

{% assign custom_canonical = null %}

{% if product and product.metafields.custom.product_canonical_url != blank %}

{% assign custom_canonical = product.metafields.custom.product_canonical_url %}

{% elsif collection and collection.metafields.custom.collection_canonical_url != blank %}

{% assign custom_canonical = collection.metafields.custom.collection_canonical_url %}

{% endif %}

<link rel="canonical" href="{{ custom_canonical | default: canonical_url | default: page_url }}">

And here’s an example of what the code block would look like if you only created custom canonical tags for collection pages, and the namespace you used was cool_name and the key was collection_canonical:

{% assign custom_canonical = null %}

{% if collection and collection.metafields.cool_name.collection_canonical != blank %}

{% assign custom_canonical = collection.metafields.cool_name.collection_canonical %}

{% endif %}

<link rel="canonical" href="{{ custom_canonical | default: canonical_url | default: page_url }}">