MENU

HOME

TOPICS
TOPICS

SEO TOOLS


   NON-AMP VERSION


rel="alternate" hreflang="x"

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.

Code example

<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.



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.

Code example

<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.

Code example

<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.

Code example

<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.

Code example

<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.

Code example

<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.

Code example

<?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).

Code example

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

Live example

The page "hreflang Tags Live Example" (in English for US users) has 3 alternate variations: English for UK users, Spanish and French. Each of the 4 pages includes the following hreflang Tags:

<head>
...
  <link rel="alternate" href="http://www.technicalseo.info/.../alternate-hreflang/live-example/" hreflang="en-us">
  <link rel="alternate" href="http://www.technicalseo.info/.../alternate-hreflang/live-example/uk/" hreflang="en-gb">
  <link rel="alternate" href="http://www.technicalseo.info/.../alternate-hreflang/live-example/" hreflang="en">
  <link rel="alternate" href="http://www.technicalseo.info/.../alternate-hreflang/live-example/es/" hreflang="es">
  <link rel="alternate" href="http://www.technicalseo.info/.../alternate-hreflang/live-example/fr/" hreflang="fr">
...
</head>

When searching for the "hreflang Tags Live Example" page, using a Google site search operator (site:url), we can see that Google serves the most relevant page to the searcher: the French alternate version for a search on google.fr, the Spanish alternate version for a search on google.es, etc.







Related Topics

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.

Learn more about content language tags


hreflang Tags Testing Tool

hreflang annotations can be hard to implement properly. This tool allows you to quickly check if hreflang tags on a page are correct.

Test hreflang tags implementation


Disqus Comments