If you have a multi-language store on Shopify, you may be once concerned about how to display it properly for your local audiences. As you may know, the language barrier is one of the biggest problems for all customers, but you don’t have to worry about that anymore as Hreflang tags are definitely your go-to method.
This article will discuss everything about the Hreflang tag, from what are the hreflang tag basics, to its benefits, and how to troubleshoot its related common problems.
What is a Hreflang tag?
The hreflang tag is a link element that helps Google determine the language of the website then provide search results to users. It looks like:
This tag allows an international website to deliver results based on the search language or the searcher’s location.
Code sample:
This code tells Google that the English version of the page is displayed specifically to a US reader.
To be more specific,
- rel=”alternate”: Similar to the rel=”canonical” tag, this is the code that tells search engines that there is a different version of this website.
- href=: URL followed by href= is the location of the specified page.
- hreflang=: This hreflang attribute indicates the language and country of the alternate webpage. Language and country code are used here to specify which websites to display.
Language codes should conform to ISO 639-1‘s two-letter coding style when written in hreflang tags.
Examples: en (English), es (Spanish), zh (Chinese).
If you are translating only one page in the same country, the country code is unneeded. However, if you use a country code, it must comply with the ISO 3166-1 Alpha 2 format.
Example: au (Australia), sg (Singapore).
When writing hreflang tags, always put the language code first and then the country code.
Example: en-au, es-us, zh-sg.
Where are the Hreflang tags placed?
Google Support has mentioned that the Hreflang tag will be put in 3 places:
- In the HTML header of the page as a link
- In HTTP header (for non-HTML files like PDF)
- On XML sitemap
Specifically for Shopify, the hreflang attribute is placed in the <head> element of your theme as in the first place mentioned above, and you are enabled to include as many hreflang attributes as required. This will help to specify a specific page in your website has multiple versions. For example, if the homepage of your store has English content which is localized for the US and the UK (where the default URL is https://my-store-url.com) the hreflang property might look like this:
How to add hreflang tags to Shopify store
To add hreflang tags to your Shopify store, just go to your theme.liquid file.
- Go to your Shopify admin page > Choose Online Store > Themes.
- Choose the theme you want to edit > click Actions > Edit code.
- In the Layout folder, open theme.liquid.
- Find the closing </head> tag > Paste the hreflang tag right above it.
- Click Save
When should I use the Hreflang tag?
The hreflang tag is of great importance to any SEO strategy. You can use this both when your website is completely the same with different alternative languages or your website has different content in the same language.
For example, your website has content in English for Australia, UK, and the US, but provides specific offers (i.e. in local currency) for each category. In this case, it should be written as:
The hreflang tag will help the content increase SEO efficiency. Like canonical tags, hreflang helps avoid Duplicate Content-related penalties. In addition to having content in multiple languages, you can also have content targeted to different local customers. This allows content personalization for a specific language region.
Difference between Hreflang tags and Canonical tags
The Canonical tag (also known as “rel canonical”) is a way of informing search engines which URL of a particular page will be displayed on search result pages, and that no URL can be duplicated.
In other words, using canonical tags prevents identical or “duplicate” content from appearing on multiple URLs since these tags tell search engines which version of the URL you want to appear in search results.
Hreflang, on the other hand, is a tool for showing which alternative pages will show up in search result pages. Based on language or region, these tags will assist Google in determining the proper website version then offering appropriate search results to searchers.
What are the benefits of using Hreflang?
There are two primary reasons why you should use hreflang. The first one is for better user experience. Content which is specific to an audience and delivered in their own language will attract and satisfy their search expectations. This results in lower bounce rate of your website and better page rank.
Moreover, this helps to prevent duplicate content problems. If your own pages have the same content in different languages or region-specific content in the same language, Google may not understand and consider it duplicate content. This will affect your page rank on search engine result pages a lot. Like canonical tags, Hreflang helps to avoid many penalties related to duplicate content on your websites.
Another way to ensure that your website content is not duplicated, you can use SEO apps on Shopify App Store to have this automatically done. This will not only help track duplicate content but also other SEO tasks namely check broken links, edit meta tags and verify website URLs. These play an essential role in making sure Google better understands your webpage and then help improve your ranking and drive more organic customer traffic.
Common mistakes related to Hreflang tags
According to the research of Search Engine Journal, up to 75% of websites have hreflang errors. Take a look at the checklist below to know whether your website has these or not.
hreflang values
Most hreflang errors arise as the hreflang attribute is set to the incorrect value. This incorrectness can be the wrong country code, en-as (incorrect) instead of en-au (correct), or the wrong language code eng-au (incorrect) instead of en-au (correct), or including only the country code without the language code (it is only acceptable in the opposite way). Another mistake related to hreflang value is to use an underscore _ instead of a dash – between the language and the country code.
Self-referencing hreflang tags
That the page doesn’t contain a self-referencing hreflang in its hreflang attributes is also a common mistake, which 96% of websites have. To put it in another way, the URL indicated in the hreflang URL is not compatible with one of the pages that it was on.
For example, if you are on the Contact page of your website from our above-mentioned example, your hreflang might be like this:
Unqualified Alternate URLs
It is very crucial to make sure the URLs are fully qualified when it comes to specifying alternate URLs. This means you should include the full link:
https://my-store-url.com/contact (correct)
Instead of:
//my-store-url.com/contact or /contact (incorrect)
Missing return links
If page X is linked to page Y, then page Y must also be linked back to page X. If not, the pages which use hreflang attributes are incompatible with their alternatives, then they might be ignored or not properly interpreted.
In conclusion
Hreflang tags are so much more important when it comes to SEO strategies, so it is highly recommended for merchants, particularly ones on Shopify, to fully understand this. Once following the above hreflang implementation guide to get started localizing content, your multi-language store will be able to approach more and more local customers.