Shopify Hreflang Challenges

In the past week, we have had a few former Hreflang Builder subscribers reach out to ask if we can take a look at the hreflang tags that their agency had implemented for them. Their SEO agencies argued that Google preferred tags (not true), and as the Shopify system natively supports hreflang there is no need to spend money on an external solution.

I was reviewing my Semrush project and I can see that there are “148 hreflang conflicts within page source code”.
Do you know how I can fix the issue?

Several common errors are created when experts and gurus misinterpret the rules of hreflang. In this case, I assumed the hreflang was missing cross-referenced versions. I started with their country/language selector to understand what should be in the hreflang cluster.

Multiple Domain Variations

They have a fairly typical structure targeting markets and regions. On their country selector, they list nine specific markets and International and EU options. All the versions use a gTLD domain dot com, some use subdomains, and others use folders.

When I go to the root domain, IP detection takes me to the US site at https://us.example.com/. Looking at the hreflang cluster, I see that not all sites are represented.

<link rel="alternate" hreflang="en-US" href="https://us.example.com/">
<link rel="alternate" hreflang="x-default" href="https://www.example.com/">
<link rel="alternate" hreflang="en-GB" href="https://www.example.com/">
<link rel="alternate" hreflang="en-AU" href="https://www.example.com/en-au">
<link rel="alternate" hreflang="en-NZ" href="https://www.example.com/en-nz">
<link rel="alternate" hreflang="en-CA" href="https://www.example.com/en-ca">

I first note that all of the sites in this cluster are the gTLD and country/language folders except for the US. As this is the US home page, it does list the US website targeting en-US, the root domain targeting x-default and en-GB, and three folders designating English versions for AU, CA, and NZ. This cluster only represents some English language markets and lacks four language markets and the EU targeting website.

Since all of the non-English versions are missing, I reviewed the source code for the France website, where I found the cluster below:

<link rel="alternate" hreflang="x-default" href="https://eu.example.com/">
<link rel="alternate" hreflang="de-DE" href="https://de.example.com/">
<link rel="alternate" hreflang="en-IE" href="https://eu.example.com/">
<link rel="alternate" hreflang="en-FI" href="https://eu.example.com/en-fi">
<link rel="alternate" hreflang="fr-FR" href="https://fr.example.com/">
<link rel="alternate" hreflang="nl-NL" href="https://nl.example.com/">

Not surprisingly, this cluster is for all the other market sites using a subdomain with the gTLD. This is the most common problem we encounter with hreflang on Shopify websites. As they are set up differently with the subdomains and gTLD folder structure Shopify cannot combine them since they are in different instances. This is precisely why we have many Shopify users that have multilingual websites.

Problem #1 – In the US cluster, the root domain is designated as the X-Default, and in the France Cluster, the eu subdomain is set as the X-Default. You cannot have two different pages set as x-Default.

Problem #2 – None of these pages is cross-linked to each other. They all represent the alternate home pages of this brand and must all be listed and reciprocated in their collective hreflang clusters.

Problem #3 – Not an hreflang problem, but the English website for Finland is not listed on the country selector.

Not seeing the root domain listed in the non-English cluster using incognito, I went to the root gTLD.

<link rel="alternate" hreflang="x-default" href="https://www.example.com/">
<link rel="alternate" hreflang="en-GB" href="https://www.example.com/">
<link rel="alternate" hreflang="en-AU" href="https://www.example.com/en-au">
<link rel="alternate" hreflang="en-NZ" href="https://www.example.com/en-nz">
<link rel="alternate" hreflang="en-CA" href="https://www.example.com/en-ca">

This cluster was nearly identical to the US cluster except that it was missing the US alternate and the root domain was set as the X-Default.

Problem #1 – There are two different pages designated as the X-Default. In the US and GB clusters, the root domain is designated as the X-Default, and in the France Cluster, the EU subdomain is set as the X-Default. You cannot have two different pages set as x-Default.

Problem #2 – None of these pages is cross-linked to each other. All pages listed in these clusters represent the alternate home pages of this brand and must all be listed and reciprocated in their collective hreflang clusters. A key purpose of hreflang is to remove ambiguity to a market and potential duplication, especially with the same language. The agency seemed to try to do this with the US and GB clusters but they left our en-IE from the US cluster and the US from the en-GB cluster.

Problem #3 – Not an hreflang problem, but the English website for Finland is not listed on the country selector.

Using Folders to Set Hreflang

In the second case, their SEO diagnostic tool told them they had hreflang errors and they turned out to be incorrect ISO settings for the country. This is one of the biggest mistakes and we see an increase as some plugins and scripts try to use the ccTLD or folder structure to set the language and region for the site.

In this next example, this former subscriber decided to use a plugin suggested by their SEO agency to add hreflang tags to their pages. When I looked at the source code I found the following:

<link rel="alternate" hreflang="en" href="https://www.example.com/">
<link rel="alternate" hreflang="de" href="https://www.example.com/de/">
<link rel="alternate" hreflang="fr" href="https://www.example.com/fr/">
<link rel="alternate" hreflang="en-ANZ" href="https://www.example.com/en-ANZ">
<link rel="alternate" hreflang="es-LAT" href="https://www.example.com/es-LAT/">
<link rel="alternate" hreflang="cn-ZHT" href="https://www.example.com/cn-ZHT/">
<link rel="alternate" hreflang="cn-ZHS" href="https://www.example.com/cn-ZHS/">

Problem #1 -The system used the folders to create the hreflang entries and in doing so created references that are not correct. The language element is all correct but there are no ISO region codes so the ANZ which they meant for Australia and New Zealand should have been mapped to both markets using en-AU and en-NZ respectively. The Chinese entries are reversed. The language code is ZH and the country should be CN.

As they are trying to designate a specific script between Traditional and Simplified Chinese, they could use zh-zh-Hant for traditional or zh-zh-Hans for Simplified. Google will also understand zh-TW for Taiwan and assign Traditional Chinese and zh-CN and will assign Simplified Chinese.

Review your Implementations

It is critical to review your implementation to make sure they are correct. There are a number of incorrect interpretations about how to use hreflang. You can review our list of hreflang rules to get a better understanding of the requirements to get this correct. Note that Hreflang Builder has built-in guardrails to prevent these mistakes from happening. Also, Hreflang Builder is not server dependent which is why many sites that have complex and varied domain structures use it as we can map those alternates and deploy them via XML sitemaps that eliminate these issues.