Very often proud owners of multi-language websites come to me asking me the same question: Why Google can’t correctly understand the geographic focus of my website pages? Why is my English page competing with my French page in Europe? Why is my American page outranking my English page in the UK?
The answer to these questions is always very simple. When it comes to international multi-language websites in order to help your language/regionally targeted content rank and also to avoid duplicate content you have to implement the hreflang link-attribute (the so-called rel=”alternate” hreflang=”x” link-attribute).
Simply put, by using the hreflang attribute you can make sure that the Googlebot knows that the content on your pages is also available in other languages and that a URL with hreflang=”fr” is for users in France and Google has to serve the French version instead of the English version.
Note: Do not specify a country code by itself as Google can’t automatically establish the language from the country code. On the other side, you can only specify a language code by itself.
What is the Hreflang Attribute?
The Hreflang Tag is an HTML meta element that was first introduced by the Internet Engineering Task Force in 2010. The Hreflang Tag specifies language and regional targeting for documents online.
What does the hreflang tag look like?
<link rel=”alternate” hreflang=”en-GB” href=”http://example.com/page/” />
Explaining this markup is easy. Rel=”alternate” simply tells Google that there is another URL with the same content but in a different language. The first two letters after the hreflang part of the markup specify the language. The last two letter specify the country and the URL indicates which page the tag applies to – in this case, the English homepage.
Straight away it’s quite obvious that “en-GB” is the most important part of the code. This part tells Google that the page in question is in English (en) and it has to be served in the United Kingdom (GB).
In order for Google to understand your code, you have to use the ISO 639-1 format for language codes but you can also get more definitive by using the ISO 3166-1 Alpha 2 format to inform Google which region you’re targeting.
Note: Looking at the example above tells you straight away that not all of the country codes are intuitive (the code for the UK is ‘gb’, not ‘uk’ as ‘uk‘ is for Ukraine), so be very careful before implementing the wrong code all over your website.
Although using the Hreflang Attribute Tag is an essential part of any SEO geo-targeting strategy, it is not the ‘magic bullet’ for website internationalisation. Apart from the correct rel=”alternate” hreflang=”x” markup on the website, Google also takes other factors into account when trying to understand the language and the country for a website page.
The following elements ( in no particular order) are also used by Google in order to determine the geo-location target of a website:
- Country code top-level domains (ccTLDs).
- The language of the website.
- Search Console geo-targeting settings.
- Backlinks coming from specific geo-locations.
- The server location of the website.
- Currency and address formats displayed on the website.
How do I correctly implement Hreflang tags on my website?
For a start, there are three ways of implementing the Hreflang Tags?
In the <head> of your page, e.g.
<head> <title>Hello! My name is Omi Sido</title> <link rel="alternate" href="https://example.com/en-gb/" hreflang="en-gb" /> <link rel="alternate" href="https://example.com/en-au/" hreflang="en-au" /> </head>
In the HTTP header of your documents, e.g.
Link: <https://example.com/en-gb/>; rel="alternate"; hreflang="en-gb", <https://example.com/en-au/>; rel="alternate"; hreflang="en-au"
Note: Unless this is the only viable implementation method I normally don’t recommend implementing hreflang in the HTTP headers. When reviewing a page, many SEO/digital marketing tools will look at the source code but not the HTTP headers so this tag is significantly more likely to be overlooked.
In an XML sitemap, e.g.
<?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://example.com/en-gb/</loc> <xhtml:link rel="alternate" hreflang="en-au" href="https://example.com/en-au/"/> <xhtml:link rel="alternate" hreflang="en-gb" href="https://example.com/en-gb/"/> </url> <url> <loc>https://example.com/en-au/</loc> <xhtml:link rel="alternate" hreflang="en-au" href="https://example.com/en-au/"/> <xhtml:link rel="alternate" hreflang="en-gb" href="https://example.com/en-gb/"/> </url> </urlset>
The markup above is only for two URLs so you gonna need a lot of output to do this for a lot of URLs but on the other side using sitemaps for hreflang will help you to avoid bloating your HTML markup and HTTP headers.
Note: I would strongly recommend to choose only one of these methods, and to not mix implementations.
When to use the x-default Hreflang Tag?
Note: The x-default tag is optional. You will not break your hreflang tags implementation if the x-default is not there.
X-default hreflang example
<link rel="alternate" href="https://example.com/en/page/" hreflang="x-default" />
With that in mind, the x-default hreflang tag is used to state the default version of your page for searches outside of your specified hreflang tags. For example, if you specify hreflang tags for en-gb and en-ca, but Google thinks your page is also relevant for an English query in Australia, specifying the x-default tag will inform Google which page version they should send searchers to.
Another way to explain the x-default hreflang tag is: a special hreflang tag that specifies where a searcher should be sent if none of the languages you’ve specified in your other hreflang links matches their browser settings.
So in this example href=”https://example.com/en/page/” hreflang=”x-default”, if a searcher is looking for your page in Macedonia and you don’t have a ‘Macedonian hreflang tag’ on your page Google will server the English version of this page.
The Hreflang and rel=canonical brotherhood
From an SEO point of view, I am a big fan of the rel=”canonical” tag and it can and should be used with your Hreflang Tag markup. But “here’s the catch. Every language should have a rel=”canonical” link pointing to itself.
So if we are on the home page (English) of our website the code should look like this:
<link rel="canonical" href="https://example.com/en/"> <link rel="alternate" href="http://example.com/en/" hreflang="en" /> <link rel="alternate" href="http://example.com/en-gb/" hreflang="en-gb" />
And if we are on the ‘UK homepage’ the code should be:
<link rel="canonical" href="http://example.com/en-gb/"> <link rel="alternate" href="http://example.com/en/" hreflang="en" /> <link rel="alternate" href="http://example.com/en-gb/" hreflang="en-gb" />
Very often I see the mistake where people are setting the canonical on the en-gb page to http://example.com/en/ confused by the same language (especially if the homepage is simply http://example.com/).
If you have pages /us/en/, /uk/en/, /br/pt and simply /de/ all of these pages must contain your hreflang tagging. You simply can’t just put the hreflang tags on one of your pages. In order for Google to understand the hreflang tags, every single variation of your website must include hreflang tags.
Useful tools when implementing the Hreflang markup
In my opinion, you only need two tools to successfully start implementing hreflang. The first tool by Aleyda Solis called ‘The hreflang Tags Generator’ will help you correctly “generate the hreflang tags patterns to use in the different language and country versions of your pages”.
Once you’ve added the hreflang markup to your pages, you’ll want to validate it and then it’s probably also a good idea to regularly audit your implementation to make sure it’s still set up correctly. To do that I strongly recommend the OnCrawl hreflang tool.
This tool can help you easily get a global view of your internationalization by giving you an overview of your hreflang tags so you can make sure everything is still in perfect working order by creating a custom hreflang dashboard.
Other noticeable benefits of the OnCrawl Hreflang tool:
1. Identify non-indexable pages containing hreflang tags
2. Find pages in language X without a translation in language Y
Probably the best feature of this tool is that it helps you identify pages you don’t have translations for yet. For example, the tool will let you find pages that already have an English and a French version, but not a German one.
Setting up hreflang is not a difficult process but first, you need to truly understand exactly how the hreflang attribute works. Although the process may look a bit too technical for some it is very much worth addressing especially if you already have sections of your website in different languages or for that matter in the same language but for different countries and the language on your pages is confusing your visitors.
As things in SEO are constantly evolving I will try and keep this guide up to date so next time you are implementing or troubleshooting your hreflang tags please check back.