How to Add Flawless Hreflang Tags in Shopify At Last

4 Comments

Allbirds and Gymshark are on Shopify and they can’t get their hreflang tags right. The public companies failed, even with their resources, because there’s no native way to manage tags for multiple Shopify accounts. Shopify’s own documentation in 2021 told you the basics of hreflang tags on a homepage, but you were left bewildered with how to do it sitewide.

As a result of working with SEO clients who had this exact struggle, the Digital Darts team and I invented three ways to get perfect hreflang tags in Shopify. You’ll learn how to correct every type of error, every variable you must consider, and how to keep your tags fresh with minimal effort. Businesses on WordPress, Magento, and other platforms can use what’s shared with minor alterations. No one has taught it in-depth until now. In this guide, you’ll get it all to delight Google.

What You'll Discover On This Page
Hreflang Tags Shopify

What Are Hreflang Tags?

Hreflang tags tell Google the relationship between alternate web pages. The tags specify the language and region served by each version of the webpage.

If I jump into Google Australia then search “Victoria Beckham shop”, I get their international subdomain ranking at the top:

Victoria Beckham shop search result

I see the international version of the store over their US English (https://us.victoriabeckham.com/) and UK English versions (https://www.victoriabeckham.com/). Why is that?

The answer lies in their hreflang tags:

<link rel="alternate" href="https://us.victoriabeckham.com/" hreflang="en-us" />
<link rel="alternate" href="https://www.victoriabeckham.com/" hreflang="en-gb" />
<link rel="alternate" href="https://international.victoriabeckham.com/" hreflang="en" />

Let’s breakdown a hreflang tag into three elements using this example:

<link rel="alternate" href="https://www.example.com/" hreflang="en-us" />

  1. The first element is rel="alternate". This tells Google the URL is an alternate version of the page.
  2. The second element is href="https://www.example.com/". This is the location of the page.
  3. The third element is hreflang="en-us". This specifies the alternate URL is for English-speaking Americans.
  4. The order of elements is irrelevant.

The Benefits of Hreflang Tags Go Beyond SEO

Hreflang tags are for multilingual or multi-regional websites. If you have a single website with one language like DigitalDarts.com.au, there’s no need for hreflang tags.

The biggest benefit of hreflang tags is more revenue from improved rankings. Good hreflang tags can give multilingual or multi-regional websites a boost in organic rankings. At the 2017 International Search Summit in Barcelona, Gary Illyes from Google said that page signals are shared between alternate versions of a page with hreflang tags to help SEO.

“Pages should be able to use each other’s ranking signals”, said Gary. “If you have a page doing well in English and you have a page in Spanish, without hreflang tags it doesn’t mean the Spanish page would do well in Google. With hreflang tags, you can tell Google that there are two pages close to equal and to share ranking signals.”

A second benefit of hreflang tags is it avoids duplicate content. Few brands have the budget to write unique web copy across all regions.

A third benefit is it lets Google serve the most relevant store in search results. This makes it easy for people to purchase on the right store. Some store setups limit shoppers in one country to order from one domain. More shoppers buy when a store is in the shopper’s language and currency with relevant messaging.

Without good hreflang tags, customers land on the wrong store from Google search—leading to confusion and missed sales.

I’ll show you some big bad brands on Shopify who can’t get their hreflang tags right. The traffic estimates on similarweb.com hint that these brands lose thousands in sales every week by taking people from search results to the wrong store.

If I search “Allbirds” from an Australian IP on Google Australia, I am shown Allbirds.com as the first organic listing:

Allbirds brand search result in Google Australia

The allbirds.com.au website made for Australians shows in second.

Gymshark has their primary domain gymshark.com meant for the US market appear in Australia as the first result:

Gymshark search result

A browser search through the source code of the homepage shows they have no hreflang tags:

No hreflang tags on gymshark

An organic search report in ahrefs.com shows Gymshark has 36% of traffic outside of the US landing on their main gymshark.com website:

ahrefs report on Gymshark showing organic traffic by country

A small percentage of organic traffic from international search is expected since all countries don’t have their own domain, but 10 of the countries do. An inverse is similar on their UK site, which gets organic US traffic:

ahrefs report on Gymshark UK showing organic traffic by country

These are not exceptions. Our SEO manager Emily audited 100 random Shopify stores who put in place hreflang tags. Every store with multiple domains or subdomains had errors.

You can begin to see how these brands are hurting conversion rates and SEO by driving people from organic search to the wrong version of a store. How can 100 million-dollar brands with dedicated marketing and development teams get this wrong? The answer lies in Shopify.

Why Google-Friendly Hreflang Tags Are Used To Be Impossible In Shopify

Google-friendly hreflang tags were impossible in Shopify because there is no relationship of content between Shopify stores.

To run an international strategy pre-2021, stores needed multiple Shopify accounts. The only way to tell Google that a product on an English store was the same as a product on a Japanese store was manually managing that data every day.

The rel, href, and hreflang elements of hreflang tags are simple at first glance, but once you begin to put them in place, you open the doors into a toddler’s playroom that hasn’t been cleaned in a year.

At the 3:47 mark of the interview with Gary Illyes, Gary describes how Google staff messed up the hreflang tags of Google’s own help center. “Someone was trying to target Los Angeles and thought using ‘LA’ as a country code would be great. It actually means ‘Laos’.” If one of the largest companies in the world who created the rules gets it wrong, good luck to Joanne who just wants to sell scarves online.

Google’s search advocate John Mueller in 2018 on Twitter gave the most famous hreflang quote known to search engine optimizers:

hreflang is one of the most complex aspects of SEO (if not the most complex one). Feels as easy as a meta-tag, but it gets really hard quickly.

Nearly all Shopify stores do hreflang tags with a {{ canonical_url }} value.

In the theme of allbirds.com, they would use:

<link rel="alternate" hreflang="en-au" href="{{ canonical_url | replace: '.com', '.com.au' }}" />

This produces:

<link rel="alternate" hreflang="en-au" href="https://allbirds.com.au" />

It scales somewhat okay for all content types. You use a single line of code to handle hreflang tags on collections, products, pages, blogs, blog tags, and articles.

Yet if one store doesn’t mirror all content types across stores, or any URL handle for a store varies between another, standard hreflang tags in Shopify are bad for SEO. Google will crawl non-existent pages. The stores will lose organic traffic.

The old way to solve this problem is to have the same store setup and URLs across all stores. Yet if you have stores in different languages, that is bad for SEO and bad for the user experience, because your URL handles should use the same language as the store.

Some Shopify developers got around this by manually updating metafields. You can insert any information you want in a metafield. In this case, a full hreflang tag of another store. I estimate 80% of Shopify Expert development agencies who understand the limitations of hreflang tags use this method. It is time-consuming to set up and rarely gets maintained with URL changes.

The main problem with this method is maintenance. Every new product, collection, page, or article needs technical help to have hreflang tags updated. Any removal of a product or any content type across any store requires a metafield update in all stores. Give me paracetamol.

A lesser known problem of managing metafields for hreflang tags is it ignores all content types like collections filtered by tags common for stores with over 100 SKUs.

Why Choose Multiple Shopify Accounts?

Why would anyone opt for multiple Shopify accounts if the effort to maintain multiple accounts increases and your SEO (out-of-the-box) declines? Especially since Shopify now natively lets you sell in multiple languages and regions from a single account?

Florian from Impression Studios said to me that one reason his agency sets up clients on multiple stores is Shopify Markets requires Shopify Payments, which is available in limited countries. Other reasons he’ll setup clients on multiple stores is because it allows them to do a different homepage and create offers for each region.

The main answer for a multiple store setup is ease and control. When I asked Lori Johnson from BougeRV why they use multiple storefronts, it comes down to flexibility in targeting different cultures, niches, and budgets. “We customize our websites to localize marketing based on habits, attitudes, and cultural differences between different countries and regions,” said Lori Johnson from BougeRV. “To target different audiences in different countries, you  need multiple stores for each country’s products, store layout, and advertising methods. For example, look at the difference between BougeRV Australia and BougeRV Canada, where BougeRV has different product catalogs, images, and text.”

One of the biggest mistakes businesses make in expanding internationally is thinking they can set some shipping rules and people will buy. Shopping habits differ and so does messaging. The work to maintain multiple accounts can be eased. Multiple Shopify accounts can be better managed with the right apps:

  • The Rewind app duplicates products, blogs, themes, pages, and collections. Then there’s also AirPower to achieve a multi-store sync from a single source in Airtable.
  • Manage your orders through a single source like ShipHero.
  • Consolidate customer support with Gorgias. You should be using a helpdesk anyway plus Gorgias doubles up as a solution for managing comments in social media, critical for scaling Facebook Ads.
  • Your SEO doesn’t have to suffer. We created the “Digital Darts: Hreflang Tag” app to help our SEO clients get Google-friendly hreflang tags after years of frustration. You’re able to get perfect hreflang tags within one hour.

Avoid Auto-Redirecting Users

It’s enticing to redirect shoppers to a store based on the user’s IP information. Resist the temptation. “Do not use IP analysis to adapt your content,” says Google’s documentation. “IP location analysis is difficult and generally not reliable. Furthermore, Google may not be able to crawl variations of your site properly. Most, but not all, Google crawls originate from the US, and we do not attempt to vary the location to detect site variations. Use one of the explicit methods shown here (hreflang, alternate URLs, and explicit links).”

The result of this sin is that Googlebot crawls the website then gets redirected to one version based on your redirection rules. The version Google sees will differ from what other shoppers see. When a website treats the Googlebot differently to people, the website is cloaking—a violation of webmaster guidelines.

The wise alternative is to get your hreflang tags right and offer users the option to change their country and language. Most Shopify themes have a country and language selector. Allbirds offer a country selector as a pop-up:

Allbirds country selector popup

And they provide an option in the footer to swap between stores:

Allbirds footer

If your theme does not have such features, Shopify has a template for language and country code selectors.

Two Laws—Make Them Bidirectional and Self-Referential

Hreflang tags need to be bidirectional. If an English-American version refers to your English-Australian version, the Australian version must reference the American version.

This is for security to confirm you own both domains. Otherwise you could use a competitor’s website in a tag that tells Google to give them only Yiddish traffic in Yemen while you hijack all other organic traffic.

Hreflang tags also need to be self-referential. A tag that self-references means it points to itself.

Bidirectional and self-referential hreflang tags

Bidirectional and self-referential tags on a Shopify collection means the hreflang tags are the same between two stores:

<link rel="alternate" href="https://example.com/collections/color" hreflang="en-us">
<link rel="alternate" href="https://example.com/collections/colour" hreflang="en-au">

There is one caveat with self-referential tags: it must point to the rel=canonical tag.

Hreflang and Canonical Tags

Hreflang tags and canonical tags are two types of HTML markup that helps Google understand the right version of a webpage to serve the searcher. One tag controls languages and regions. The other converts multiple representations of a page similar to each other into one. Hreflang tags and canonical tags support each other to deliver the right version of a webpage in search results for good SEO.

The hreflang tag must match the canonical tag of a page. If a hreflang tag differs from the canonical tag, Google will report an error in Google Search Console of a “non-self referencing canonical tag” error.

The link between rel=canonical and hreflang tags is yet another reason hreflang tags are hard to get right in Shopify. There are four areas canonicalization matters in Shopify that you must consider for hreflang tags.

Variants

In SEO, the canonical tag is the URL of a page you want Google to prioritize over its variants. Shopify canonicalizes product variant URLs to the product URL. The page /products/product-name?variant=1234567890 will have a canonical tag of:

<link rel="canonical" href="https://example.com/products/product-name">

Variants URLs have hreflang tags that point to the primary URL, not the variant. This is called a “non-self referencing canonical tag”.

A hreflang and canonical tag is a hint, not a directive that jails Google into compliance. You cannot hold Google at gunpoint to deliver one version of a page in search results over another.

Google considers other page ranking factors to decide what version of a webpage to serve. Is one faster, more mobile-friendly, and filled with useful content? Most Shopify businesses have comparable versions of a store across regions and languages. It’s rare to see an English-Canadian version of a product in one business load slower than an English-American: teams will upload the same photos of the same size to a page that contains similar content on a shared theme. The mirrored resources across regions and languages for a Shopify business prods Google to respect your hreflang and canonical tags.

Pagination

Pagination is a sequence of numbers for content. In Shopify it occurs in blogs, collections, and search results. Pagination eases the life of a shopper by reducing load times and speeding up the shopper’s ability to find what they want. How do you manage hreflang tags with pagination?

If an English store has products D, E, and F on page 2, while the German version of the store has products F, G, and H on page 2, the content is different from each other. It makes sense from an SEO perspective to not point the hreflang tags on these pages to page 2 of each store.

Similarly, the second page of a collection on one store may not exist on another—which may constantly change due to product availability. It gets messier when canonical tags come into play, and they always do in Shopify.

Shopify canonicalizes pagination of URLs to themselves. The page /collections/all?page=2 will have a canonical tag of:

<link rel="canonical" href="https://example.com/collections/all?page=2">

Google’s John Mueller said if this happens, one of the hreflang tags should mention /collections/all?page=2:

Make sure any canonical you specify matches one of the URLs you use for the hreflang pairs. If the specified canonical URL is not a part of the hreflang pairs, then the hreflang markup will be ignored.

On the back of Mueller’s guidance confirmed in an office-hours hangout, the best practice in multi-account Shopify stores is to avoid hreflang tags on paginated content. The strategy gives the added benefit of avoiding hreflang tags that point to empty content.

For the first paginated page, hreflang tags should be included because they match the canonical URL and won’t result in largely different content. The page /collections/all?page=1 has the following canonical and hreflang tags setup right:

<link rel="canonical" href="https://example.com/collections/all">
<link rel="alternate" href="https://example.com/collections/all" hreflang="en">
<link rel="alternate" href="https://example.com/collections/alle" hreflang="de-de">

Collections and Products

Shopify products can have /collections/collection-name/products/product-name in the URL. The canonical tag on such pages points to the shortened version /products/product-name. Your hreflang tags should as well.

Collections can have tags added to the end of URLs that filter results. The URL /collections/collection-name/red will show products in the collection that are tagged with “red”.

For nearly all Shopify SEO clients we’ve worked with, we’ve preferred Google to serve the primary collection over the filtered collection. Filtered collections rarely differ in content aside from containing less products. To change the canonical tag in Shopify so collections filtered with tags point to the parent collection, remove the following from your theme.liquid file:

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

And replace it with:

{% if template contains 'collection' and current_tags %}
<link rel="canonical" href="{{ shop.url }}{{ collection.url }}" />
{% else %}
<link rel="canonical" href="{{ canonical_url }}" />
{% endif %}

Then when you canonicalize collections filtered with tags to the parent collection, the hreflang tags must also point to the canonicalized URL. Each method in this guide does this for you.

How to Choose Your Language and Region Targeting

Language is required. The region is not. Each must be formatted in ISO 3166–1 alpha‑2. Google does not decipher the language if you only define the region. I suggest not including the region in hreflang tags unless you have two versions in different regions with the same language.

Valid formats for the hreflang value include:

  • es: Spanish language content for Worldwide users.
  • en-au: English language content for Australian users.
  • mx-es: Spanish language content for Mexican users.

Always include a tag that uses x-default as a hreflang value. It’s optional, but preferred by Google as a fallback feature. Think of whatever version you set as the x-default as your catch-all store where you want people to go if they shouldn’t go to any other store. For most Shopify businesses, this is their US store.

In the first example of the guide for the Victoria Beckham shop, they should include an x-default option so the tags look like:

<link rel="alternate" href="https://us.victoriabeckham.com/" hreflang="en-us" />
<link rel="alternate" href="https://www.victoriabeckham.com/" hreflang="en-gb" />
<link rel="alternate" href="https://international.victoriabeckham.com/" hreflang="en" />
<link rel="alternate" href="https://international.victoriabeckham.com/" hreflang="x-default" />

There are exceptions to valid formats. Script languages that have variations like Chinese follow the ISO 15924 format. A simplified Chinese hreflang tag targeting Taiwan can look like “zh-Hans-tw”. A traditional Chinese hreflang tag with no region looks like “zh-Hant”.

You are likely able to ignore the exception for variations in script languages because Google is able to derive the correct script from the country. My recommendation with script variations is to include the region. The example of simplified Chinese targeting Taiwan would then look like “zh-tw”.

What Countries and Languages Should You Go After?

When you have international expansion on your mind, how do you determine what countries and languages to go after? The effort to maintain localized content outweighs the cost at some point for your business. You might see a gap in an international market for your product. Maybe you speak a second language that would ease management of the expansion.

Hreflang tags should not be a factor in this decision given you know how to set them up right no matter your strategy.

I recommend clients understand high-converting countries then run more paid advertising to them to grasp potential. You can find these opportunities in Google Analytics. This is a custom report you can mimic:

Google Analytics 4 report to see best performing countries

I did this analysis for a paid advertising global client in Google Analytics 3. We were running ads to over 20 countries.

Google Analytics report to see best performing countries

For this client, they have two Shopify accounts: one for the United States and the other for Australia. A new Shopify account targeting Canada would likely double conversion rate based on a hypothesis of the conversion rate of the two countries that have a dedicated shopfront. The currency displayed by default, shipping messages, and general language could be customized to better connect directly with Canadians.

Why Hreflang Tags Generator Fail

Most guides that show you how to implement hreflang tags are useless because they tell you what hreflang tags look like for the homepage. The writer has no idea what to do. Here’s an example from one well-known SEO tool advising how to do hreflang tags in Shopify:

Bad advice on hreflang tags in Shopify

If you follow this, like a lot of developers I see, you point all hreflang tags of a group of stores to the homepage. Our study of hreflang tags in 100 random Shopify stores found 1 in 25 stores have hreflang tags in all content types pointing to the homepage. You can see what this looks like for a page on the store Kids Ride Shotgun:

Kids Ride Shotgun hreflang tags pointing to homepage

Hreflang tag generators like Aleyda Solis or Geo Targetly—tools that have been used by SEO experts for years—are limiting for Shopify stores with more than a few pages. If you manually manage URLs in your Shopify hreflang tags, you miss URLs like Kids Ride Shotgun or you end up with a large liquid file to maintain between multiple stores.

The best hreflang tag generator for Shopify is the “Digital Darts: Hreflang Tag” app. The second best is a spreadsheet tool. Let’s cover three methods to implement hreflang tags then we’ll dive into the app and spreadsheet tools.

Three Methods to Implement Hreflang Tags

You can implement hreflang tags in a header response, the sitemap, or in the HTML of your page.

1. HTML Tags

The first method to implement hreflang tags is in HTML tags. It is the method shown so far in this guide and my recommended method in Shopify. In between the <head> tags of your theme, the format looks like:

<link rel="alternate" href="https://www.example.com/" hreflang="en" />
<link rel="alternate" href="https://fr-ca.example.com/" hreflang="fr-ca" />
<link rel="alternate" href="https://ca.example.com/" hreflang="en-ca" />

This strategy could be slow in non-Shopify platforms when database calls are made on pages to retrieve dozens of URLs.

Hreflang tags cannot be placed inside the <body> tag because it poses a security risk. One tag injected into the body can hijack all organic traffic.

2. HTTP Headers

You can send a HTTP header in a page to tell Google the language, region, plus alternatives of a page. The header response method is good for non-HTML files like PDFs.

The format is:

Link: <url1>; rel="alternate"; hreflang="lang_code_1", <url2>; rel="alternate"; hreflang="lang_code_2"

Here’s an example “Link: header” returned by a site that has three versions of a PDF file: one for English speakers, one for French Canadians, and one for English Canadians:

Link: <https://example.com/file.pdf>; rel="alternate"; hreflang="en",
<https://fr-ca.example.com/file.pdf>; rel="alternate"; hreflang="fr-ca",
<https://ca.example.com/file.pdf>; rel="alternate"; hreflang="en-ca"

X-default can be used in the lang code. The format follows the language and region settings required for all methods to implement tags.

3. An XML Sitemap

A third method of implementing hreflang tags is in an XML sitemap. You first include a <loc> element to specify a single URL. Within the element, add a xhtml:link attribute for each language and region of a page, including the page itself. The method is similar to the HTML tags method. Keeping with our three-version store, here’s what the sitemap would look like:

<url>
<loc>https://www.example.com/</loc>
<xhtml:link rel="alternate" hreflang="en" href="https://www.example.com/" />
<xhtml:link rel="alternate" hreflang="fr-ca" href="https://www.example.com/fr-ca/" />
<xhtml:link rel="alternate" hreflang="en-ca" href="https://www.example.com/ca/" />
</url>
<url>
<loc>https://www.example.com/fr-ca/</loc>
<xhtml:link rel="alternate" hreflang="en" href="https://www.example.com/" />
<xhtml:link rel="alternate" hreflang="fr-ca" href="https://www.example.com/fr-ca/" />
<xhtml:link rel="alternate" hreflang="en-ca" href="https://www.example.com/ca/" />
</url>
<url>
<loc>https://www.example.com/ca/</loc>
<xhtml:link rel="alternate" hreflang="en" href="https://www.example.com/" />
<xhtml:link rel="alternate" hreflang="fr-ca" href="https://www.example.com/fr-ca/" />
<xhtml:link rel="alternate" hreflang="en-ca" href="https://www.example.com/ca/" />
</url>

The only element that changes between the three groups of URL variables is <loc>. You can begin to see how quickly a sitemap can get bloated with hreflang tags. One upside of a sitemap is it’s independent of content downloaded to the user, meaning it will save a measly 1KB or so (nothing) in data depending on the number of tags. The real benefit of it is having a single source to manage your hreflang tags.

You cannot edit your Shopify sitemap to include this data. If you opt for this method, you need to generate and manage the sitemap yourself. Here’s how to do it for your stores.

How to Manually Implement Hreflang Tags

I’ve made a semi-automated way to use sitemaps to manage hreflang tags in Shopify.

The method can only be used if you have one domain or multiple subdomains on the one domain. Google Search Console invalidates the sitemap when it contains multiple domains. Google has no documentation revealing this limitation so I’ve saved you the heartache of spending hours completing steps then discovering it yourself at the final step. If you want hreflang tags for multiple domains, use the upcoming automatic app method.

1. Copy the Google Sheet Template

Copy the Hreflang Tag Generator by Digital Darts.

2. Specify Languages and Regions

In the first sheet “Settings (1)”, fill in the light orange fields.

Hreflang tag generator settings

Select the language and regions for all your stores. Leave the region value empty unless you have two versions of a store with the same language.

You can set your default and select up to five languages and regions. If you need more, the “Digital Darts: Hreflang Tags” app discussed next, suits you better to automate hreflang tags.

3. Extract Sitemaps

The “URLs for Mappings (2)” sheet is a bonus tool that extracts URLs from Shopify sitemaps. It’s an optional sheet that can save you up to 10 hours getting a clean list of URLs to map. If you already have a list of URLs to map, skip this step.

Example extraction of URLs from Shopify sitemap

Enter the sitemap URL of a store of yours. Sitemaps in Shopify follow the format of https://example.com/sitemap.xml.

The columns populate with every URL in the sitemap. Copy column-by-column, the list of URLs into the “URL Mappings (3)” sheet. Paste them under the one column that matches the language and region in the header.

Once the URLs have been copied and pasted, change the sitemap URL for each store to extract their URLs. Copy-and-paste them into the URL mappings sheet. Repeat for each store.

The “URLs for Mappings (2)” does not change anything in the “URL Mappings (3)” or “Sitemap (4)” sheets. Thanks to Ben Ellwood for a quirky fix required to extract <loc> values inside Shopify sitemaps.

4. Patch the Gaps of URL Mappings

The URLs extracted from your sitemap contains the homepage plus each collection, page, blog, and article in the store. This assembles 90-100% of URLs for most Shopify stores to compile a hreflang sitemap. Yet you may not have a complete list of URLs so be prepared to patch in gaps.

For perfection in your hreflang tags:

  • Add URLs of blog tags. These have the format: https://example.com/blogs/blog-name/tagged/tag-name. If you have blog tags and don’t use them to categorize content to help readers, now’s a good time to save yourself hours—delete the tags.
  • Check your mappings for /collections/all. If you have not created a collection with the URL handle, Shopify creates this by default but doesn’t include it in the sitemap.
  • Add collections filtered by tags. These have the format: https://example.com/collections/collection-name/collection-tag. Stores can have complex filters that create thousands of URLs. If you don’t want these mapped and they serve no SEO purpose, canonicalize the URLs to the primary collection.

If hours of work is required to gather URLs, I recommend you stop this method. Use the method to automatically implement hreflang tags for multiple Shopify accounts.

5. Map URLs

Organize each cell to map to the rows of the first store in Column C.

If you have one thousand URLs across all stores, expect URL mapping to take under one day. Mapping every page of every store is drudgery. I did say this method is semi-automated.

If you happen to discover a way to automate mapping through vlookup or any tool, share it in the comments. I will update the document and steps.

Once you’ve mapped URLs, your hreflang tags are formatted into a sitemap.

6. Upload the Sitemap

  1. Go to the “Sitemap (4)” tab. There your sitemap is in a valid XML format.
  2. Copy all that’s in column A:
Example sitemap copied from the generator
  1. Open a notepad program. Paste the code there. Save the file with the name “hreflang-tags-sitemap” in XML format. If you cannot save it in XML format, Windows notepad lets you save it as the type “All Files” then you can add “.xml” to the file name:
Changing the file type in Windows
  1. In the Shopify admin, go to “Settings” > “Files”. Upload the xml file. Copy the URL of the file.
  2. Return to the Shopify admin then go to “Online Store” > “Navigation” > “View URL Redirects”. Click “Create URL redirect”.
  3. Make the “Redirect from” field /hreflang-tags-sitemap.xml. Paste the URL of the uploaded file in the “Redirect to” field:
Shopify redirect from and redirect to
  1. Go to sitemaps in Google Search Console. Enter the “redirect from” field you set up in Shopify (hreflang-tags-sitemap.xml) as a new sitemap. The only error I’ve seen at this stage is when multiple domains are in the sitemap. Multiple domains are not permitted. It’s why I advise using the semi-automated sitemap method for a single domain or multiple subdomains.
  2. When returning to the Sitemaps section, the number of discovered URLs for the /hreflang-tags-sitemap.xml file will be more than /sitemap.xml. The screenshot below shows only 2 discovered URLs. It was a small sitemap I made to help you visualize a successfully submitted hreflang sitemap for Shopify:
Submitted sitemap in Google Search Console

7. Keep the Sitemap Updated

Maintain the sheet to reflect all versions of all pages. If a product no longer exists, remove the URL in the “URL mappings” sheet. If you create a new collection, include the collection URL. The new sitemap code will update in the sheet.

You then need to:

  1. Update the XML file or create a new one.
  2. Delete the old hreflang-tags-sitemap.xml file in Shopify files.
  3. Upload the updated XML file to Shopify. Copy the file URL.
  4. Edit your redirect in Shopify to redirect to the newly uploaded XML file.

You don’t need to do anything in Google Search Console to notify Google of an update to your sitemap. Google in their help center say, “You shouldn’t need to resubmit a sitemap that we already know about, even if you’ve changed it. Google will notice any changes the next time we crawl your site.”

To further automate it, I think a developer could write a private app that uploads the contents of “Sitemap (4)” into Shopify then updates the redirect.

How to Automatically Install Hreflang Tags for a Single Shopify Account

A solution that agencies and businesses have depended on for hreflang tags in Shopify is apps like Weglot and Langify. They get the job done if you have one Shopify account. If you have multiple Shopify accounts, you cannot use their hreflang tags at all.

The best hreflang tag method for single store accounts is to use Shopify Markets. Shopify inserts its own hreflang tags through {{ content_for_header }} in the theme.liquid file. You can thank the Markets Team and Jackson Lo for this when he came onboard to Shopify in 2020 to fix many such limitations of merchant SEO.

However, like Weglot and other translation apps, you cannot use Shopify’s native hreflang tags if you have multiple Shopify accounts. Your tags will be filled with incorrect or missing references and point to missing pages. Businesses with multiple Shopify accounts require a different solution.

In the event you want to avoid Shopify Markets, and you have multiple languages configured in Shopify, here’s a code base you can customize to match your configurations:

{% if template == 'page' %}
  {% assign hrefhandle = page.url %}
{% endif %}
{% if product.url contains 'products' %}
  {% assign hrefhandle = product.url %}
{% endif %}
{% if template == 'blog' %}
  {% assign hrefhandle = blog.url %}
{% endif %}
{% if template == 'article' %}
  {% assign hrefhandle = article.url %}
{% endif %}
{% if template == 'collection' %}
  {% assign hrefhandle = collection.url %}
{% endif %}
{% if template == 'index' %}
  {% assign hrefhandle = "/" %}
{% endif %}
{% if hrefhandle %}
  <link rel="alternate" href="https://example.eu{{ hrefhandle }}" hreflang="en-ch" />
  <link rel="alternate" href="https://example.eu/es{{ hrefhandle }}" hreflang="es" />
  <link rel="alternate" href="https://example.eu/fr{{ hrefhandle }}" hreflang="fr" />
  <link rel="alternate" href="https://example.com{{ hrefhandle }}" hreflang="en" />
  <link rel="alternate" href="https://example.com{{ hrefhandle }}" hreflang="x-default" />
{% endif %}

How to Automatically Install Hreflang Tags for Multiple Shopify Accounts

In 2019 we had a Shopify SEO client with 8 stores in 6 languages and over 10,000 URLs. It was impossible to automate hreflang tags for multiple Shopify accounts. I knew we weren’t the only ones with the problem. More stores by the day were delivering to new international markets.

I scratched our itch. One year later, we had a private solution turned into a public one you can use today: “Digital Darts: Hreflang Tags“. Shopify’s senior lead for SEO, Jackson Lo, in 2021 tweeted:

Jackson Lo SEO tweet

To automate hreflang tags in Shopify:

  1. Install “Digital Darts: Hreflang Tags” in each store. The first time you install it, you’ll create an account to link your stores.
  2. In the Shopify admin, go to “Online Store” > “Themes” > “Customize”. Enable the app embed for your hreflang tags.
  3. Wait for your stores to sync.
  4. Any page, collection, blog, blog tag, or article that has the same URL handles as another store will automatically map to each other. Products automatically map based on SKU. You can change products to map by barcode from your settings at the top-right:
Map products by SKU or barcode
  1. Select the language and region for each store, and the default store from the dashboard:
Language and region selection in the app
  1. Map any unmapped content in the app like you would in a spreadsheet.
Multi-Store Hreflang Tag Mapping Example
  1. (Optional) If you’ve previously used a universal language in your URLs across stores to deal with hreflang tags, you can now catapult SEO and improve the user experience by editing URL handles in the same language as the store. Your hreflang tag mappings will automatically update.

What You Need to Do Differently for Bing

The Bing search engine looks at different signals compared to Google. Bing considers hreflang tags less than its rival. “Hreflang is indeed a far weaker signal than content-language at Bing,” said Fabrice Canel on Twitter who is Bing’s project manager for Bing Webmaster Tools and document discovery.

You cannot depend on hreflang tags to deliver the right language and region of a page in Bing and Baidu search results. Instead, use the language and locale in the <meta>, <html>, or <title> tags of the document.

Pick one of the three methods. I suggest the first meta method because it has priority over the other two. In order of priority accepted by Bing, this is how you configure each one:

  1. <meta http-equiv="content-language" content="{{ request.locale.iso_code }}">. Place this code in the <head> tag of your Shopify theme. This will output <meta http-equiv="content-language" content="en-us">.
  2. <html lang="{{ request.locale.iso_code }}">. Place it in the <head> tag of your Shopify theme. This will render HTML like <meta http-equiv="content-language" content="en-us">. One <html> tag is permitted and required in a webpage. Most Shopify themes have this markup in place.
  3. <title lang="en-us">. Place it in the <head> tag. The language and locale information in the tag has the least priority, meaning if conflicting information exists in the <title> tag and <html> tag, the <html> tag takes precedence. If you use this method, check if the other two exist to avoid an accident.

The second primary influence you have over Bing is the country code in the top-level domain. If you want to maximize search visibility on Bing in Australia, your Australian Shopify store should be a .au domain. For the UK, it’s a .uk domain. Whether the domain should be a .com.au, .net.au, .id.au, is believed to be irrelevant to tell Bing your website’s country. However, the type of top-level domain beyond its country code affects a website’s ability to rank.

The third influence Bing publicly stated as affecting Bing’s understanding of the website’s country and language is the document location. “For each document we add to Bing’s index, we perform a reverse IP lookup to determine the document’s location. Reverse IP information is yet another signal used when other signals are less conclusive.”

Hreflang Tags Checker

These are my three recommended ways to check hreflang tags.

1. Ahrefs.com Site Audit

The ahrefs.com site audit is one of few online that looks at a whole website rather than a single page. Semrush achieves similar things, but I’ve always depended on ahrefs.com for their amazing link analysis.

Set up a new project then you can run an audit.

ahrefs site audit

The downside of this method is the wait for the googlebot to crawl pages then update the report.

2. Hreflang Checker Chrome Extension

I created the Hreflang Checker Chrome extension as a light-weight solution to quickly check the hreflang tags of a page. All other tools take minutes to review a page, which is frustating when you want to check only one page or when you’ve made changes.

Hreflang Tag Checker

3. Screaming Frog Scan

A Screaming Frog scan is the most comprehensive way to check hreflang tags. It is quick, accurate, and comprehensive. Follow their tutorial to audit and test hreflang tags. You only need to scan one website as the hreflang tags across any domains in the tags will be checked in the tool.

In minutes you’ll have a report like this with everything to address in your tags:

Screaming Frog scan of hreflang tags and errors report

How to Fix Hreflang Tags with Errors

The following are a complete list of errors given in ahrefs, Semrush, and Screaming Frog. You learn why the hreflang errors occur and how to fix them:

Self-Reference Hreflang Annotation Missing, No Self-Referencing Hreflang Tag, Missing Self Reference

The warnings occur when the page does not self-reference in its hreflang tags. A self-reference is conditional but good practice. On the page https://example.com/collections/all, the warning is produced when no hreflang tag references https://example.com/collections/all or its canonical URL.

To fix the warning, include a self-referencing hreflang tag. On the page https://example.com/collections/all, there needs to be a hreflang tag such as:

<link rel="alternate" hreflang="en" href="https://example.com/collections/all" />

No Return-Tags, Missing Reciprocal Hreflang, Missing Return Links

The errors occur when pages are not self-referential. If product A has a tag pointing to product B, product B must have a tag pointing to product A.

To fix the errors, add bidirectional tags for the affected URLs. If you get the error using the “Digital Darts: Hreflang Tags” app or the sitemap solution in the guide, it’s because Google needs more time to crawl all pages.

Hreflang Annotation Invalid, Wrong Language or Region Codes, Incorrect Language & Region Codes

The errors occur when the language or region codes are in an invalid format. Each language and region must be formatted in ISO 3166–1 alpha‑2. An exception is script languages like Chinese, which can follow ISO 15924. Also, if a region is included, it must follow the language. Each example has an invalid hreflang annotation:

<link rel="alternate" hreflang="eng" href="https://example.com/collections/all" />
<link rel="alternate" hreflang="us-en" href="https://example.com/collections/all" />
<link rel="alternate" hreflang="en/us" href="https://example.com/collections/all" />
<link rel="alternate" hreflang="-us" href="https://example.com/collections/all" />

Fix the error by using the correct code in the correct order. Use hyphens to separate language and region.

Inconsistent Language & Region Return Links

The error occurs in Screaming Frog when the return link has different language or region codes to the reference. Locate the Screaming Frog errors in bulk from Reports > Hreflang > Inconsistent Language Return Links.

Inconsistent Language & Region Return Links

Fix the error by using the same language and region codes on the pages as everywhere else.

Hreflang to Broken Page, Pointing to Non-Existent Pages, 404 Errors, Non-200 Hreflang URLs

The errors occur when a link in the hreflang tags point to a non-existent page. In Screaming Frog, the error “Non-200 Hreflang URLs” for Shopify stores can also mean a hreflang tag is a 301 redirect.

References to non-existent pages are common for multiple Shopify accounts that depend on liquid code to render hreflang tags. These businesses must have the exact content across all stores with the exact URL handles otherwise the error occurs.

The errors can be stopped with a good hreflang tag solution. You won’t get the error with the “Digital Darts: Hreflang Tag” app because the tags update as you remove content or change URL handles.

If you use the sitemap solution shared in this guide, change the URL of the broken page to the right URL handle. If the content no longer exists, remove the URL.

Page Referenced for More Than One Language in Hreflang

The error occurs when a page has two tags that set different languages. One page with the one URL cannot serve two languages. The HTML below produces the error:

<link rel="alternate" hreflang="en" href="https://example.com/collections/all" />
<link rel="alternate" hreflang="es" href="https://example.com/collections/all" />

To fix the error, remove the wrong link tag.

More Than One Page for the Same Language in Hreflang, Multiple Entries

The errors occur when two or more hreflang tags have a language, or language and region, identical to each other. This confuses Google with what version of a page you want to serve searchers.

For example, your tags can contain “en”, “en-us”, and “en-au” but there cannot be two instances of any. The HTML below produces the error because it has two domains set to the English language:

<link rel="alternate" hreflang="en" href="https://example.com/collections/all" />
<link rel="alternate" hreflang="en" href="https://example.ca/collections/all" />

Fix the error by having one language, or language and region, in tags.

Hreflang and HTML Lang Mismatch

The error occurs in the ahrefs site audit tool when the language in a hreflang tag differs from the HTML lang value. Google depends on hreflang tags to serve the right version of a page. Bing and other search engines use the HTML lang value.

Fix the error by matching the two values. Refer to “What You Need to Do Differently for Bing” in the guide.

X‑default Hreflang Annotation Missing, Missing X-default

The error occurs when pages do not contain the x-default hreflang tag. The x-default tag is a fall-back when a language, or language and region, match no other tags. It is a warning given in ahrefs.com, rather than an error, since Google does not require the x-default tag.

To fix the warning, locate the affected pages then include a x-default tag. For Shopify, if you put in place the sitemap solution or our app, as long as most of your other pages have the x-default, it’s fine to ignore this warning. The value is optional. Your main store set to the x-default will not have all the content of your other stores.

Hreflang to Non-Canonical, Non-Self Referencing Canonical Tag, Not Using Canonical

The type of error occurs when a hreflang tag points to a non-canonical URL. The hreflang tag must match the canonical tag of a page.

Fix the error by changing the hreflang tag of affected pages to point to their canonicalized version. The fix depends on what content type the error occurs or how you manage your tags. Refer to “Hreflang and Canonical Tags” in the guide.

Conflicting Hreflang and rel=canonical

The error occurs in Semrush when the page URL, rel=canonical, and hreflang tags do not mirror. As this error is reported in a third-party tool other than Google, you need to cross-check it against what Google advises.

Non-canonical pages that have hreflang tags, according to Semrush, should canonicalize to itself. Semrush says to use a self-referential canonical tag when using canonical tags on a webpage:

Semrush conflicting hreflang and rel=canonical tags

Semrush give an example within an infographic on tag errors reported in their tool:

Semrush example of conflicting hreflang and rel=canonical tags

The example has a French page canonicalize to English. They are right in saying it is an invalid use of rel=canonical tag. However, it is a miss-leading error because the rel=canonical and hreflang tag do not conflict with each other—the URL in the browser differs.

The error occurs in invalid situations. Using a similar example to theirs, if the page URL is https://www.example.com/fr-ca/page.html?utm_source=google, they want hreflang tags like:

<link rel="canonical" href="https://www.example.com/en-au/page.html?utm_source=google">
<link rel="alternate" hreflang="fr-ca" href="https://www.example.com/fr-ca/page.html">
<link rel="alternate" hreflang="en-au" href="https://www.example.com/en-au/page.html?utm_source=google">

That defeats the purpose of canonicalization. Shopify stores will get the error because canonicalization is abundant.

You do not need to fix the issue. Many other tools like Screaming Frog or online single page inspectors of hreflang tags will not give the error. I am against Semrush based on Google’s John Mueller advice to “make sure any rel=canonical you specify matches one of the URLs you use for the hreflang pairs. If the specified canonical URL is not a part of the hreflang pairs, then the hreflang markup will be ignored.”

Semrush and anyone else is welcome to get in contact with me to discuss and correct anything in this guide that is inaccurate. Two years since I first published this guide, nothing has changed.

Noindex Return Links

The error occurs in Screaming Frog when a page cannot be indexed. Locate the Screaming Frog errors in bulk from Reports > Hreflang > Noindex Return Links.

Screaming Frog noindex return links

Fix the error by removing the noindex meta tag on the affected pages.

Not All Pages From Hreflang Group Were Crawled

The warning in the ahrefs site audit tool occurs when the hreflang tags on a page were not crawled.

ahrefs.com error: Not all pages from hreflang group were crawled

The message is usually of minor concern. You may have stopped the crawl before it could complete the audit. Your website can be fine despite the message. I see this warning on multiple domains.

To help the tool crawl those pages, refer to your ahrefs “no-crawl” report for why these pages went uncrawled. When viewing the affected URLs, do what you can to get the pages crawled to provide an accurate audit of your tags.

Keep Tags Up-to-Date

The “Digital Darts: Hreflang Tags” app makes keeping tags up-to-date simple. Products automatically map based on your settings of either matching the SKU or barcode values. Other content types will automatically map if they have the same URL handles. For ones with no match, map them in the app.

What matters is you have a way to intentionally stay on top of tags. To do this, create a recurring monthly task in your project management software. I love ClickUp. Whatever you use, here is a standard operating procedure you can copy-and-paste to keep your tags fresh:

What: Keep Hreflang Tags Up-to-Date.

Why: Hreflang tags tell Google the relationship between alternate web pages. It specifies what language is each version of the web page and the region it serves. When a new product, collection, page, blog, or article is created, or an existing URL is modified, update hreflang tags. This is a monthly check to keep hreflang tags fresh for good international SEO.

How:

  1. Use Screaming Frog to scan the whole website.
  2. Use the Hreflang Checker Chrome extension to rapidly inspect single pages https://www.digitaldarts.com.au/hreflang-tag-checker
  3. View then fix errors. Refer to the Digital Darts hreflang tags guide in associated material for what the errors mean and how to fix them.
  4. Add new products, collections, pages, blogs, articles, and tags to your hreflang tags:
    1. If you use the “Digital Darts: Hreflang Tags” app:
      1. Log into the app from your Shopify admin.
      2. Go to “Mappings”.
      3. Click on the dropdowns of each store at the top to see any unmapped content.
      4. Map alternate versions of content to each other.
    2. If you use the XML sitemap sheet:
      1. Add the new content types to your URL Mappings sheet.
      2. Update the XML file or create a new one.
      3. Delete the old hreflang-tags-sitemap.xml file in Shopify files.
      4. Upload the updated XML file to Shopify. Copy the file URL.
      5. Edit the Shopify redirect for hreflang-tags-sitemap.xml to redirect to the newly uploaded XML file.

Associated material: How To Add Flawless Hreflang Tags In Shopify At Last: https://www.digitaldarts.com.au/hreflang-tags-shopify

“Digital Darts: Hreflang Tag” app FAQ: https://www.digitaldarts.com.au/hreflang-tags-shopify-app

To learn more about this standard operating procedure format, which Digital Darts uses to manage systems, listen to an interview with Josh on the Ecommerce Influence podcast: https://www.ecommerceinfluence.com/processes-and-systems/

When to mark complete: The “how” steps have been completed or no new content types were created in the past month.

When you keep your hreflang tags up-to-date, you may see a decrease in traffic to one store as people are taken to another store. Review bounce rates, average session duration, and other engagement metrics in Google Analytics that indicate people landed on the right website. Hopefully you also get a bonus increase in traffic from the shared ranking signals of having perfect hreflang tags.

Well done on perfecting your tags. You’ve learned everything there is to know in this guide. Your international technical SEO strategy is now better than publicly funded Shopify stores.

Do you need help growing the organic sales of your Shopify store through SEO? We are certified Shopify Experts at growing organic search for Shopify stores. Get in contact to see if you qualify to become a client.

Hreflang Tags FAQ

Why are hreflang tags important?

Hreflang tags tell Google the relationship between alternate web pages. The biggest benefit of hreflang tags is more revenue from improved rankings. A second benefit of hreflang tags is it avoids duplicate content.

Does hreflang solve duplicate content?

By using the hreflang attribute, search engines are told which version of a page should be displayed to users based on their language or region. This minimises issues with duplicate content that impacts the page’s visibility in search results.

How do I add hreflang to Shopify?

  1. Use Shopify Markets for single stores.
  2. Use the “Digital Darts: Hreflang Tags” Shopify app to get hreflang tags instantly done.
  3. Copy the Hreflang Tag Generator by Digital Darts. Specify languages and regions, extract the sitemap, then map URLs.
  4. Manually manage tags in metafields then add to your theme’s code.

Liked this article? Get more free Shopify guides:

You Might Also Like Learning:

4 Comments. Leave new

  • As someone who is about to launch a second (duplicate) store, this is incredibly helpful. Will absolutely be using your app. Thanks Joshua

    Reply
  • Redirecting URLs at scale solely for the purpose of changing the language of the URL for “SEO purposes” is a terrible idea. It can take a long time for Google to pick up on the signals and for the most part, language signals in the URL aren’t that strong anyway. Otherwise, there is some good advice here – thanks

    Reply
  • This is great! There’s not a lot of decent info out there on this topic.

    Here’s a dilemma for you; I have a shopify store using a .com domain.

    It’s targeting an Australian audience, and it is written in AU-English (no dupes)

    If the search console can no longer perform country targeting, will using hreflang assist with that?

    Reply
  • Hi John. I wouldn’t call that a dilemma. It is just a standard situation that hreflang tags solve. It is what hreflang tags are made for.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Fill out this field
Fill out this field
Please enter a valid email address.

This site uses Akismet to reduce spam. Learn how your comment data is processed.