By 3 months ago in Blogstorm

Implementing the Hreflang tag

When your website starts to receive a substantial amount of traffic from Google’s foreign sites and you have the capability of servicing international countries, it’s usually time for you to implement an international version of your site.

There are three different ways of creating international sites that are seen as best practice, these are:

  1. Using a sub directory on your current domains – http://www. mysite.com/de
  2. Top level domain – http://www.mysite.de
  3. Subdomain – http://de.mysite.com

The Hreflang tag can be implemented on any of these domains. The Hreflang tag helps you to tell Google which version of the website should be shown in which country, this makes sure that the correct language version of the site is shown to the right user in the correct country; thus creating a better user experience.

Before exploring the ways that you can implement the Hreflang tag, there are two main uses for the tag and it’s important to understand the difference between them.

1.  Multi-lingual

This is where you target a different language for the foreign linguists in a country.  For example, in Canada people speak both French and English, using the Hreflang tag you could indicate to Google which version of the site will get served to English or French speaking people depending on which language they are searching in.

2.  Multi-regional

The multi-region version targets countries that speak the same language however they might not be in the same country. For example, a site in the US may refer to football as ‘soccer’ whereas in the UK it would obviously be called football. For this reason, you can have the same language used in multiple countries. Google will then recognise which version of the site should be ranking once the tag is implemented.

The Hreflang code

The actual creation of the Hreflang code is getting much simpler thanks to tools such as the Hreflang generator by Aleyda, this tool lets you add the countries and language you want the snippet of code to be used for as well as the site and it generates it 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 sub directory, an English language Canadian sub directory and a French language Canadian sub directory:

<link rel=”alternate” href=”http://www.mysite.com/” hreflang=”en-gb” />

<link rel=”alternate” href=”http://www.mysite.com/de” hreflang=”de-de” />

<link rel=”alternate” href=”http://www.mysite.com/ca” hreflang=”en-ca” />

<link rel=”alternate” href=”http://www.mysite.com/ca-fr” hreflang=”fr-ca” />

In addition you add to the Hreflang tag is the x default code:

<link rel=”alternate” href=”http://www.mysite.com/” hreflang=”x-default” />

This is an additional line, which tells Google that this version of the site is the one that should be displayed if no other version of the site is suitable. If this link was added to the example at the top of the page then if someone from Spain visited the site Google would direct them to www.mysite.com.

Once you have gone through the process of finding the correct Hreflang code for each of the versions of the site, the next step is implementing the code on the site correctly. This can be done in three different ways, the two most common ones are; either by adding the code for the Hreflang to the header of each page you want the code to be applied to or alternatively, the code for the correct pages can be added into the sitemap for the website.

1.  Hreflang page level

There aren’t really many differences between adding the Hreflang code to a specific page on the site or to the sitemap. Some schools of thought believe that Google reads it faster if it is implemented on a page code level; however it shouldn’t make any difference. The only issue that adding the Hreflang as HTML might cause is bloating of the page’s code, for example a site with 50 different locations on each and every page of the website could take longer for the page to load. However if this was a potential issue it shouldn’t slow the page down noticeably unless you operate in a large amount of countries and in many languages. This wouldn’t be an issue with the sitemap implementation as it wouldn’t need to be loaded every time a user goes on to a new page.

This is the code you should add in a pages <head> tag for the UK version of mysite.com would be:

<link rel=”alternate” href=”http://www.mysite.com/de” hreflang=”de-de” />

<link rel=”alternate” href=”http://www.mysite.com/ca” hreflang=”en-ca” />

<link rel=”alternate” href=”http://www.mysite.com/ca-fr” hreflang=”fr-ca” />

<link rel=”alternate” href=”http://www.mysite.com/” hreflang=”x-default” />

All you have to do is list the alternative version of the pages and have the x default at the bottom. For example, this is what you would do for the English Canadian version:

<link rel=”alternate” href=”http://www.mysite.com/” hreflang=”en-gb” />

<link rel=”alternate” href=”http://www.mysite.com/de” hreflang=”de-de” />

<link rel=”alternate” href=”http://www.mysite.com/ca-fr” hreflang=”fr-ca” />

<link rel=”alternate” href=”http://www.mysite.com/” hreflang=”x-default” />

2.  Sitemap

If the site is a large site or it is difficult to get additional code added to the site, then the sitemap version of the Hreflang code is perfect for a quick implementation on a site. This can be added underneath the link of the page in the sitemap and it will need to be added for all the different version of a page such as the example below:

<url>

<loc>http://www.mysite.com/</loc>

<lastmod>2013-10-11</lastmod>

<changefreq>daily</changefreq>

<priority>1.0</priority>

<xhtml:link rel=”alternate” hreflang=”de-DE” href=”http://www. mysite.com/de/” />

</url>

<url>

<loc>http://www.mysite.com/de/</loc>

<lastmod>2013-10-11</lastmod>

<changefreq>daily</changefreq>

<priority>1.0</priority>

<xhtml:link rel=”alternate” hreflang=”en-GB” href=”http://www.mysite.com/” />

</url>

3. HTTP Header

The other way you can implement this is to add it in the HTTP header this is used when pages aren’t in HTML, which Google gives an examples of how to do here. This is less commonly used than the first two versions of the tag.

Important tip: When implementing the Hreflang tag it is important to remember it works on a page-by-page basis so you will only need to use it if there is a foreign language version of that page. If there isn’t, then you don’t need it.

Another important thing to consider is the time it will take you to implement this. If the site is extremely large, it will take a considerable amount of time to plan the implementation. If this is the case it will probably be best to initially add it to the homepage and category pages, as these are the areas of your site that will be receiving the most traffic.

Example

For the example below we implemented the Hreflang code on a page level basis right into the HTML, we also consolidated the .us domain into a .com/us. As soon as we did this the sites visibility in the US shot up.  This was for two reasons, firstly there was only one site ranking in the US instead of the .us and pages from the .com due to the Hreflang implementation. Secondly, the US site received the benefit of the link equity of being on the main domain, which is why I will always recommend having international sites on sub directories.

Example Hreflang

 

If you’d like anymore help and advice on implementing the Hreflang code, let me know in the comments below.

By Tom Armenante. at 1:48PM on Tuesday, 04 Feb 2014

Tom is one of our skilled and experienced SEO Account Managers, ensuring the smooth execution of search strategies for our valued clients. Taking Branded3’s geek factor to a whole new level, Tom boasts a Computer Information Systems degree as well as a thirst for technology current affairs. Follow Tom Armenante on Twitter.

comments

  • Hemant Malav

    Tom, from SEO perspective what is the best approach to target multiple regions or language? Sub-domain, sub-directory or different top level domain.

    • Tom Armenante

      Hi Hemant,

      There are different view points for each way and loads of articles out there that discuss the benefits and negatives however personally I would usually go for subdirectories this way all of the different versions get the benefit of the authority of being on the main root domain.

      Tom

  • Steve

    Would you mind including a key on the chart? Two intersecting lines could be anything.

    • Tom Armenante

      Hi Steve,

      Its a Search Metrics chart so it looks at the overall Search visibility of the website. The green line represents the .us site and the blue line represents the .com/us version of the website, the main switch was done when the site was 301′d however once the Hreflang was implemented you can see a further increase.

      Tom

      • Steve

        Thanks Tom.