Implementing the Hreflang tag

  • 0
  • February 4, 2014

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.

Tom Armenante

About Tom Armenante

Tom is one of our skilled and experienced Digital 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.

  • 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.

  • Karl Russell

    How can I check that ours is set up correctly?

    An SEO agency that we no longer work with set ours up. It is similar but not exact. That could mean that they know exactly what to do but have done it in a different way, added more thought to it or of course, it could be slightly wrong!

    We have a group of 24 domains, 20 of which are stand alone top level domains and 4 grouped on the .com via sub-directories.

    Karl

  • Simon Van Rij

    Hi Tom,

    Me and my friends are working on an international site and somehow we cant get it working properly.. The dutch version works fine.. but English German and French cant be found in Google. We used the hreflang implementation but since there hasn’t been a difference comparing to some months ago we started to wonder if its done correctly.

    Thanks for your reply

    The website URL is: http://www.flighttimeto.com

  • https://reverd.com/ Reverd.com

    Hi Tom,
    At the time we started multilingual pages there were many articles recommending using sub-domains versus directories and we did so as a best practice. Could you please explain the reason you prefer sub-directories? – since Google already announced that they treat the sub-domains as part of the top domain… our site https://reverd.com/app/ I may send you an email too.

  • Tom Armenante

    Hi, I don’t see any reason why those wouldn’t work as long as you at telling Google that the URL in question is the foreign version of the page you’re on.

  • Webbby

    Hi Tom. Great article! I have a WordPress Woocommerce site ‘mydomain.com’ that is based in the UK. We want to expand and target the Australian market by having mydomain.com/au – with other countries to follow. Do you recommend having a second installation of WordPress in the /au subdirectory so content can be slightly different for the Australian market – and the hreflang tags setup with a WordPress plugin of some sort?

    • Tom Armenante

      Hi Webby,

      I’m not 100% familiar with how woocommerce works, it’d probably be easier to do it in the same wordpress install if you can however if you can’t then yes that would be the best way to do it.

      Once you have that set up the AU site should be the only one to rank in Australia it will also benefit from being on that main .com domain in terms of ranking.

      Cheers
      Tom

  • rtmist

    This is awesome. One thing I noticed that you missed is the x-default tag in the sitemap. You mention adding this to the HTML markup. But what do you do with the sitemap? Also where would you upload the x-default sitemap too in WMT? e.g. would example.com be en-gb and x-default?

    • Tom Armenante

      Hi,

      You can add x default in the sitemap however we decided not to include it in the example. Its just a matter on adding it at the bottom of the hreflang tags like in the HTML.

      In terms of the WMT the hreflang tags (including the x default) should just be added to the normal sitemap so this is included in the section for the sitemap in WMTs.

      If your main .com site is targeting en-gb and its your main site then there is no reason you couldn’t do that.

      Let me know if you have any further questions!
      Cheers
      Tom

  • http://www.hkhasib.com/ Hasibul Kabir

    I’ve a website that is bilingual. English and Bengali. But my contents and links are 100% same. Should i use href lang tag?

    • Tom Armenante

      Hi Hasibul,

      Yes if there are two versions of the site in English and Bengali this is when the Href Lang should be used.

      It is just to tell Google that version of the page should be ranking in that countries version of Google.

      Tom

Like what you see? Talk to an Expert