HREFLANG for International SEO
The Complete Guide to International SEO & hreflang: Avoiding International Duplication
Let’s say you have a multilingual website and you would like to maximize its organic performance in each country that you operate in. Hreflang markup was created by Google so that you can serve the correct content for each country that you operate in.
To properly implement hreflang, you have to optimize your content (and your code!) to make sure search engines can properly navigate and show relevant results for each country. Let’s say your page ranks in English, but the user who searches for your content is German. In this case, you would want search engines to show him a .de version of that page.
What you need to solve this issue is International SEO and these small pieces of code called hreflang tags.
International sites like Amazon use it and there’s a pretty good reason for it too. They have:
- https://www.amazon.com/ as a default, international website
- https://www.amazon.de/ for German users
- https://www.amazon.fr/ for French users
- and so on…
So, let’s figure out why websites use international SEO and how you can implement it on your website.
Why International SEO Matters
To answer this question is to answer why you would want to have content in multiple languages.
The reason why this is a thing is obvious: to improve the user experience. Google is all about good user experience.
If you have web content specifically aimed at your customers in Germany, they will, on average, be more receptive to it. Multilingual websites perform better, they have lesser bounce rates, customer satisfaction goes up and it also solves the duplicate content issue with search engines.
To solve language differences in search engines, we use hreflang attribute in the code.
hreflang Attributes
hreflang tags are used to solve the language difference issue with search engines, they look like this:
<link rel=”alternate” href=”http://yourwebsite.com” hreflang=”en-us” />
In this case, hreflang=”en-us” relates to the American version, instead of the British one which would be “en-gb”.
By using hreflang, you let Google know that there’s a specific version of your site’s page for a specific language. That way, your German customers will be redirected to the page containing German language. hreflang uses user’s current location and language preferences to determine which page to show. If the user has multiple language preferences, the primary ones are used.
To properly use hreflang attribute, you need to learn about the correct methods of implementation, as well as country & regional codes for each country/region that you want to target.
Country & Regional Codes
To properly implement hreflang attribute, you need to be aware of the right values for each specific language, which can also be combined with a region later on. We’re talking about the hreflang=”xx” piece of code.
The format for language attribute is ISO 639-1 (ending in two letters). An example of this would be:
- de for the German language
- fr for the French language
- es for the Spanish language
- and so on…
On top of that, you can also add regional attributes, following the ISO 3166-1 Alpha 2 format, for different countries that use the same language, such as:
- en-us for American English
- en-gb for British English
- en-au for Australian English
- en-ca for Canadian English
- and so on..
Another good example of this would be the German language which is used in many different countries such as Germany (de), Austria (at), Switzerland (ch) and more.
Now that we have a firm grasp on the different country and regional codes, let’s take a look at how you can implement hreflang attribute to your website. There are three different methods to achieve this.
Hreflang Technical Implementation Methods
There are three ways to implement hreflang to your page:
- In the <head> section, using HTML link elements
- Within a XML Sitemap
- Or in the HTTP header
- Hreflang markup as a HTML link element in the <head> section
The first method of implementation is to add a piece of code to the <head> section of each page, such as:
<link rel=”alternate” href=”http://yourwebsite.com/” hreflang=”en” />
<link rel=”alternate” href=”http://yourwebsite.com/en-gb/” hreflang=”en-gb” />
<link rel=”alternate” href=”http://yourwebsite.com/en-au/” hreflang=”en-au” />
You need to this for each variation and each web page that contains multilingual content. The issue with this is if you have many different languages, it can get quite heavy and mess with your page load speed. After all, this code is only for the search engines and users can’t interact with it, but they still have to download it.
2. Hreflang markup within a XML sitemap
Adding hreflang tags within a XML sitemap can get quite difficult, especially if you have lots of pages and languages to work with. The code is somewhat longer and slightly more difficult, such as this one for only two other languages:
<url>
<loc>http://www.yourwebsite.com/</loc> <xhtml:link rel=”alternate” hreflang=”en” href=”http://www.yourwebsite.com/uk” /> <xhtml:link rel=”alternate” hreflang=”en-gb” href=”http://www.yourwebsite.com/au/” /> <xhtml:link rel=”alternate” hreflang=”en-au” href=”http://www.example.com/uk/” />
</url>
XML sitemap markups are time-consuming but they won’t affect your users or slow down your page load times. Another benefit is that it’s easier to change a sitemap than all the pages individually in case of some changes.
3. Hreflang markup in the HTTP header
This method is used for content other than HTML documents, such as PDF files and so on. The code looks like this:
Link: <http://es.yourwebsite.com/document.pdf>; rel=”alternate”; hreflang=”es”, <http://en.yourwebsite.com/document.pdf>; rel=”alternate”; hreflang=”en”,
<http://de.yourwebsite.com/document.pdf>; rel=”alternate”; hreflang=”de”
You can use this for PDFs but problems from the first method remain — increased page load times.
Solution to no matching languages: x-default attribute
If none of the specified languages match your user’s browser settings, the x-default attribute comes in.
The “x-default” hreflang attribute informs Google that a certain page is not associated with any particular language or region, it is considered a default page. If there’s no specific match, Google sends your users here.
<link rel=”alternate” href=”http://yourwebsite.com/” hreflang=”x-default” />
You should include this with your other pieces of code. As an example of this, let’s say you have 3 pages:
- http://yourwebsite.com/en-us for American users
- http://yourwebsite.com/en-gb for British users
- http://yourwebsite.com/en-au for Australian users
You are also going to add x-default attribute next to all that for http://yourwebsite.com/ which will be the default page for users outside of these 3 countries (like Germany for example).
Verification & Helpful Tools
To make sure your implementation was successful, you will have to verify hreflang using search console or various online tools that help with this. Using free tools such as this one from Sistrix, you can check to see if your hreflang tags are working properly.
hreflang tag testing tool by Technical SEO is also a good and simple one.
flang, by DejanSEO is another one of those tools that can be used, this one for <head> section hreflang markups.
It’s probably a good idea to perform a regular audit for your hreflang tags, to make sure it’s all working correctly. In case you delete or redirect certain pages, make sure everything else is updated.
Table of Contents
FAQ
What Happens in the Case of Incorrect Implementation?
The worst case scenario of wrong implementation is a drop in domain rankings. This is mostly due to the issue of duplicate content, which makes it harder for Google to decide which to rank for.
Does the ISO-code capitalisation matter?
In short, it does not. Google accepts lower case versions for the regional codes.
How do hreflang and rel=canonical work together?
rel=”alternate” hreflang markup and rel=”canonical” should be used together. Every specific page translation should have a self-pointing rel=”canonical” link.
So if you were to add a ref=”canonical” to your en-gb page, it would look like this:
<link rel=”canonical” href=”http://yourwebsite.com/en-gb/”>
Don’t make the mistake of using <link rel=”canonical” href=”http://yourwebsite.com/”> on a translated page and that’s it!