Hreflang and SEO on multilingual websites (Guideline)
In our experience, hreflang is one of the most commonly misunderstood and poorly implemented features we encounter regularly in SEO audits. Which is one of the reasons we decided to write this article.
Let’s have a look at what hreflang is, what it’s used for, and how to properly implement it on a website. We’ll also go over some of the most common mistakes and see some examples of setting up hreflang for different use cases.
What is hreflang and what does it do?
Hreflang is a piece of code that we attribute to a website so that search engines have a clear idea of what audience we want to target on a given landing page, considering the language of the browser and the current geographic location. It’s used if you have a multilingual website with identical content pages that only differ in their translation to another language.
Thanks to this attribute, the search engine can better evaluate which of your website’s landing pages should be displayed to a visitor from Slovakia, for instance, and which one to a visitor from abroad.
What are the implementation methods?
Hreflang can be implemented in 3 basic ways. Some are more suitable for smaller websites, or ones with fewer language versions, while others are practical for websites translated into dozens of languages.
These are the methods:
- using HTML tags in the <head> section
- using HTTP headers
- using the Sitemap.xml file
We will discuss each in more detail in this article. You will also find all the methods explained on the official Google Search Central page along with specific recommendations.
1. Implementation in the <head> section
Setting up hreflang using HTML tags in the <head> section is probably the most common method, and it’s also the one we prefer at Visibility. The correct way to write hreflang code in HTML should look like this:
<link rel=“alternate“ hreflang=“lang_code“ href=“url_of_page“ />
In this case, it is necessary to observe the following rules:
- The “link” tag should be placed as high as possible in the <head> section of the landing page,
- it should include the rel=”alternate” parameter every time,
- it should contain the correct language (the region is not necessary, but can also be included),
- it should contain the absolute URL of specific pages on your website, not their relative versions,
- the “link” tag should be closed />,
- you should designate a version in the case of an unspecified language (x-default),
- you should tag every single language version via a separate “link” tag,
- remember to tag the language for the landing page where you’re implementing hreflang,
- each URL should have a separate canonical tag.
Not sure what the correct codes for your language and region are?
Use the ISO 639-1 format for the language (marked by two lowercase letters), and the ISO 3166-1 Alpha 2 format for the region (marked by two uppercase letters).
Examples of correct implementation (EN/SK/CZ/HU):
The simplest use case of setting up hreflang is when you have one website with English and other language versions typical for our region. In this example, we’ll use the website https://www.example.com with versions in English, Slovak, Czech, and Hungarian.
Insert the following code into the <head> section:
<link rel=“alternate“ hreflang=“x-default“ href=“https://www.example.com/“ />
<link rel=“alternate“ hreflang=“sk“ href=“https://www.example.com/sk/“ />
<link rel=“alternate“ hreflang=“cs“ href=“https://www.example.com/cz/“ />
<link rel=“alternate“ hreflang=“en“ href=“https://www.example.com/en/“ />
<link rel=“alternate“ hreflang=“hu“ href=“https://www.example.com/hu/“ />
Remember that the head section of each URL should contain the appropriate canonical tag in addition to the correct hreflang tag.
The x-default option indicates which version of the page Google should display if the user’s language is not specified by hreflang. Ideally, this should be the English version of the website, as it remains the most universal language globally, as well as in our region. It is therefore highly likely that a visitor for whom you don’t have the appropriate language version set up would still understand your website in English.
Unless you have specific language versions of the website targeting specific regions, for instance one English version targeting the UK and another one targeting the US, you don’t need to specify the region.
Similarly, if the language versions are located on separate subdomains, insert the following code into the <head> section:
<link rel=“alternate“ hreflang=“x-default“ href=“https://en.example.com/“ />
<link rel=“alternate“ hreflang=“sk“ href=“https://sk.example.com/“ />
<link rel=“alternate“ hreflang=“cs“ href=“https://cz.examplecom/“ />
<link rel=“alternate“ hreflang=“en“ href=“https://en.example.com/“ />
<link rel=“alternate“ hreflang=“hu“ href=“https://hu.example.com/“ />
Example of the correct implementation of hreflang codes (SK/EN):
Do you run a website that has one English and one Slovak version? In this case, we recommend setting up hreflang in the <head> section as follows:
<link rel=“alternate“ hreflang=“x-default“ href=“https://www.example.com/“ />
<link rel=“alternate“ hreflang=“en“ href=“https://www.example.com/“ />
<link rel=“alternate“ hreflang=“sk“ href=“https://www.example.com/sk/“ />
<link rel=“alternate“ hreflang=“cs“ href=“https://www.example.com/sk/“ />
Since we have an English version, we recommend setting it as x-default for all the languages that are unspecified by hreflang and also for English. Other than that, we only have the Slovak version of the site. If we specified only Slovak, we would run the risk of the site being displayed in English to our Czech users.
Given the similarity between Slovak and Czech, we would lean towards defining an identical URL within the hreflang for both languages, even though this is not entirely “by the book”.
Example of the correct implementation of hreflang codes (CZ/EN):
If we only have English and Czech versions of the website, we recommend setting hreflang in the <head> section following the example above. The only difference is in the URL address for Slovak and Czech, where we use the Czech version:
<link rel=“alternate“ hreflang=“x-default“ href=“https://www.example.com/“ />
<link rel=“alternate“ hreflang=“en“ href=“https://www.example.com/“ />
<link rel=“alternate“ hreflang=“sk“ href=“https://www.example.com/cz/“ />
<link rel=“alternate“ hreflang=“cs“ href=“https://www.example.com/cz/“ />
Example of the correct implementation of hreflang codes (SK/CZ):
Do you have a website that only has Czech and Slovak versions? In this case, we recommend setting the hreflang in the <head> section as follows:
<link rel=“alternate“ hreflang=“sk“ href=“https://www.example.com/sk/“ />
<link rel=“alternate“ hreflang=“cs“ href=“https://www.example.com/cz/“ />
Here, we ignore x-default as we do not have a suitable language option for other languages that are unspecified by the hreflang settings. In our experience, it is preferable to leave the decision to Google in this case.
2. Implementation using HTTP headers
Implementation using HTTP headers is practical for URLs that don’t follow the classic HTML format. This method is therefore suitable, for instance, for PDFs that websites often publish online in multiple languages. If you would like to learn more about HTTP headers, check out this article.
The correct format for the header is as follows:
Link: <url1>; rel=“alternate“; hreflang=“lang_code_1″, <url2>; rel=“alternate“; hreflang=“lang_code_2″, …
Example of correct implementation:
Link: <https://example.com/file.pdf>; rel=“alternate“; hreflang=“en“,
<https://sk.example.com/file.pdf>; rel=“alternate“; hreflang=“sk“,
<https://de-at.example.com/file.pdf>; rel=“alternate“; hreflang=“de-AT“
3. Implementations via the sitemap.xml file
The least practical way to define hreflang code is probably using the Sitemap.xml file. If you only have a few language versions of your website, you can implement hreflang in this way as well.
However, in the case of a large number of languages, the Sitemap file becomes cluttered and complicated. Hence why we don’t usually recommend this solution.
Examples of correct implementation:
<?xml version=“1.0″ encoding=“UTF-8″?>
<urlset xmlns=“http://www.sitemaps.org/schemas/sitemap/0.9″
xmlns:xhtml=“http://www.w3.org/1999/xhtml“>
<url>
<loc>https://www.example.com/en/page.html</loc>
<xhtml:link
rel=“alternate“
hreflang=“sk“
href=“https://www.example.com/sk/page.html“/>
<xhtml:link
rel=“alternate“
hreflang=“de-AT“
href=“https://www.example.com/de-at/page.html“/>
<xhtml:link
rel=“alternate“
hreflang=“en“
href=“https://www.example.com/en/page.html“/>
<xhtml:link
rel=“alternate“
hreflang=“x-default“
href=“https://www.example.com/en/page.html“/>
</url>
<url>
<loc>https://www.example.com/sk/page.html</loc>
<xhtml:link
rel=“alternate“
hreflang=“sk“
href=“https://www.example.com/sk/page.html“/>
<xhtml:link
rel=“alternate“
hreflang=“de-AT“
href=“https://www.example.com/de-at/page.html“/>
<xhtml:link
rel=“alternate“
hreflang=“en“
href=“https://www.example.com/en/page.html“/>
<xhtml:link
rel=“alternate“
hreflang=“x-default“
href=“https://www.example.com/en/page.html“/>
</url>
<url>
<loc>https://www.example.com/austria-deutsch/page.html</loc>
<xhtml:link
rel=“alternate“
hreflang=“sk“
href=“https://www.example.com/sk/page.html“/>
<xhtml:link
rel=“alternate“
hreflang=“de-AT“
href=“https://www.example.com/de-at/page.html“/>
<xhtml:link
rel=“alternate“
hreflang=“en“
href=“https://www.example.com/en/page.html“/>
<xhtml:link
rel=“alternate“
hreflang=“x-default“
href=“https://www.example.com/en/page.html“/>
</url>
</urlset>
Warning:
Google treats the hreflang tag as a recommendation, not a command (unlike noindex tags). So even with the correct implementation, ultimately the search engine can still change its mind. However, if everything is properly implemented and translated, the search engine has no reason to disregard your attribution using hreflang tags.
The most frequently encountered errors
Like most other technical aspects of websites that play a role in search engine optimisation, hreflang is part of our SEO audits. As a result, we’ve had a fair amount of experience over the years of correcting frequently repeated errors.
The following is an overview of them:
- absent or poorly specified x-default tag,
- unclosed tag,
- incorrect tagging of Czech (CZ is the designation of the region, while the language is denoted by cs),
- absent hreflang backlinks,
- not using absolute URLs,
- mislabelled or missing canonical tags,
- mislabelling of the region for Great Britain (although UK stands for United Kingdom, the region is referred to as GB),
- missing hreflang tagging for the URL itself (self-referencing).
Any other errors were encountered rather rarely. So, if you’re auditing the hreflang for a particular website, you’ll know what to look for. Statistically speaking, any given website is probably going to contain several of these.
Hreflang for different platforms
In order to select the best way to implement hreflang on your website, you first need to determine what platform your website runs on. Below is a short overview of the most popular platforms.
Hreflang for WordPress
The easiest way to implement hreflang on websites built on the WordPress platform is via plugins. There are several practical solutions to choose from.
If you are in the planning phase for a multilingual website, use one of the following plugins:
In addition to hreflang, they also provide several other features that will come in handy.
If you already have a website and just want to set up hreflang:
We recommend choosing the one that will match your current needs the most. Naturally, this won’t always come free.
Hreflang for Prestashop
Extensions and add-on modules for Prestashop tend to be more expensive than other platforms. Hreflang is no exception. One of the most popular solutions is called SEO Google Hreflang & Canonical Tags on All Pages. There is a free alternative available, but its functionality and compatibility might be limited.
Hreflang for Shopify
As with the other platforms, there are modules and extensions for Shopify allowing you to incorporate hreflang into your website quite easily. However, these are usually paid too.
Fortunately, nearly everyone has a trial version where you can try the module and its compatibility for free.
We want to highlight these solutions purely for hreflang:
More complex solutions for translating websites that include hreflang:
Hreflang for Custom Websites
Is your website, or your client’s website “custom coded” without using any of the popular platforms mentioned above? In that case, you need to custom implement the hreflang itself as well.
Depending on your level of IT education and skills, you can either implement hreflang on your own following the recommendations and examples above, or contact a programmer, which is going to involve additional costs.
The best tools for auditing and testing Hreflang
As with the other technical elements of the websites we audit for search engine optimisation, we use a variety of practical tools to help us test hreflang.
Here’s a list of the most basic hreflang auditing tools:
- Screaming Frog – every SEO specialist’s Swiss Army knife. You can also download the free version. Although this version has its limitations, it should suffice for an hreflang implementation audit on a smaller website. If you have the paid version, this allows you to do a comprehensive analysis of the entire website, especially if there are more than 500 URLs.
- Google Search Console – another classic that should not be overlooked. In the “International Targeting” section, you can gradually identify any problematic areas in your website’s current hreflang settings.
- Technical SEO – if you want to do a spot check of selected URLs on the website focusing on the proper implementation of hreflang tags, we recommend this online tool that will identify any errors and give you recommendations that you should implement.
- The hreflang Tags Generator Tool – Use this online tool to generate the hreflang code for specific URLs. It’s ideal for those trying to implement hreflang on their own.
- Hreflang.org – a simple online tool for bulk URL validation. Just insert them all at once, click “Test Hreflang Implementation” and wait for the analysis to finish.
You can also find countless similar tools online. Try them out and find the one that suits you best.