Use hreflang for language and regional URLs
Many websites serve users from around the world with content translated or targeted to users in a certain region. Google uses the
rel="alternate" hreflang="x" attributes to serve the correct language or regional URL in Search results.
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 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
linkelement 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"
Link: <http://es.example.com/>; rel="alternate"; hreflang="es",<http://de.example.com/>; rel="alternate"; hreflang="de"
- 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 should identify different 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.
If you need to decrease the number of bidirectional links in your site for ease of deployment, maintenance, or migration (for example, your site supports 40 languages and your newly-created Spanish pages will be migrating from HTTP to HTTPS), it is important to bidirectionally link newly expanded language pages to the originating/dominant language(s). For example, if your site was originally created in French with URLs on .fr, it's more important to bidirectionally link newer Mexican (.mx) and Spanish (.es) pages to your strong .fr presence, rather than to bidirectionally link your new Spanish language variant pages (.mx and .es) to each other.
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:
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/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" />
Supported language values
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, 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.
Important: Make sure that your provided
hreflang value is actually valid. Take special care in regard to the two most common mistakes:
- Missing confirmation links: If page A links to page B, page B must link back to page A. If this is not the case for all pages that use hreflang annotations, those annotations may be ignored or not interpreted correctly.
- Incorrect language codes: Make sure that all language codes you use identify the language (in ISO 639-1 format) and optionally the region (in ISO 3166-1 Alpha 2 format) of an alternate URL. Specifying the region alone is not valid.
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
<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