Many websites serve users from around the world, with content that's translated, or targeted to users in a certain region. The rel="alternate" hreflang="x" annotations help Google serve the correct language or regional URL to searchers. More information about multi-regional and multilingual sites.
Some example scenarios where rel="alternate" hreflang="x" is recommended:
- You translate only the template of your page, such as the navigation and footer, and keep the main content in a single language. This is common on pages that feature user-generated content, like a forum post.
- Your pages have broadly similar content within a single language, but the content has small regional variations. For example, you might have English-language content targeted at readers in the US, GB, and Ireland.
- Your site content is fully translated. For example, you have both German and English versions of each page.
Using rel="alternate" hreflang="x"
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 alinkelement 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 an HTTP 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 in the set must use rel="alternate" hreflang="x" to 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.
If you have several alternate URLs targeted at users with the same language but in different locales, it's a good idea to provide a generic URL for geographically unspecified users. 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” />
<link rel=”alternate” href=”http://example.com/” hreflang=”x-default” />
hreflang supported 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 regionen-GB: English content, for GB usersde-ES: German content, for users in Spain
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, use zh-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.
Example configuration: rel="alternate" hreflang="x" 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, use rel="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.