rel=”alternate” hreflang=”x” attribute

What you can expect from this article

The rel="alternate" hreflang="x" link attribute is used to indicate what language your content is in and what geographical region your content is meant for. This helps search engines to determine what content to serve to their different audiences and is especially useful if your content exists in multiple localized variants. In this article we’re going to explore how to use this link attribute.

What is the rel=”alternate” hreflang=”x” attribute?

The rel="alternate" hreflang="x” attribute is used to indicate what language your content is in and what region your content is meant for.

Often, rel="alternate" hreflang="x” attribute is incorrectly called the rel="alternate" hreflang="x” tag. For the sake of brevity, we’ll call it the hreflang attribute from here on out.

If you have a website that’s available in multiple languages, the hreflang attribute is an essential tool to guide search engines in serving your content to the right audience. Currently, only Google and Yandex support the hreflang attribute.

Why should you care about the hreflang attribute?

If you’ve got a website that’s available in multiple languages you want search engines to show your content to the right audience. In order to help search engines do so, you should use the hreflang attribute to indicate the language the content is in, and optionally also what region it’s meant for.

Imagine you’re serving customers in two languages: English and Spanish. You’ve written your content in both languages and now want to make this clear to search engines. The way to do that is through using the hreflang attribute (en and es in this case).

Another example use-case would be when using geographical targeting. Imagine you’re targeting English speaking customers in the US and Canada and have the content localized for these markets. Now you can make it clear that both variants exists by combining the language definition with the region you’re targeting. You would use the hreflang attribute to make list both variants (en-us and en-ca in this case).

Apart from making it clear for search engines which variant they should serve to their users there’s the additional benefit of preventing duplicate content issues. Especially when you’re targeting different regions with the same language (such as in the US and Canada example above) it’s important to make this distinction clear, as otherwise the content may look very similar and confuse search engines.

The anatomy of the hreflang attribute

Let’s take a look at what the hreflang attribute looks like. Here’s an example:

<link rel="alternate" hreflang="en" href="https://www.example.com/" />

Let’s go step-by-step:

  1. The link rel="alternate" part makes it clear that a page relationship is described. In this article we focus on the hreflang attribute, but many other link relationship exists such as pagination, mobile variants and AMP variants.
  2. The hreflang="en" part describes the audience targeting. The definition of the language or a combination of language and geographical location.
  3. The href part describes the URL of the page for the audience defined in the previous part.

How to implement the hreflang attribute

The hreflang attribute can be defined using:

  1. The link element in the <head> section of your HTML pages
  2. HTTP header
  3. XML sitemap

Usually the easiest way to implement the hreflang attribute is by including it in the <head> section of your HTML pages.

When defining the hreflang attribute, you not only describe the audience targeting for the current page, but also the localized variants of the page. For example, let’s say that the page is available in English and Spanish, then the full definition would be as follows and be present on both variants of the page:

<link rel=”alternate” hreflang=”en” href=”https://www.example.com/” />
<link rel=”alternate” hreflang=”es” href=”https://www.example.es/” />

You can define a fallback page if no page is available for the audience you’re targetting. This is done using the x-default value.

Best practices for hreflang attribute

The best way to explain the best practices for the hreflang attribute is using the example mentioned above with the English website targeting users in the US, Canada and the UK.

This is the full hreflang attribute definition of the example above:

<link rel=”alternate” hreflang=”en-us” href=”https://www.example.com/” />
<link rel=”alternate” hreflang=”en-ca” href=”https://www.example.com/ca/” />
<link rel=”alternate” hreflang=”en-gb”href=”https://www.example.com/uk/” />
<link rel=”alternate” hreflang=”x-default” href=”https://www.example.com/” />

Reference the page itself, and its translated variants

We can’t repeat this enough: the hreflang attribute needs to define the prefered language and region for the page itself, and its translated variants.

So if we’re looking at https://www.example.com/ from the example above, the translated variants are: https://www.example.com/ca/ and https://www.example.com/uk/.

Bidirectional hreflang attribute references

Each hreflang attribute reference should be bidirectional. This means that each variant points to the other variants.

Correctly define language and region combinations

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

Always first define the language, and then the optional region. When done the other way around search engines will not understand the hreflang attribute.

Furthermore it’s not possible to define a region without defining a language. In other words, the following definition is invalid and should NOT be used:
<link rel="alternate" hreflang="us" href="https://www.example.com/" />

Always set hreflang=”x-default”

Always define what page you want to serve as the fallback. You can do this using hreflang=”x-default”.

In the example mentioned above we see:

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

This means that https://www.example.com/ is the default fallback for users from all countries other than Canada and the United Kingdom searching in all other languages.

The hreflang attribute and the canonical URL

Using the hreflang attribute doesn’t replace defining the canonical URL for a page. Both need to be defined. For example:

<link rel=”canonical” href=”http://www.example.com/” />
<link rel=”alternate” href=”https://www.example.com/” hreflang=”en-us” />
<link rel=”alternate” href=”https://www.example.com/ca/” hreflang=”en-ca” />

In this example the Canadian page (https://www.example.com/ca/) is the alternative variant for the current page. On that page the definition would look as follows:

<link rel=”canonical” href=”http://www.example.com/ca/” />
<link rel=”alternate” hreflang=”en-ca” href=”https://www.example.com/ca/” />
<link rel=”alternate” hreflang=”en-us” href=”https://www.example.com/” />

However, when the canonical URL points to a different page than the current one, the hreflang attribute MUST reflect that. For example, if https://www.example.com/home is an alternative URL for https://www.example.com/ then this is what the full definition looks like on the /home variant:

<link rel=”canonical” href=”http://www.example.com/” />
<link rel=”alternate” hreflang=”en-us” href=”https://www.example.com/” />
<link rel=”alternate” hreflang=”en-ca” href=”https://www.example.com/ca/” />
<link rel=”alternate” hreflang=”en-gb” href=”https://www.example.com/uk/” />

Subsequently, https://www.example.com/ca/ and https://www.example.com/uk/ should both reference <link rel="alternate" href="https://www.example.com/" hreflang="en-us" />.

To summarize: the non-canonical URL (/home in this example) is never referenced in the hreflang attribute definition.

Absolute URLs

Even though it’s not against the specification of the link element, the general consensus is not to use relative URLs when defining the hreflang attribute. Relative URLs are more likely to be interpreted incorrectly by search engines. The same best practice applies to other uses of the link element: canonical URL, pagination attributes, AMP and the mobile attribute.

Don’t just translate, localize!

Multilingual websites aren’t just about content translations. They are about offering a fully localized experience including cultural references, currencies, timezones and whatever else makes sense for your local audience.

Frequently asked questions about hreflang attribute

  1. Why do search engines ignore my hreflang attribute?
  2. Can I use multiple hreflang attributes for one page?

1. Why do search engines ignore my hreflang attribute?

The hreflang attribute is a signal rather than a directive. Search engines are not required to actually follow your hreflang attribute definitions, but they usually do.

2. Can I use multiple hreflang attributes for one page?

Yes, you can use multiple hreflang attributes for one page to signal that the page is meant to be shown for more than one country or region. For example, if you’ve got a page that’s meant to shown to people in Germany and Austria then you can indicate this as follows:

<link rel=”alternate” hreflang=”de-de” href=”https://www.example.de/” />
<link rel=”alternate” hreflang=”de-at” href=”https://www.example.de/” />

Include a general hreflang attribute for German users:

<link rel="alternate" hreflang="de" href="https://www.example.de/" />

Resources used

  1. Google guidelines

Ready to try ContentKing?

Finally understand what’s really happening on your website.
Please enter a valid domain name (www.example.com).