What is Hreflang?
Hreflang is an attribute implemented on a webpage to signal to Google that there are international versions of a page available. Regardless of the domain choice mentioned above you will need hreflang tags as a necessity for optimal international targeting.
Without hreflang it’s going to be considerably harder for Google to know which store to rank in which country and for which language.
Still confused? Think of it like this:
If you have a product page targeting the USA and the same product targeting the UK, there may be very subtle differences in the copy and targeting e.g. currency and reference of USA only terms. See these 2 Thread pages as an example:
Thread’s product page in the US
Thread’s product page in the UK
Above the fold, both are identical except for the currency and the country reference at the top of the page.
However, these subtle differences are not enough for Google to pick up on and decide “right this URL is for Google.com and this URL is for Google.co.uk”. This is where hreflang comes in.
Both pages would have a tag referencing its alternative that would look similar to these:
<link rel=”alternate” hreflang=”en-us” href=”https://thread.com/us/item/mvp-tinsley-cotton-poplin-slim-fit-shirt-white/6442003“>
<link rel=”alternate” hreflang=”en-gb” href=”https://thread.com/gb/item/mvp-tinsley-cotton-poplin-slim-fit-shirt-white/6442003 “>
This tag then specifically tells Google “this page is for the UK’ and this is the “exact same page but it’s for the USA”.
Note 1: hreflang is one of the strongest signals we can give to Google for multi-language multi-region targeting. Despite this, we still cannot control targeting perfectly and Google may still rank a UK page in the USA if it has found stronger signals to rank it.
Note 2: While it’s not essential to have a self-referencing hreflang tag on the page, it is essential to have the referenced page to re-reference back. If the UK page has a hreflang to the USA page, then the USA page needs to reference the UK page back as a reciprocal link, otherwise, hreflang won’t work.
Why is hreflang essential for e-commerce brands?
Whilst elements like a different currency or language on a page could signal to Google that a page is an international version, it’s often not enough for Google to fully understand the localisation and targeting required.
E.g. multiple countries speaking the same language:
- French speaking areas of Canada
- Spanish speaking areas of South America
- American English, Australian English etc.
- Brazil / Portugal portugese
So, the purpose of hreflang is to give Google a direct signal to tell it which location the specific content should be targeting.
What language and region codes are needed for hreflang?
There are hreflang generators available to help you get your head around the correct code and ensure you have the correct language/country codes.
You should specify the language first and then the region. For some countries these are the same e.g. fr-fr (French speakers in France). Whereas for UK and USA it would be en-us and en-gb.
As mentioned previously Google supports ISO 639-1 for language codes and ISO 3166-1 Alpha 2 for optional region codes.
It’s essential to highlight that the language codes are different to country/region codes. Below are a few examples of common pitfalls due to anomalies between the 2 sets of codes.
- The UK is not ‘uk’ as a code Google understands. Instead it is ‘en’ for english and ‘gb’ for Great Britain.
- Sweden is ‘SE” for country targeting and ‘SV’ for the Swedish language.
- Japan is ‘JP’ for country targeting and Japanese is ‘ja’.
Therefore it’s essential to reference these lists for all new markets.
How to target multilingual countries?
When targeting international countries it’s important to consider local market languages and reflect this on your website.
Taking Switzerland as an example, this country speaks 4 different languages:
When searchers in Switzerland use Google it’s going to be very difficult to interpret which language they will choose. Therefore your website needs to accommodate all 4 languages if it’s to have the best possibility of ranking above competitors in this country.
To achieve this, SEOs make use of the international codes outlined in the previous section. Using Switzerland as an example we would use the following country codes to tell Google the language and country we are targeting:
- English searchers in Switzerland = “En-ch”
- Italian searchers in Switzerland = “It-ch”
- French searchers in Switzerland = “Fr-ch”
- German searchers in Switzerland “De-ch”
Again, this comes back to the previous section where we highlight to only create these multiple stores if you have the resource to manage them and if someone is keeping on top of your SEO to monitor any issues.
We’ve previously consulted www.cafeducycliste.com about their international set up. The client highlighted that they’d built too many stores in the past which was causing confusion for themselves and for Google. The issue arose from the fact they were a French born country and therefore tried to capture as many French speakers across the world. For example, creating an fr-gb site despite there being very limited French searchers demand in the UK.
How to implement hreflang tags?
According to Google, there are three different ways you can implement Hreflang attributes on a site:
- HTML Tags
- HTTP Headers
XML sitemap is often our preferred option for a large eCommerce style website. This is because it’s served directly to Google and you don’t need to rely on page loading. This is only a preference and if you already have hreflang on site there’s no need to re-do it and add to the sitemap (unless you are having issues with wrong pages ranking in certain locations). It’s important to note you should only be using one of the above options to ensure consistency. If one of your many options is clashing with the other it’s likely Google will ignore your tags all together.
How do I know if I need hreflang for my eCommerce website?
The only time you will not need hreflang is if you are selling products to a single country that has a single language e.g. the UK only or the USA only.
You will need to set up hreflang as soon as you open a new store to sell to another country or if you translate your store to target a different language.
How to identify if you are using hreflang already?
To identify if you have hreflang onsite:
- simply right click and click ‘inspect’
- Do a CTRL + F
- Search for ‘hreflang’
If you have it on-site you should see something like the following code appear:
To check if you have hreflang in your XML sitemap, open your XML sitemap (often found on yourdomain.com/sitemap.xml but varies per CMS and/or plugin being used.
Often you will have a separate sitemap just referencing hreflang which you can repeat the steps above and identify if you have the code.
What to consider when implementing Hreflang on eCommerce websites?
Once you have identified the correct language and region codes to use (best to use the online tool to generate) then you can start the implementation process with your developer.
Check whether the CMS you’re using supports hreflang and if it has any limitations. For example implementing hreflang in salesforce can be tricky causing more room for error.
- Shopify can be tricky to implement. The approach we often implement is based on Paul Rogers solution to keep all URLs consistent across all stores and then using the metafields app to generate the hreflang codes.
- For Magento you can use a plugin like Amasty to implement hreflang tags.
- As mentioned previously our preference is to use the XML sitemap for eCommerce sites due to their size, depth and not relying on the page load for Google to read the codes. Again, this is just a preference and on-site tags are completely fine too.
- It’s best practice to have self-referencing hreflang implemented on your site, again not essential but preferred.
- It’s essential not to implement onsite AND in the XML sitemap. If there are errors or conflicts between the 2 Google will just ignore them.
- It’s also recommended to set up localised search consoles for each language – location folder for reporting and error tracking. This also provides you with further targeting options to provide to Google. For example:
- Google search console has an international targeting report to help manage and fix errors.
- Every hreflang needs a reciprocal link e.g. if the USA site links to the UK then the UK needs to reference back to the USA.
- You do not need to have region codes, you can use a broad ‘fr’ or ‘en’ to tell Google this is the preferred store for French speakers but only use this to reference one store. E.g. do not point ‘fr’ to .fr and to .ca as this will confuse Google and cause hreflang to be ignored.
What are some common eCommerce hreflang mistakes?
In the words of John Mueller, “hreflang is one of the most complex aspects of SEO (if not the most complex one)” meaning there is lots of room for error. Even from the most experienced of SEOs.
Below we’ve listed some of the most eCommerce hreflang mistakes and how to bypass them.
- The language code should always come first, then the country code. E.g. en-us and en-gb not gb-en or us-en.
- Triple check your language codes. For example for Japanese – use JA-JP, not JP-JP and Sweden uses SV-SE (for the language name Svenska) etc.
- Hreflang works in pairs. Remember alternates need to reference all other alternates. Typical errors are usually ‘non-reciprocal links’, this means if the ‘en-gb’ version of a URL links to the ‘en-us’ version of a landing page using hreflangs, it’s essential for the ‘en-us’ version to then link back to the same ‘en-gb’ landing page.
- Alternate URLs don’t always need to be in the same domain.
- Remember that you need to consider shipping as well. So you can’t have a UK site targeting all EN speakers if the shipping supplier is different in US to UK.
- Avoid having an hreflang country code for every single country when it’s not needed. You can use GA to see which languages & countries people are visiting from which can help to understand if you need a website for that variation. If you find it’s like 0.2% of your traffic and not a priority to grow, chances are you don’t need a website to target so you won’t need hreflang for that.
- Linking to international domains which aren’t live yet.
- Wrong canonical references, e.g. if product A has a canonical tag to product B then Google will read and process the hreflang on product B not product A due to the canonical
What do you do when you don’t have some products in some countries?
If you have products or pages in one store but not in another store then do not reference in your hreflang. A common mistake would be to implement on mass which will cause the hreflang to reference 404 pages. Those 404s will not have reciprocal links back and will cause Google to discount your hreflang tags sitewide.
What is the Href X=Default tag?
This x=default tag should be used on all pages that do not target specific locations, it tells Google if there is no language specified this is the default page to use.
It’s best used for generic landing pages that target globally, for example a language / country selector page.
The best example of this would be the (old) Ikea & Nike homepage, when language and IP can not be determined.
Typically this tag is best used for a large multinational corporation with many stores across the world.
We’ve also used the x-default to target a store set up to target all of Europe. As mentioned previously you can not target all of Europe through hreflang. therefore, we use an x-default so if Google doesn’t match a language or IP to existing hreflang tags then the EU store will be shown as a fallback.
How to Manage hreflang tags
Due to the complexity of hreflang tags it’s common for errors to occur, particularly for eCommerce style websites.
Google search console has an international targeting report to help manage and fix errors:
This is an old report and in the new Google Search Console you will need to go to the legacy section here (only available in URL views and not domain level).