Getting A Better Understanding Of Hreflang

SMS Text
Getting A Better Understanding Of Hreflang

Many SEOs start off by looking after local clients. I offer my SEO Services to Melbourne (Australia not USA) based businesses with a strong focus on ranking in Melbourne and the SEO strategy for getting them ranked have a strong local flavour to it . But like with any business as they grow they want to tackle more markets and when they want to expand in to different markets including international that creates a slew of issues.

  • Do I stick with my current domain?
  • Do I create new sites with geo-targeted TLD’s?
  • Will there be duplicate issues with these pages spanned across multiple domains?
  • And so on …

When you start to look for answers you are bound to come across rel=”alternate” hreflang=”xx””

What is hreflang?

1356126481_58ebd5fff1a0bfbeb805b585310e5b90

 

W3 has a details explanation of this attribute if you want to get in to the nitty gritty of things but if you want the short version the hreflang attribute allows the webpage to specify the language of the linked document. We are not limited to just tagging pages with a language, we can also specify the location. So does this really work I hear you ask. Let us try searching for ” GoogleHelp ” in Russia, Germany, Italy, Japan BUT for some reason UK search for UK english fails to trigger UK. (if someone from UK could test out searching for “Google Help” and report back that would be awesome . If you have any theories please do add them in the comments)

rel canonical hreflang conundrum? a.k.a the hreflang cheat sheet

1356126483_b10342bfd61a6376fbbfff48dfe6d545

Up until over a year ago, I felt like Penny listening to Sheldon Cooper when it came to Google and international because there was no clear indication as to what is the best way to go about doing international content but now I feel like Leonard Hofstadter. Hopefully you guys find this cheat sheet useful.

Assume this site offers multiple language pages but with

  • different content spread across multiple TLD targeted to each location: No Need to use hreflang
  • similar content but some important things like Price / shipping info / contact number are different : use hreflang
  • fully translated pages : use hreflang

Advice on the topic from Pierre Far (Webmaster Trends Analyst at Google) :

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 Reading: Multi-regional and multilingual sites, hreflang

How to use hreflang

There are 3 ways in which you can use the hreflang attribute

  1. The head element on a webpage
  2. HTTP header
  3. Sitemap

Using hreflang as a HTML link element

Within the head attribute you add a link attribute with rel=”alternate” (used to specify the destination is an alternate representation of the current page) and hreflang=”language-region” (to specify the language and region of the destination page).

NOTE: you specify the language (in ISO 6391-1 format and the region which is optional in ISO 3166-1 Alpha 2 format.

Let us assume we have 3 versions of the site, which has similar content, but the pricing for the products are in local currency.

  • in Spanish independent of region (http://www.example.com/es/ )
  • in English targeted towards Aussie users (http://www.example.com/au/ )
  • page in English independent of region (http://www.example.com/ )

So the head section of the Spanish page will have

<link rel=”canonical” href=”http://www.example.com/es/” />
<link rel=”alternate” hreflang=”es” href=”http://www.example.com/es/” />
<link rel=”alternate” hreflang=”en-AU” href=”http://www.example.com/au/” />
<link rel=”alternate” hreflang=”en” href=”http://www.example.com/” />

The English page targeted towards Aussie users will have

<link rel=”canonical” href=”http://www.example.com/au/” />
<link rel=”alternate” hreflang=”es” href=”http://www.example.com/es/” />
<link rel=”alternate” hreflang=”en-AU” href=”http://www.example.com/au/” />
<link rel=”alternate” hreflang=”en” href=”http://www.example.com/” />

So once this is indexed and Google processes the hreflang tag it understands that for English speakers from AU there is a specific page on the site and when any other English speakers from anywhere else on the planet searches they are directed to the .com page.

So you might have figured out by now every language page must use rel=”alternate” and hreflang to identify all language versions including itself.

NOTE: the self-canonical link is not a part of hreflang statement and do NOT rel canonical the .com version of the page on all the different language pages, If you do that you can say goodbye to the local language pages from the SERP. You have to note that the canonical on AU page is to the AU version and on the Spanish Page to the Spanish version, we are NOT adding a canonical from all different pages to the .com version

Extra Reading: There has been quite a bit of confusion regarding the use of canonical and hreflang, this discussion between Richard Hearne, John Mueller, Pierre Far, Tom Anthony and more, should give you some insight on what is the best practice.

This is a good place to get acquainted with rel canonical if you need to read up on the topic.

PRO Tip: It’s a good idea to show the language switcher option on the page, so users can make that choice themselves if Google does not get it right. Using pretty flags are always a nice way to go about doing it :).

1356126484_50962cbf543b31383152755d0fb9be92

Using hreflang via HTTP header

If you can configure your server you can use rel=”alternate” hreflang=”xx” HTTP header to indicate the language preference for your webpage or other files like PDFs. The format to use is

Link: <http://es.example.com/>; rel=”alternate”; hreflang=”es”

The advantage of using this method is the fact that you can tag non HTML pages like PDF files and other media objects this way.

Using hreflang in Sitemaps

Using hreflang in Sitemaps I believe this is much simpler way to go about implementing hreflang. For one it avoids the extra lines in the code within your pages. Say you have 10 languages that you want to support that is 10 lines of code. Let us look at an example:

  •  Spanish users are targeted with (http://www.example.com/es/ )
  • Aussie users with (http://www.example.com/au/ )
  • US users with (http://www.example.com/ )

Now the XML sitemap to target uses using hreflang will look like

<?xml version=”1.0″ encoding=”UTF-8″?>
<urlset xmlns=”http://www.sitemaps.org/schemas/sitemap/0.9″ xmlns:xhtml=”http://www.w3.org/1999/xhtml”>
<url>
<loc>http://www.example.com/</loc>
<xhtml:link rel=”alternate” hreflang=”es”
href=”http://www.example.com/es/” />
<xhtml:link rel=”alternate” hreflang=”en-AU”
href=”http://www.example.com/au/” />
<xhtml:link rel=”alternate” hreflang=”en”
href=”http://www.example.com/”/>
</url>

<url>
<loc>http://www.example.com/au/</loc>
<xhtml:link rel=”alternate” hreflang=”es”
href=”http://www.example.com/es/” />
<xhtml:link rel=”alternate” hreflang=”en-AU”
href=”http://www.example.com/au/” />
<xhtml:link rel=”alternate” hreflang=”en”
href=”http://www.example.com/”/>
</url>

<url>
<loc>http://www.example.com/es/</loc>
<xhtml:link rel=”alternate” hreflang=”es”
href=”http://www.example.com/es/” />
<xhtml:link rel=”alternate” hreflang=”en-AU”
href=”http://www.example.com/au/” />
<xhtml:link rel=”alternate” hreflang=”en”
href=”http://www.example.com/”/>
</url>
</urlset>

For each URL on the site you should create a separate url element which includes a loc tag indicating the page URLs, and an xhtml:link rel=”alternate” hreflang=”XX” sub-element for each and every alternate version of the page, including itself. For a huge site that supports multiple languages you can see how this sitemap can easily go crazy, it might also be a good idea to split these up by languages and place each of those in the language specific folder.

There are some 3rd party tools that lets you import your xml sitemaps and easily create hreflang version of the sitemap. Here are 2 of them : online version , download to your PC version

PRO Tip: don’t forget to test your sitemap for errors and submit the sitemap in GWT

hreflang FAQ

Q) Is this statement case sensitive? Eg: hreflang=”en-au” vs hreflang=”en-AU”?

A) No it’s not case sensitive, Google accepts both of them. That said the standard convention is to use hreflang=”en-AU” where the language is in lower case and the region in upper case.

Q) Can hreflang be cross domain?

A) Sure Can

Q) What If I have my main .com page on position one and if my spanish page is on page 3. If I hreflang my content will I lose out on position one ?

A) From my understanding hreflang does not affect ranking , so when some one searches for the page say from Spain then the position one page will display the Spanish page. Keep in mind this can have its own title and description that are useful for Spanish customers which could potentially increase CTR. I highly recommend going through this Hangout video by Pierre Far, which should cover quite a bit on this topic.

VIDEO EMBED : https://www.youtube.com/watch?feature=player_embedded&v=fRT5NSbtGrQ

The title “International Strategy without hreflang is like asentencewithoutspaces” is a bit misleading I know , it was either that or “Using the rel-alternate-hreflang construct to tell Google the duplicate pages on your site is actually targeted towards users from different geo-location “ and I had to settle for the former. I am working towards improving my titles writing skills  and hopefully the next post gets a better one.

So yeah this is my 2nd post at SEJ, hopefully you guys find this useful. I promise to try and answer any questions you have about this post via the comments. I am also on Google+ if you are into SEO please do circle me and if you ever come down to Melbourne, give us a shout for a beer.

Saijo George
Saijo George works as a SEO Consultant in Melbourne offering SEO Services to various businesses in Melbourne, Australia. He helps Small Business and Enterprise Clients... Read Full Bio
Saijo George
Saijo George

Latest posts by Saijo George (see all)

Subscribe to SEJ!
Get our weekly newsletter from SEJ's Founder Loren Baker about the latest news in the industry!