With more and more Shopify stores going international, it’s never been as important to look after your search engine rankings. Whilst expanding into new regions creates exciting new market opportunities, it can also introduce serious SEO challenges.
The main SEO problems international expansion introduces are:
- Helping search engines understand which page should be ranked for which region/language
- Preventing region or language-specific pages from creating duplicate content problems
In this article, we introduce you to a feature called Hreflang which is used to solve these international SEO problems.
Shopify SEO audit for your online store TODAY ⬇Why Do We Need Hreflang?
First of all, why do we even need hreflang?
When a brand has multiple websites meant for different regions, how do search engines know which site is meant for which region?
Let me use the fitness brand Gymshark to illustrate this. Gymshark use Shopify and have different websites meant for different audiences:
Germany - https://de.gymshark.com
France - https://fr.gymshark.com
These sites are translated into their native languages which gives Google a massive clue which region each site belongs to. But then Gymshark also have a USA website and Canadian website:
USA - https://www.gymshark.com Canada - https://ca.gymshark.com/
The content on both of these websites is in English. So how do search engines differentiate these from the English language UK website and ensure each site ranks in the correct region?
This is where hreflang comes in.
What is Hreflang?
Hreflang is a HTML attribute which indicates to search engines when there are alternate versions of a page intended for a different region/language audience.
Hreflang can be implemented in different ways but the most common is a simple meta tag which goes on any page that has alternate versions. Here’s an example from Gymshark:
<link rel="alternate" href="https://www.gymshark.com/" hreflang="en-us" />This hreflang tag is found on the UK Gymshark homepage “https://uk.gymshark.com/”.
It tells search engines that the USA version of this page can be found at “https://www.gymshark.com/”.
The hreflang tag contains two key attributes:
1 - Href The href is a link to the alternate page. It has to be the full URL address and it must be a working page. It tells search engines “this is an alternate version of the page currently being viewed”.
2 - Hreflang The hreflang attribute contains the language code (ISO 639-1) and optionally the country code (ISO 3166-1) of the alternate page's target audience. The country code is optional but the language code is a requirement.
Some examples of hreflang attributes using different language/country targeting combinations:
- en - English speakers
- en-GB - English speakers in the UK
- fr-FR - French speakers in France
- en-US - English speakers in the US
- it - Italian speakers
- it-CH - Italian speakers in Switzerland.
Piecing the ‘href’ and the ‘hreflang’ together, search engines will know that this alternate URL (the href), is meant for this specific audience (the hreflang).
Alternate Pages
It’s important to remember that hreflang works at page-level and not domain-level. Hreflang tags declare ‘alternate pages’, not ‘alternate websites’. Lots of websites use hreflang tags to declare alternate language/region specific pages on the same domain.
For example you might use subfolders to host alternate language/region versions of your site. This is how Apple set up their international websites using folders:
X-Default
There is a special hreflang fallback value called ‘x-default’. Think of ‘x-default’ as the web page search engines should rank when no other hreflang link matches the language/region of the searcher.
Using Gymshark as an example again. They have a rest-of-the-world store located at row.gymshark.com. This is declared as the x-default.
<link rel="alternate" href="https://row.gymshark.com/" hreflang="x-default" />So if somebody searches in a language/location that is not declared in Gymshark’s hreflang tags, Google will most likely display Gymshark’s RoW store.
Do You Need to Add Hreflang?
You only need to add Hreflang tags when you have two near-identical pages that serve different language/regional audiences. If there is no alternate version of a page, you don’t need to add hreflang tags.
Hreflang Rules
For hreflang tags to validate, they must follow specific rules:
1 - Return Links - If a page hreflang links to an alternate page, the alternate page must hreflang link back to the first page. For example, if a UK Gymshark has a hreflang link pointing at a German Gymshark page, the German page must have a hreflang link back to the UK version.
2 - Working Pages - Any page you hreflang link to must return a 200 status code. In other words, hreflang links have to be working pages.
3 - Self-Referencing Hreflang Tag - Any page which includes hreflang links, must also have a hreflang link to itself. We call this a self-referencing hreflang link. The self-referencing hreflang link has to include the standard language/country declaration.
Hreflang Challenges
Now that we’ve established what hreflang is and how it works, we can discuss why it’s such a complex part of SEO. In fact, hreflang is probably one of the hardest parts of SEO to get right.
Here is a tweet from Google’s Webmaster Trends Analyst John Mueller explaining how hard hreflang can be!
Adding the tags is simple enough, but maintaining hreflang tags that fulfill the 3 rules above can be extremely challenging.
To always validate, the hreflang tags between different pages have to be in sync. Something as simple as changing a URL could break the hreflang connection between two pages.
When you have more than one website, with dynamic pages and managed by different teams you can begin to imagine how complex this becomes. If you have multiple websites you need to ensure your teams are coordinating to ensure your hreflang tags don’t break!
Hreflang Mistakes
We deal with broken hreflang setups all the time. These are the most common hreflang problems we encounter:
No Return Links
By far the most frequent Hreflang problem we see is pages where there are no return Hreflang links. This is where you need to be organised to ensure that your hreflang tags always work. If the URL path changes on one page but not the other, the hreflang tags will fall out of sync.
Non-200 Pages
Hreflang tags need to point at working pages that return a 200 server response. As your website evolves, URLs change. This will break your hreflang tags so if you retire and redirect pages, make sure you also update any hreflang tags.
No Self-Referencing Hreflang Tag
It might seem odd but if a page has hreflang tags then it must include a self-referencing hreflang tag to itself too. This is a common mistake that lots of websites make.
How To Check Hreflang Tags
Hreflang Tag Checker
The easiest way to audit hreflang tags is using a Chrome extension called Hreflang Tag Checker. Once the extension is installed, you simply visit any page and press the toolbar icon. The extension will then check whether there are any hreflang tags on the current URL.
The best feature on this tool is that it will actually crawl the hreflang links and confirm they pass the validation checks.
Screaming Frog
If you want to audit hreflang tags at scale then Screaming Frog is your go-to tool. Screaming Frog will crawl a website and validate any hreflang tags discovered during the crawl.
Search Console
There is an International Targeting report hidden away in the Legacy Reports section in Search Console. To access this report, in the left menu go to ‘Legacy Tools & Reports > International Targeting’.
This report will show how many hreflang tags are on your website and detail where there are any hreflang errors.
Different Ways to Add Hreflang
There is more than one to implement Hreflang. The HTML tag method described above is by far the easiest way to set up hreflang, but there are two alternate approaches:
XML Sitemap
You might be familiar with XML sitemaps. Your XML sitemap can be updated to include hreflang declarations for each page within the sitemap. For large websites with complicated systems, this can often be the easiest approach.
HTTP Headers
Whenever a web browser visits a page, the server returns information about that page to your web browser. This is called the HTTP response. You can configure your server to return hreflang information in the HTTP header response.
How to Add Hreflang to Shopify
So how do you actually add hreflang tags to Shopify? Like most content management systems, Shopify has nuances which affect what you can and can’t do on the platform. While it is possible to add hreflang to Shopify via the XML Sitemap or HTTP Headers methods, it requires significant technical configuration so we don’t recommend it.
For Shopify websites, our recommended approach for implementing Hreflang is always HTML tags. Physically adding hreflang tags to your site is fairly easy but you need to do so in a way which ensures your hreflang tags always validate. Remember the three rules above:
- There must be a return hreflang link from the alternate page
- The alternate page must be a working URL
- There has to be a self-referencing hreflang tag on any page that includes hreflang tags
Add Hreflang to Shopify Via an App
There are some Shopify apps that add Hreflang tags to your pages for you. Translation apps such as Weglot and Langify will automatically generate your Hreflang tags and add them to your pages.
Whilst apps can add hreflang tags to your Shopify store, in our experience this isn’t the best method. The app approach only works when you have a single store which offers multi-language. Most apps don’t provide language+country hreflang targeting nor do apps factor in multiple stores across different domains. Shopify apps are not our recommended approach for hreflang.
Add Hreflang Tags To Your theme.liquid File
If you have two stores with identical pages and URLs (where only the domain is different), then adding valid hreflang tags can be fairly easy. As the two websites are complete clones, you know that for every page on Site A, there is an equivalent on Site B.
Therefore you can edit your theme code to dynamically construct your hreflang tags using the URL path of the page being viewed.
That is what the liquid code below does:
<link rel="alternate" hreflang="x-default" href="{{ canonical_url | replace: shop.domain, 'www.mystore.com' }}" />
<link rel="alternate" href="{{ canonical_url | replace: shop.domain, 'www.mystore.com' }}" hreflang="en-GB" />
<link rel="alternate" href="{{ canonical_url | replace: shop.domain, 'www.us.mystore.com' }}" hreflang="en-US" />This code snippet can be added into the
section of your theme.liquid file. You need to replace the ‘mystore.com’ instances with your actual domain names. When this snippet is in place, your pages will output hreflang tags using the page canonical to construct the URL path.As this method involves editing your website code, if you choose this approach, we highly recommend you hire a Shopify expert to apply the change for you.
Use a Custom Field (Recommended Shopify Hreflang Approach)
How do you add Hreflang tags across multiple Shopify websites with thousands of products where the URL handles don’t match? You won’t have the time to add hreflang tags on a page-by-page basis and an app can’t do this for you.
In this scenario, we recommend using another app called Custom Fields. With custom fields you can create completely new metafields on your website. Whenever we deal with complex hreflang situations on Shopify we recommend our clients use Custom Fields to create a hreflang metafield. The value of the hreflang metafield is outputted into the
section of the page.With this approach, you can build your own hreflang tags in Excel and then add them directly into the custom field on a page-by-page basis.
Even better, if you have the Custom Fields Plus plan, you can import your product hreflang tags via a csv upload. We regularly use this approach to upload thousands of product hreflang tags to Shopify in minutes.
Although this approach isn’t the simplest because you need to set up the custom metafield (which requires a Shopify Expert) and build your own hreflang tags, it is by far the most effective for large scale Shopify hreflang management. If you want an easy way to build your own hreflang tags, we recommend Aleyda Solis’s free hreflang tag generator.
International Domains (New)
Shopify recently announced a new feature called International Domains. This development will allow Shopify merchants to display their store on an alternate domain/subdomain targeting a different language/country.
With International Domains, you register an alternate domain/subdomain using the target country’s 2 letter ISO code (eg gb.yourdomain.com). Shopify will then automatically configure hreflang tags across each domain/subdomain. Full instructions on how to do this can be found on Shopify.
International domains do have a few drawbacks. You will have to host the exact same pages and products across your domains which won’t suit every merchant. You also won’t be able to edit your content across different domains (except for translations).
That being said, this is a huge step forward and shows that Shopify has listened to merchants. We’re sure in time International Domains will become our recommended hreflang solution for Shopify.
Need Help With Hreflang?
Managing hreflang is one of the most complex parts of SEO. Our SEO team successfully manages international SEO for dozens of websites. If you need help optimising your international SEO let us know.
