Use rel="alternate" hreflang="x" annotations to Serve the Correct Language or Regional URL to Searchers!

The rel='alternate' attribute enables you to tell search engines that a web page is available in different language versions. For example, you could add the following to the head section of a web page if that page is available in English, German and French:

<link rel=”alternate” href=”http://en.example.com” hreflang=”en” />
<link rel=”alternate” href=”http://de.example.com” hreflang=”de” />
<link rel=”alternate” href=”http://.fr.example.com” hreflang=”fr” />

All other languages can be directed to the default version of your website:

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

From Google Webmasters:

Some example scenarios where rel="alternate" hreflang="x" is recommended:

You keep the main content in a single language and translate only the template, such as the navigation and footer. Pages that feature user-generated content like a forums typically do this.
Your content has small regional variations with similar content in a single language. For example, you might have English-language content targeted to the US, GB, and Ireland.
Your site content is fully translated. For example, you have both German and English versions of each page.

Using language annotations

Imagine you have an English language page hosted at http://www.example.com/, with a Spanish alternative at http://es.example.com/. You can indicate to Google that the Spanish URL is the Spanish-language equivalent of the English page in one of three ways:

HTML link element in header. In the HTML <head> section of http://www.example.com/, add a link element pointing to the Spanish version of that webpage at http://es.example.com/, like this:
```
<link rel="alternate" hreflang="es" href="http://es.example.com/" />
```
HTTP header. If you publish non-HTML files (like PDFs), you can use anHTTP header to indicate a different language version of a URL:
```
Link: <http://es.example.com/>; rel="alternate"; hreflang="es"
```
Sitemap. Instead of using markup, you can submit language version information in a Sitemap.

If you have multiple language versions of a URL, each language page must identify all language versions, including itself. For example, if your site provides content in French, English, and Spanish, the Spanish version must include a rel="alternate" hreflang="x" link for itself in addition to links to the French and English versions. Similarly, the English and French versions must each include the same references to the French, English, and Spanish versions.

You can specify multi-language URLs in the same domain as a given URL, or use URLs from a different domain.

It's a good idea to provide a generic URL for geographically unspecified users if you have several alternate URLs targeted at users with the same language, but in different locales. For example, you may have specific URLs for English speakers in Ireland (en-ie), Canada (en-ca), and Australia (en-au), but want all other English speakers to see your generic English (en) page, and everyone else to see the homepage. In this case you should specify the generic English-language (en) page for searchers in, say, the UK. You can annotate this cluster of pages using a Sitemap file or using HTML link tags like this:

<link rel="alternate" href="http://example.com/en-ie" hreflang="en-ie" />
<link rel="alternate" href="http://example.com/en-ca" hreflang="en-ca" />
<link rel="alternate" href="http://example.com/en-au" hreflang="en-au" />
<link rel="alternate" href="http://example.com/en" hreflang="en" />

For language/country selectors or auto-redirecting homepages, you should add an annotation for the hreflang value "x-default" as well:
<link rel="alternate" href="http://example.com/" hreflang="x-default" />

Supported language values

The value of the hreflang attribute identifies the language (in ISO 639-1 format) and optionally the region (in ISO 3166-1 Alpha 2 format) of an alternate URL. For example:

de: German content, independent of region
en-GB: English content, for GB users
de-ES: German content, for users in Spain

Do not specify a country code by itself! Google does not automatically derive the language from the country code. You can specify a language code by itself if you want to simplify your tagging. Adding the country code after the language to restrict the page to a specific region. Examples:

be: Belarusian language, independent of region (not Belgium French)
nl-be: Dutch for Belgium
fr-be: French for Belgium

For language script variations, the proper script is derived from the country. For example, when using zh-TW for users zh-TW, the language script is automatically derived (in this example: Chinese-Traditional). You can also specify the script itself explicitly using ISO 15924, like this:

zh-Hant: Chinese (Traditional)
zh-Hans: Chinese (Simplified)

Alternatively, you can also specify a combination of script and region—for example, usezh-Hans-TW to specify Chinese (Simplified) for Taiwanese users.

Finally, the reserved value "x-default" is used for indicating language selectors/redirectors which are not specific to one language or region, e.g. your homepage showing a clickable map of the world.

Common Mistakes

Important: Make sure that your provided hreflang value is actually valid. Take special care in regard to the two most common mistakes:

In general you are advised to sign up with your site to Webmaster Tools. This enables you to receive messages in regard to wrong annotations.

Example configuration: Annotations in action

Example Widgets, Inc has a website that serves users in the USA, Great Britain, and Germany. The following URLs contain substantially the same content, but with regional variations:

http://www.example.com/ Default page that doesn't target any language or locale; may have selectors to let users pick their language and region.
http://en.example.com/page.html English-language homepage. Contains information about fees for shipping internationally from the USA.
http://en-gb.example.com/page.html English-language; displays prices in pounds sterling.
http://en-us.example.com/page.html English-language; displays prices in US dollars.
http://de.example.com/seite.html German-language version of the content

rel="alternate" hreflang="x" is used as a page level, not a site level, and you need to mark up each set of pages, including the home page, as appropriate. You can specify as many content variations and language/regional clusters as you need.

To indicate to Google that you want the German version of the page to be served to searchers using Google in German, the en-us version to searchers using google.com in English, and the en-gb version to searchers using google.co.uk in English, userel="alternate" hreflang="x" to identify alternate language versions.

Update the HTML of each URL in the set by adding a set of rel="alternate" hreflang="x" link elements. For the default page that doesn’t target any specific language or locale, add rel="alternate" hreflang="x-default":

<link rel="alternate" hreflang="x-default" href="http://www.example.com/" />
<link rel="alternate" hreflang="en-gb" href="http://en-gb.example.com/page.html" />
<link rel="alternate" hreflang="en-us" href="http://en-us.example.com/page.html" />
<link rel="alternate" hreflang="en" href="http://en.example.com/page.html" />
<link rel="alternate" hreflang="de" href="http://de.example.com/seite.html" />

This markup tells Google's algorithm to consider all of these pages as alternate versions of each other.

Have Results

Tuesday, 11 February 2014