Hreflang Tag For multilingual and Multiregional Shopify Stores
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.
Understanding Hreflang Tags For Multilingual and Multiregional Shopify Stores
When managing a Shopify store that is both multilingual and multiregional, you need to implement hreflang tags. Hreflang tags are an essential part of your Shopify store’s SEO success and are a piece of HTML code that tells search engines about the different language versions of your website and the different regions that it is targeting. This ensures that search engines serve the right version of your website to users based on their language and location.
Here is a basic overview of the differences between hreflang tags for multilingual and multiregional Shopify stores:
1. Multilingual Shopify Store (Different Languages)
In a multilingual store, you offer the same content in different languages. For example, if you have an English and a French version of your site, you would use hreflang tags to specify the language version of each page.
Example Tags for a Multilingual Store (Languages Only):
link rel="alternate" href="https://www.example.com/en/" hreflang="en"
link rel="alternate" href="https://www.example.com/fr/" hreflang="fr"
link rel="alternate" href="https://www.example.com/es/" hreflang="es"
en: English fr: French es: Spanish
2. Multiregional Shopify Store (Different Regions)
In a multiregional store, you offer the same content but optimized for different countries or regions (even in the same language). For example, if you offer an English version of your store for both the US and UK, you would use hreflang tags to specify the regional version.
Example Tags for a Multiregional Store (Regions Only):
link rel="alternate" href="https://www.example.com/us/" hreflang="en-us"
link rel="alternate" href="https://www.example.com/uk/" hreflang="en-gb"
link rel="alternate" href="https://www.example.com/ca/" hreflang="en-ca"
en-us: English (United States) en-gb: English (United Kingdom) en-ca: English (Canada)
The Importance of Hreflang in International SEO for Shopify
Expanding a website internationally brings various SEO challenges which can negatively impact how well your site performs in different regions if they are not addressed. A powerful tool that can help with this is Hreflang. By implementing the Hreflang attribute on your website you can ensure that the right version of the webpage is shown to users based on their language and region.
Here are the key benefits of using Hreflang for International SEO:
1. Improved user experience
When users are directed to the correct version of your store (both language and currency), it enhances their shopping experience. They’re more likely to engage, trust the store, and complete purchases if the content is in their native language and the pricing matches their local currency or region.
2. Reduced duplicate content issues
By having hreflang tags on your Shopify store, it indicates to search engines that different versions of a page are for different languages or regions. If hreflang tags are not implemented correctly, search engines like Google may consider different language or regional versions of the same content as duplicates. This can negatively affect your rankings.
3. Enhanced search engine results
By having the correct hreflang tags it helps search engines provide the most relevant version of a page to users in their specific region and improves your Shopify store's visibility in different countries. By indicating the correct language and country for each page, your store is more likely to rank higher in localised search results, driving more targeted traffic from international markets.
4. Boosts visibility in local search results
Fixing hreflang issues ensures your store is properly set up for targeted international marketing campaigns. When users arrive at the correct localised version, it increases the effectiveness of your campaigns, whether you’re advertising in different languages or offering region-specific promotions.
5. Increases targeted traffic
Using hreflang tags can also help drive localised audiences to the appropriate regional webpage versions of your site which boosts conversions and user satisfaction. Fixing hreflang issues ensures that customers see content in their language and tailored to their region, improving engagement and conversion rates.
6. Prevents wrong page indexing
Hreflang tags are a useful way to ensure that search engines index the correct version of a page for a specific language or region.
7. Improves your international SEO strategy
Hreflang tags help search engines like Google understand which version of your site should be displayed to users based on their language or geographic location. This helps to improve your SEO performance across different markets and achieve better rankings by region and language.
8. Support for multinational and multilingual sites
Using the correct hreflang tags makes it easier to expand into new markets as search engines immediately recognise and serve the appropriate version to users in those new markets. This ensures that the correct language or regional version of your Shopify store appears in search results, improving your SEO performance across different markets.
9. Enhanced trust and credibility with users who can find content tailored to their language and cultural context
Showing customers the correct language and regional version builds trust. Users are more likely to purchase from stores that cater specifically to their needs, including language and currency preferences. A smooth, localised experience reflects positively on your brand.
Using the Hreflang tool correctly is extremely critical as this can significantly improve the impact of your international SEO Shopify strategy and ensure that your users have the best possible experience. Search engines are also able to understand and rank your content appropriately so that you can become more prominent in the organic results.
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 In Hreflang
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:
1. 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.
2. 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.
3. 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.
4. Using Incorrect Language Codes and Country Codes
Wrong Format: Many users incorrectly format language and country codes. The correct format is a two-letter ISO 639-1 language code (e.g., en for English) followed by a two-letter ISO 3166-1 alpha-2 country code (e.g., US for the United States), separated by a hyphen. Always use standardized codes, like en for English, fr for French, and US for the United States, FR for France.
Incorrect Tag Example:
link rel="alternate" hreflang="english-us" href="https://www.example.com/us/"
Correct Tag Example:
link rel="alternate" hreflang="en-us" href="https://www.example.com/us/"
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:
1. 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.
2. 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 Implement Hreflang Tags in 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 below:
- 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
1. 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.
2. Manually Adding Hreflang Tags
There are 3 ways that you can manually add Hreflang tags to your website. These include:
In the HTML header of a page In the HTTP header In an XML sitemap
In Shopify, the Hreflang is typically added to the head element of your theme’s liquid files. Here is a breakdown of the key steps to follow:
- Identify the languages and regions you want to target
- Edit the theme code by finding the theme in your online store and clicking on actions, then ‘edit code’.
- Locate the layout file in the theme editor and select the
theme.liquidfile. - Add the Hreflang tags within the
<head>section of thetheme.liquidfile.
3. 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 our Shopify experts 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.
The Challenges of Implementing Hreflang Tags in Shopify
The process of implementing Hreflang tags correctly in Shopify does have its obstacles, particularly related to the platform’s structure and managing multiple languages and regions. Here are the main challenges to consider with Hreflang tags in Shopify:
1 - Dynamic Content & URL Management - Shopify does not natively support subdirectories for different languages (e.g., /en/, /fr/). This means you might need to use subdomains or separate domains for each language, complicating the hreflang implementation. In addition, ensuring that hreflang tags dynamically adapt to the correct URLs for each product, collection, or page can be complex.
2 - Manual Tag Implementation- Shopify does not natively support subdirectories for different languages (e.g., /en/, /fr/). This means you might need to use subdomains or separate domains for each language, complicating the hreflang implementation.
Benefits of Implementing Hreflang Tags in Shopify
- Ensures users are provided with the most relevant content
- Makes sure search engines index the correct version of your pages
- Drives more targeted traffic to your site
- Be able to reach new prospects
- Enhanced search engine visibility in local results
- Increased conversion rates with improved localised shopping
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.
Get help implementing hreflang tags for your multilingual and multiregional Shopify store
Managing hreflang is one of the most complex parts of SEO. As a leading Shopify SEO agency, our SEO team successfully manages international SEO, please contact our Shopify experts for further advice. Or if you would like to discover more opportunities on how to improve your website in organic search, please get in touch to find out about our Shopify SEO audit.
Shopify SEO Audit TODAY
