How to use hreflang for international SEO - Heart Internet Blog - Focusing on all aspects of the web

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).”

Extra resources:

  • 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

3. Combined

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.

 

2. Sitemap

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:

  • www.example.com/en/
  • www.example.com/es/
  • www.example.com/it-ch/

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”

Extra tip

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?

 

  1. If your user is on Google.co.uk they will see this page: https://example.com/
  2. If your user is on Google.com.au they will see this page: https://example.com/au/
  3. If your user is on Google.es they will see this page: https://example.com/es/
  4. 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/

Extra resources

 

Got a question about implementing hreflang on your site? Let us know in a comment below.

Subscribe to our monthly Heart Internet newsletter, filled with the latest articles about web design, development, building your business, and exclusive offers.

Subscribe now!

Comments

Please remember that all comments are moderated and any links you paste in your comment will remain as plain text. If your comment looks like spam it will be deleted. We're looking forward to answering your questions and hearing your comments and opinions!

Leave a reply

  • Giovanni

    12/01/2015

    Is it acceptable to use hreflang x-default annotation in sitemap.xml ?
    I get errors in both Google (no return tag error after a while, whilst the sitemap is validated by GWT) and in Yandex (not recognizing my XHTML:link tags)
    Find my sitemap at isbooth.com/Sitemap.xml
    thanks,
    Giovanni – https://isbooth.com

     
  • Jenni

    12/01/2015

    Hi Giovanni,

    The x-default attribute should be used on-page for websites that use country/language selectors or redirects based on language. The sitemap should just point out what alternate languages are available for each page. Try removing the x-default line from your sitemap and resubmit it in Webmaster Tools.

    Hope that helps!

    Jenni

     
  • Mikel

    13/03/2015

    Hello, query, I have placed the hreflang as it goes Webmaster Tools but not found return label. Please help me, thanks.

     
  • Jenni

    18/03/2015

    Hi Mikel,

    The “no return tag” error happens when a page includes a hreflang link to an alternate language, but the linked page doesn’t link back to it. So let’s say you have two pages, A for English and B for German.
    If page A links to B for the DE version but page B does not link back to A for the EN version then you would get that error.

    Hope that helps!

    Jenni

     
  • KH Lee

    30/04/2015

    Jenni,

    Thank you for sharing on the hreflang usage. I hit a problem and no way found on the possible solution. Hopes you can point me to the right direction.

    I hosted a Chinese blog page for my wife. Google webmaster originally pointed out all 2.2k of the post has not hreflang tags.

    So, I added “<link rel=”alternate” href=”https://myblogdomain.com” hreflang=”zh-cn” />” to the header of the blog. ( This will goes into all pages, posts of the hosted blog as I added into the Genesis’s theme setting )

    I then check back to webmaster after about 2 weeks and happily seeing the no hreflang errors are reducing. This has not make me happy for long as the following week, I started all the pages / posts are now been reported at no return tag error.

    From your reply to Mikel, the return tag should be returning to the original post with its language. so, in my case, all post are in zh-cn. How should I do this to fix the error ?

    Was it because I am not suppose to use the hreflang in the first place ?

    Thank you in advance

     
  • Jenni

    30/04/2015

    If you only have one language on the site then you should not use hreflang tags. These are meant for multi-lingual websites. If you add a tag on the page there should be another equivalent page in a different language that also has the tag. If this page doesn’t exist then you’ll get the “no return tag” error.

    If you have page 1 in language A and page 2 in language B, where page 1 and 2 have the same subject but just the different language, then page 1 should have two hreflang tags for both languages A and B and page 2 should also have the two hreflang tags for both languages A and B. When one of these tags is missing the error appears in Webmaster Tools.

    Basically, pages that have the same subject but different languages should have the exact same set of hreflangs added on their code.

     

Comments are closed.

Drop us a line 0330 660 0255 or email sales@heartinternet.uk