Correct way for Hreflang implementation

TimboH3at5 · ‎11-05-2024

Hello,

Through vairous apps and website audit tools - i am getting a common theme of Hreflang not being implemented correctly in our website code.

We moved from Glopal at the start of 2023 and went to shopify markets, targeting mainly the USA and France.

Our main domain language is english and domain is co.uk and but our secondary localised language is USA $ on the .com side of our website. We also have a french translated website but this is set to the co.uk/fr.

How should the code be written in the head of the Liquid theme code.

Many thanks in advance for you help and support.

Tim

DaisyVo · ‎02-13-2025

Hi @TimboH3at5

Hey there, thanks for sharing your issue! I see you're trying to get your hreflang tags set up properly after moving from Glopal to Shopify Markets, especially for your UK, US, and French versions of the site. Getting hreflang right is super important for SEO and localization, so let’s break this down and make sure it's done correctly.

Understanding the Setup

From what you’ve described, your current setup looks like this:

Primary domain: co.uk (English - UK)
USA site: com (English - USD)
French site: co.uk/fr (French - France)

This means your hreflang implementation should clearly indicate the correct language and region variations for search engines to serve the right content to the right users.

Correct Hreflang Code for Shopify Markets

In your theme.liquid, you should place this within the <head> section:

{% if request.locale.iso_code == 'en' and request.host contains 'co.uk' %}

{% elsif request.locale.iso_code == 'en' and request.host contains 'com' %}

{% elsif request.locale.iso_code == 'fr' %}

{% endif %}

Breakdown of This Code:

1-Each page has a self-referencing hreflang tag – this helps Google avoid confusion.

2-Correct language-region codes:

en-gb for the UK (.co.uk)
en-us for the USA (.com)
fr-fr for the French version (.co.uk/fr)

3-Includes an x-default tag for users who don’t match a specific region, directing them to the UK site by default.

Common Hreflang Mistakes to Avoid

Missing self-referencing hreflang tags (each page should include itself).
Incorrect ISO language or country codes (must be en-gb, en-us, etc.).
Forgetting the x-default (important for users outside these regions).
Not adding the correct Shopify Market URLs (Make sure your domain settings in Shopify match what’s in the code).

This setup should ensure that search engines properly index and serve the right version of your site to the correct audience.

If you need extra help, just let me know asap. Thanks
Daisy.

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution

Correct way for Hreflang implementation