If you want to expand your business internationally or if you notice that your site is receiving a significant amount of traffic from countries other than the one in which you’re based, it’s time to implement an international version of your site.
But how do you do it?
Do you get a new geo-targeted TLD like .de, .es, .fr?
Or do you use a subdirectory on your current domain like example.com/de or a subdomain like de.example.com?
When you start to look for answers to these questions the chances are that you’ll come across rel=”alternate” hreflang=”xx”.
Read on to find out what hreflang is and how you can use it for international SEO.
What is hreflang?
The hreflang tag (also referred to as rel=”alternate” hreflang=”x”) helps you to tell Google which version of your website should be shown in which country. In other words, when you use this tag on your site you’re basically telling Google which language you’re using on a specific page so the search engine knows to serve that result to users searching in that specific language.
This creates a better user experience as it ensures that the correct language version of your site is shown to the right users in the correct country.
Here’s how Pierre Far, Webmaster Trends Analyst at Google UK, explains it:
“The idea of rel-alternate-hreflang is to help you signal to our algorithms that although these two pages have substantially the same content, the small differences between them are still important. Specifically, the small differences are relevant for users of a specific language (and in a country).”
- Multi-regional and multilingual sites – Google explains the differences between multi-regional and multilingual sites and how you can target site content to a specific country.
- Hreflang – Google’s official support article on how to use hreflang for language and regional URLs
When should you use hreflang?
There are many situations when you can use hreflang so let’s take a look some of them:
1. Same language, different parts of the world
You can use hreflang to target variants of a single language and indicate which region the content should be localised to.
For example, a site in the US refers to football as “soccer” while in the UK it’s called “football”. When you implement hreflang, Google will know which version of the site to deliver to US-based users so they see content that’s relevant to them.
So you could have the following versions of your site:
- example.com/en-gb/ will target UK users
- example.com/en-au/ will target Australian users
- example.com/en-us/ will target USA users
This is useful as it allows you to geo-target users as well as control variations in shipping, currency, seasonality and more.
2. Different languages
You may want to target users who speak different languages, so again you would have different versions of the site each using a different language:
- example.com/en/ – Targets English-speaking users
- example.com/es/ – Targets Spanish-speaking users
- example.com/de/ – Targets German-speaking users
Alternatively, you may want to target your site based on both location and language, as per the examples below:
- example.com/en-gb/ – Targets English-speaking users from the UK
- example.com/en-au/ – Targets English-speaking users from Australia
- example.com/en-us/ – Targets English-speaking users from the USA
- example.com/es/ – Targets Spanish-speaking users, independent of region
- example.com/it-ch/ – Targets Italian-speaking users from Switzerland
- example.com/de/ – Targets German-speaking users, independent of region
- example.com/de-ch/ – Targets Swiss users
Ways to use hreflang
You can use hreflang on your existing website, either by creating a subdirectory or a subdomain on your current domain, or you could get a country-code top-level domain name (ccTLD) like .it or .fr.
Let’s take a closer look at these three options:
1. Same site – language folders
Use it on a subdirectory on your current domain, as follows:
- example.com/en/ – For English-speaking users
- example.com/es/ – For Spanish-speaking users
- example.com/de/ – For German-speaking users
2. Same site – subdomains
You can also use hreflang on subdomains:
- en.example.com – For English-speaking users
- es.example.com – For Spanish-speaking users
- de.example.com – For German-speaking users
3. Different sites
Or you could get an entirely new top-level domain that’s dedicated to users from specific countries or who speak a specific language:
- example.com – For English speaking users
- example.it – For Italian speaking users
- example.de – For German speaking users
The TLD doesn’t necessarily have to describe the language which will be used as the hreflang for that site. For example, example.de can have de-ch as the main language.
How to generate the hreflang code
Generating the hreflang code is much easier thanks to tools like this Hreflang Generator. All you need to do is add the countries and language you want the snippet of code to be used for as well as the site and it then generates the code for you.
In the example below, you can see how the generator has produced the HTML code for the main UK version of the site, a German language German subdirectory, an English language Canadian subdirectory and a French language Canadian subdirectory:
<link rel="alternate" href="https://www.mysite.com/" hreflang="en-gb" /> <link rel="alternate" href="https://www.mysite.com/de" hreflang="de-de" /> <link rel="alternate" href="https://www.mysite.com/ca" hreflang="en-ca" /> <link rel="alternate" href="https://www.mysite.com/ca-fr" hreflang="fr-ca" />
If you want to validate the hrelflangs you’ve implemented, you can use this flang tool.
It’s very easy to use: simply enter the URL and check to see that everything was implemented correctly.
General targeting with x-default
You can use x-default to show that the page is not specifically targeted. This basically tells Google that this is the default version of the site that should be displayed for users who don’t correspond to any of the languages.
This is how the code looks:
<link rel="alternate" href="https://example.com/" hreflang="x-default" />
For more information on x-default hreflang, check out the official blog post from Google.
Where to add the code
Now that you have found the correct hreflang code for each of the versions of the site, the next step is to implement the code on the site correctly. This can be done in three different ways:
1. The head element on a webpage
Let’s assume that you have content in British English and you’ve created two separate pages to also target Spanish-speaking users and English-speaking users from Australia.
Here are the hreflang links that you’ll need to add to the head sections of the three pages:
<link rel="alternate" href="https://example.com/" hreflang="x-default" /> - This is your main UK page that you will use as the default result in search engines when the user is not a Spanish or Australian English speaker.
<link rel="alternate" hreflang="en" href="https://www.example.com/"/> - This is your main UK page but you tell search engines to show it to UK English speakers only.
<link rel="alternate" hreflang="es" href="https://www.example.com/es/"/> - This is your Spanish page for Spanish users only.
<link rel="alternate" hreflang="en-au" href="https://www.example.com/au/"/> - This is your Australian English page that will be shown to Australian users only.
These tags need to be present on all four pages that have the same subject or product but are in different languages, language variations or have a different currency.
This is an easier method to implement hreflang as it avoids the extra lines in the code within your pages, especially if you want to target more than three languages.
Let’s take an example. Imagine you have a page in English targeted at English speakers worldwide. You also have a page targeted at Spanish speakers worldwide and one at Italian speakers located in Switzerland.
Your set of URLs is:
The following sitemap tells Google that the www.example.com/en/ page has equivalent pages targeting worldwide Spanish-speaking users (https://www.example.com/es) and Switzerland (https://www.example.com/it-ch/).
<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="https://www.w3.org/1999/xhtml"> <url> <loc>https://www.example.com/en/</loc> <xhtml:link rel="alternate" hreflang="es" href="https://www.example.com/es/" /> <xhtml:link rel="alternate" hreflang="it-ch" href="https://www.example.com/it-ch/" /> <xhtml:link rel="alternate" hreflang="en" href="https://www.example.com/english/" /> </url> <url> <loc>https://www.example.com/es/</loc> <xhtml:link rel="alternate" hreflang="en" href="https://www.example.com/english/" /> <xhtml:link rel="alternate" hreflang="it-ch" href="https://www.example.com/it-ch/" /> <xhtml:link rel="alternate" hreflang="es" href="https://www.example.com/es/" /> </url> <url> <loc>https://www.example.com/it-ch/</loc> <xhtml:link rel="alternate" hreflang="es" href="https://www.example.com/es/" /> <xhtml:link rel="alternate" hreflang="en" href="https://www.example.com/en/" /> <xhtml:link rel="alternate" hreflang="it-ch" href="https://www.example.com/it-ch/" /> </url> </urlset>
You can also use a tool like the Hreflang tool for XML Sitemaps to import your XML sitemap and easily create a hreflang version of the sitemap.
3. HTTP header
A third way to implement the hreflang tag is to add it in the HTTP header. This is used when pages aren’t in HTML (e.g. PDF files or other media objects). Google gives an example of how to do here.
Here is an example of a link targeting Spanish-speaking users:
<https://es.example.com/>; rel=”alternate”; hreflang=”es”
Make sure that the language declaration of your site coincides with the language used in the hreflang tags.
If your site is currently declared as <html lang=”en”> but you’re adding a hreflang=”en-gb” then you should also change the HTML declaration to en-gb.
Make sure you use your Google Webmaster Tools (GWT) account to verify that you’ve implemented the tags correctly. To do that, go to your GWT account: Search Traffic > International Targeting:
This is where you’ll see if there are any issues with your hreflang tags such as: missing return links or incorrect hreflang values. Find out more about these issues and how to troubleshoot them.
The Country tab allows you to set a country as the main target of your website. So even if you have various languages and are targeting various countries, you can still choose your primary market.
How does hreflang work in search engines?
Let’s use an example from earlier: you have a page for users in the UK and another one with slight language variations for Australian users. You also a page that’s translated into Spanish which is dedicated to Spanish-speaking users.
This is the code that you’ve added to all three pages:
<link rel="alternate" href="https://example.com/" hreflang="x-default" /> <link rel="alternate" hreflang="en" href="https://www.example.com/"/> <link rel="alternate" hreflang="es" href="https://www.example.com/es/"/> <link rel="alternate" hreflang="en-au" href="https://www.example.com/au/"/>
So which pages will your users see depending on where they’re located?
- If your user is on Google.co.uk they will see this page: https://example.com/
- If your user is on Google.com.au they will see this page: https://example.com/au/
- If your user is on Google.es they will see this page: https://example.com/es/
- If your user is on Google.com or Google.de they will see this page (your default if there isn’t a certain page specified): https://example.com/
Got a question about implementing hreflang on your site? Let us know in a comment below.