Shopify – How to add HREFLANG Tags

Learn how to optimise Shopify websites. In this forum we post Shopify guides, technical SEO and advanced hacks to earn more traffic and increase conversions.

Sitebee

Freelance Technical SEO
Staff member
Are you running a Shopify Plus shop with the intention of expanding into different international territories? In this post, I am going to teach you on a simple method to implement HREFLANG tags without the further expense of International SEO Shopify Apps.

I’m going to assume before proceeding that you are familiar with the concept of hreflang tags and their purpose? A basic hreflang tag (Alternate URL) will look similar to this <link rel=”alternate” hreflang=”en” href=”” />.


Build a Shopify HREFLANG Tag​

To build the tag we’re going to use a couple of the Shopify liquid variables from the Shopify cheat sheet ( https://www.shopify.co.uk/partners/shopify-cheat-sheet ). There are two variables that we will be using for this.
1, canonical_url
2, replace: shop.domain

We are going to use those two variables to build the string required to populate href field in the HREFLANG tag.
Adding those 2 variables together separated with a pipe will look like this: canonical_url | replace: shop.domain, lastly we are going to add the domain name.

For this, I shall be using a generic root domain wrapped in the Shopify object tag, so it looks like this: href=”{{ canonical_url | replace: shop.domain, ‘www.mydomain.com’ }}”.

The finished version should look like this
Code:
<link rel=”alternate” hreflang=”en” href=”{{ canonical_url | replace: shop.domain, ‘www.mydomain.com’ }}” />

If the shopify international storefronts are using sub-domains it will look like this: <link rel=”alternate” hreflang=”en-gb” href=”{{ canonical_url | replace: shop.domain, ‘uk.mydomain.com’ }}” />.
When you are duplicating this tag, make sure that you are updating the locale to match the territory that you will be targeting.

Theme.Liquid​

When you have built your HREFLANG tag it is time to implement the tag into the theme for each international storefront. Log in to the Shopify administration panel. Head over Themes > Edit Code >

shopify-hreflang.JPG


Locate the theme.liquid file and paste the hreflang into the head section. Save the file and visit (view source) the website’s homepage, collections and products to double-check the hreflang tags are showing as intended. Rinse and repeat this method for each of international storefronts that you are working on.

Congratulations if you followed the steps correctly the hreflang tags should look something like this:
shopify-hreflang-2.JPG



Unfortunately, this method is not completely foolproof. The alternate hreflang URL is built to create a like-for-like URL and aggregate it to point at the same relative URL path on the other international storefronts. If the URL is not present on the other storefronts Googlebot (and your go-to web spidering tool) will be met with a 404 response. Same goes for multilingual international storefronts with URL paths in their native languages.


Like-for-Like URLs on English-speaking Websites​

Sadly, I have not figured out a solution to this yet. But you can rest assured that multilingual storefronts are very unlikely to cannibalise on each other in organic search, the languages are different.

It is mostly the English-speaking countries that are likely to cannibalise on each other in organic search, countries such as USA, UK, Australia, New Zealand, Ireland and Canada.

If the URL paths match for collections, products and pages, then it should not be a problem for the English-speaking countries. For the multilingual storefronts, you could deploy an International XML Sitemap.