12 Dec
With the increasing number of Shopify stores, we look forward to more ways to increase the website’s visibility to users in multiple countries. One way of doing this is considering what languages a store is offered in, as well as how to best localize content for customers.
Google introduced the hreflang attribute in 2011, to help website owners and developers show search engines the relationship between web pages in alternate languages or region-specific pages.
Let’s introduce you to a feature called Hreflang which is used to solve these international SEO problems.
What is the hreflang?
The hreflang is an HTML attribute placed on a element, which tells a search engine like Google that you have multiple versions of a web page for different languages or regions.
By specifying hreflang for these multiple versions, it will help a search engine point to the most appropriate version of your page; potentially increasing your site’s visibility in search results for users of a particular region.
By using hreflang, you can help to reduce a site’s bounce rate and improve conversions by ensuring that your target audience arrives on the version of your site that is most suitable for them.
What are the hreflang attributes?
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.
Patching 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
The most important thing to remember is 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
There is a special hreflang fallback value that is 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.
Therefore 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.
Why we need hreflang?
When a brand have multiple websites for different regions and languages how can a search engine know which website is for which region? Here is the point where we need hreflang.
To make it clearer let’s look at the example below:
Example:
Gymshark is a Shopify website. It has different websites 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?
Here we need hreflang attribute to differentiate both websites so they can rank in their specific regions.
Hreflang Rules
For hreflang tags to validate, you 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 Mistakes
Here are the most common hreflang problems we came across:
1. No Return Links – By far the most frequent Hreflang problem we see is pages where there are no return Hreflang links. 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.
How to check hreflang tags?
Now, let’s find out how to check the hreflang tags.
1. 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 can simply visit any page and press the toolbar icon. The extension will then check whether there are any hreflang tags on the current URL.
2. 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.
3. 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
The HTML tag method described above is the easiest way to set up hreflang, but there are two alternate approaches:
1. XML Sitemap
2. HTTP Headers
XML Sitemap
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.
HTTP Headers
Whenever a web browser visits a page, the server returns information about that page to your web browser. This is the HTTP response. You can configure your server to return hreflang information in the HTTP header response.
How to add hreflang to Shopify?
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. Instead we recommend 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 discussed above.
Add hreflang to Shopify via an app
There are some Shopify apps that add Hreflang tags to your pages. 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 with multi-language. Most apps don’t provide language + country hreflang targeting nor do apps factor in multiple stores across different domains.
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:
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 you’ll have to hire a Shopify expert to do this for you.
Use a Custom Field
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.
For this you can use another app called Custom Field. With custom fields you can create completely new metafield 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.
Also, you can build your own hreflang tags in Excel and then add them directly into the custom field on a page-by-page basis.
Additionally, if you have the Custom Fields Plus plan, you can import your product hreflang tags via a csv upload.
Conclusion
Now you know what Hreflang is, and how you can use it to provide the right translated version of your content to the right people. Preventing search engines from reading your content as duplicates of each translated version, and being able to specify your content for specific languages and regions will serve to benefit your website and SEO performance.
There are lots of ways to implement hreflang tags but it’s often complicated and it’s hard to get right on each site (particularly with multi-store).
If you need further help with this, contact us.