The rel="alternate" hreflang="x" annotations provide signals to Google (and Yandex) about the language and the targeted audience of a page and help them to serve up the correct language or regional URL to searchers.

<link rel="alternate" href="http://www.example.com/ca/fr/" hreflang="fr-ca">

It is important to note that Bing does not currently support hreflang tags. Other methods, such as content language tags, exist to help Bing understand the language and the targeted audience of a website. More info below.

Usage for more complex situations

Same language, different regions

In addition to indicating the language of a page in ISO 639-1 format (e.g. "en" for English), the hreflang attribute can be used to indicate geographical regions using the country code in ISO 3166-1 Alpha 2 format (e.g. "fr" for France). This is useful in instances where there are alternate pages that are targeted at users with the same language, but different regions. The region cannot be specified by itself.

For example, two version of a site can be targeting at English speakers in the US and UK. Therefore the appropriate language-locale codes (en-us and en-gb) can be added to each hreflang tag.

<link rel="alternate" href="http://www.example.com/" hreflang="en-us">
<link rel="alternate" href="http://www.example.co.uk/" hreflang="en-gb">

In this case, it is a good idea to provide a generic page for this language. The goal of the generic signal is to be encompassing to the language without regional direction. This page can be one of the existing targeted pages.

For example, www.domain.com is the URL targeting English speakers in the US and www.domain.co.uk is targeting English speakers in UK. You can decide that www.domain.com is also the default URL for all other English speakers that are not in the UK. Therefore an hreflang tag with the generic language code en and pointing to www.domain.com should be included.

<link rel="alternate" href="http://www.example.com/" hreflang="en-us">
<link rel="alternate" href="http://www.example.co.uk/" hreflang="en-gb">
<link rel="alternate" href="http://www.example.com/" hreflang="en">

Doing so will indicate to Google to serve www.example.com in the search results to English speakers in Canada for example.

Same region, different languages

Contrarily, you can have content targeting the same region but in different languages. Canadian residents for example may search in English or in French. If your site provides content in both languages, indicate Google which URLs to serve to searchers.

<link rel="alternate" href="http://www.example.ca/en/" hreflang="en-ca">
<link rel="alternate" href="http://www.example.ca/fr/" hreflang="fr-ca">

Auto-redirecting or "choose your language/region" page

There is also a way to include the world-wide page outside of language or location. It is important to note that this is not to use for a "default" page in the sense of a landing page like the "English" homepage for example.
This is specifically used for a country/language selector page or an auto-redirecting page (based upon geo-targeted information such as the IP address, the accept-language request header or a cookie storing the user's previous choice).
This is done using the same technique, except that a special x-default value is used for the hreflang attribute.

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

Implementation of hreflang tags

There are three alternative methods that can be used to indicate to Google that a URL is an alternate-language equivalent to another page: via the HTML link elements (as shown in the examples above), through XML Sitemaps or via the HTTP Header.

It should be noted that there is no preference from an SEO perspective. The individual ease of implementation should help guide which method is best for your site.

HTML <link> element

In the HTML <head> section of the page, add a link element pointing to the alternate versions of that webpage.

<head>
...
  <link rel="alternate" href="http://www.example.com/" hreflang="x-default">
  <link rel="alternate" href="http://www.example.com/en/" hreflang="en">
  <link rel="alternate" href="http://www.example.com/fr/" hreflang="fr">
  <link rel="alternate" href="http://www.example.com/es/" hreflang="es">
  <link rel="alternate" href="http://www.example.com/mx/" hreflang="es-mx">
...
</head>

The link element must be added to each of the language or regional pages and must identify all versions, including itself. For example, if you have a page that exists in three different languages or regions, each page version will have three link elements with rel="alternate" hreflang="x" attributes in the <head> section of the document.

XML Sitemap

Alternatively, language version information can be submitted via an XML Sitemap. When adding the XHTML tags within the XML Sitemap, ensure there is a proper XLMNS declaration in the head of the XML document.

<?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/en/</loc>
      <xhtml:link rel="alternate" hreflang="x-default" href="http://www.example.com/"/>
      <xhtml:link rel="alternate" hreflang="en" href="http://www.example.com/en/"/>
      <xhtml:link rel="alternate" hreflang="fr" href="http://www.example.com/fr/"/>
      <xhtml:link rel="alternate" hreflang="es" href="http://www.example.com/es/"/>
      <xhtml:link rel="alternate" hreflang="es-mx" href="http://www.example.com/mx/"/>
  </url>
  <url>
    <loc>http://www.example.com/fr/</loc>
      <xhtml:link rel="alternate" hreflang="x-default" href="http://www.example.com/"/>
      <xhtml:link rel="alternate" ... />
      ...
  </url>
</urlset>

HTTP response header

An HTTP header can be used to indicate a different language version of a URL if you publish non-HTML files (e.g. PDFs).

Link: <http://www.example.com/mx/document.pdf>; rel="alternate"; hreflang="es-mx"

Content Language Tags

Certain search engines, such as Bing, do not support the rel="alternate" hreflang="x" annotations. There are three methods that can be used to help these search engines determine which language is being targeted.

HTML meta element

In the <head> section of the page, add a <meta> element with the http-equiv="content-language" attribute that specifies the language of the page.

<head>
  <meta http-equiv="content-language" content="en-us" />
</head>

Note that this meta tag is reported as deprecated but Bing still looks at this signal to understand the language and the targeted audience of a web page. Therefore it is still a good idea to implement it in the <head> section of each page on the site with the appropriate language-locale code.

HTTP response header

An HTTP header can be used to indicate the language of a page for host-wide location tagging or non-HTML document such as PDFs.

HTTP/1.1 200 OK
Content-Language: en-us

<html> tag language attribute

A language attribute on the <html> tag (lang and/or xml:lang) should be used to declare the default language of the actual text in the page, as such:

<html lang="en-us">
...
</html>

Comments