Cookies disclaimer

I agree Our site saves small pieces of text information (cookies) on your device in order to deliver better content and for statistical purposes. You can disable the usage of cookies by changing the settings of your browser. By browsing our website without changing the browser settings you grant us permission to store that information on your device.

Hreflang

Hreflang - rel="alternate" hreflang="x"

Contents:

 

Hreflang - rel="alternate" hreflang="x"

The hreflang tag is designed to be used on sites that use & target multiple languages, regions or both. Hreflang first came out in 2011 and has been available for use for some time, but is a little trickier than some other tags. We cover some of the other concepts and components influencing multi-lingual and regional sites in another guide.

When to Use Hreflang

Ultimately this tag signals to Google that there is a relationship to an alternate language or region version at the URL specified and this page. There are three broad scenarios that would require you to use this tag, in all scenarios the aim to is to help indicate to Google what version of your content should be served.

Language

If your site contains multiple versions of the same content but in different languages, you will likely want to control what version is shown. The hreflang tag can help you to do this, by using the below code:

hreflang="fr"

In the example above we have specified that the language used on the page is French.

Region

You may want to specify a different region, assuming the original content is in English but you have a version of the content that targets the USA, you would use this tag:

hreflang="en-us"

In this example, the language stays the same but the region changes, helping to influence what version is shown when someone searches in the specified region.

Both

Using these two components in conjunction, you can target any country and / or any region, such as Spanish speakers in Spain:

hreflang="es-es"

Or English in the UK:

hreflang="en-gb"

Impacts & Benefits

This tag can help to resolve or prevent the following three issues form occurring:

  • Less relevant URLs showing in the SERPs
  • Showing two very similar URLs in the SERPs
  • Google may not be aware of all your site’s language variations

All of these have the power to worsen the user experience and consequently your site’s click through rate… This can have a negative impact on rankings.

Therefore, the benefits of correctly implementing this tag are that it helps to ensure the correct version of your content is shown… The indirect benefits of this can be improved organic visibility in the regions and languages that your site targets.

Bear in mind that this is not an order you are issuing to Google and there are other factors that can influence what version of your content ranks. We discuss this in another guide to multi-lingual and regional SEO.

Bing (Language Meta Tags)

As a note, Bing do not use the hreflang tag, but instead use the Language Meta Tag. This uses the same ISO codes as hreflang and should be implemented in the same way, but the tag looks like this:
<meta http-equiv="content-language" content="en-us">

You will have to weigh up how important this is to your site as in many regions Bing accounts for a very small and diminishing source of organic traffic. Bing cover the options available for optimising to language and region in this guide.

Implementation & Examples

This tag works in a very similar way to the canonical tag but with additional attributes. For example, in the full tag shown below we open with rel (same as with the canonical tag)… In addition to the ‘canonical’ URL we also stipulate the hreflang attribute:

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

Specify All Versions

Let’s assume you have an English language UK website site and you are branching out into some Spanish speaking countries:

  • Spain
  • Argentina
  • Mexico

So, you’ve gone ahead and created sub domains for the Spanish versions:

  • es.example.com
  • mx.example.com
  • ar.example.com

Using the top-level page on each version as the example you would add the following tags to each version of the content including the original English UK content:

  • <link rel="alternate" hreflang="en-gb" href="https://example.com/" />
  • <link rel="alternate" hreflang="es-es" href="https://es.example.com/" />
  • <link rel="alternate" hreflang="es-ar" href="https://ar.example.com/" />
  • <link rel="alternate" hreflang="es-mx" href="https://mx.example.com/" />

To reiterate, you specify URLS for all language / regional versions of the content, on all versions of the content.

Multiple

In the above example, we were specifying one hreflang component per page, as there were four version of the page, we had four tags on each version. However, if you want to target two regions using the same language specifically, you could add two tags:

<link rel="alternate" hreflang="es-es" href="https://es.example.com/" />
<link rel="alternate" hreflang="es-ar" href="https://es.example.com/" />

You can see here that we have indicated that this one URL targets both Span and Argentina and is in Spanish. You could always omit the regional component in the above example to simply say that the page targets ‘Spanish’.

Remember that you will need to specify all versions, on all versions… Continuing the example, if we target these two regions in Spanish in addition to our English UK site, we would use the following tags on each version of the top-level page:

<link rel="alternate" hreflang="es-es" href="https://es.example.com/" />
<link rel="alternate" hreflang="es-ar" href="https://es.example.com/" />
<link rel="alternate" hreflang="en-gb" href="https://example.com/" />

Default

If, for any reason, you have page that is not specific to a language or region (unlike the rest of your site), you can apply the following tag to indicate this:

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

XML Sitemap

Either you use the above specified method or you use the xml sitemap implementation, there is no need to do both… There is no benefit from doubling down!

To continue the above example, with four pages that target UK, Spain, Argentina and Mexico, you would use this following code within your XML sitemap:

<?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>https://example.com/</loc>
<xhtml:link
rel="alternate"
hreflang="en-gb"
href="https://example.com/"
/>
<xhtml:link
rel="alternate"
hreflang="es-es"
href="https://es.example.com/"
/>
<xhtml:link
rel="alternate"
hreflang="es-ar"
href="https://ar.example.com/"
/>
<xhtml:link
rel="alternate"
hreflang="es-mx"
href="https://mx.example.com/"
/>

  </url>

<url>
<loc> https://es.example.com</loc>
<xhtml:link
rel="alternate"
hreflang="es-es"
href="https://es.example.com/"
/>   
<xhtml:link
rel="alternate"
hreflang="en-gb"
href="https://example.com/"
/>
<xhtml:link
rel="alternate"
hreflang="es-ar"
href="https://ar.example.com/"
/>
<xhtml:link
rel="alternate"
hreflang="es-mx"
href="https://mx.example.com/"
/>
</url>

<url>
<loc>https://ar.example.com /</loc>
<xhtml:link
rel="alternate"
hreflang="es-ar"
href="https://ar.example.com/"
/>
<xhtml:link
rel="alternate"
hreflang="en-gb"
href="https://example.com/"
/>
<xhtml:link
rel="alternate"
hreflang="es-es"
href="https://es.example.com/"
/>
<xhtml:link
rel="alternate"
hreflang="es-mx"
href="https://mx.example.com/"
/>
</url>

      <loc>https://mx.example.com /</loc>
<xhtml:link
rel="alternate"
hreflang="es-mx"
href="https://mx.example.com/"
/>
<xhtml:link
rel="alternate"
hreflang="en-gb"
href="https://example.com/"
/>
<xhtml:link
rel="alternate"
hreflang="es-es"
href="https://es.example.com/"
/>
<xhtml:link
rel="alternate"
hreflang="es-ar"
href="https://ar.example.com/"
/>
</url>

</urlset>

Canonicalisation

Typically, we would use canonical tags to indicate which version of the content should be shown, as is the case with most canonical issues. Language and region are a couple of exceptions to this, where you should not use canonical tag.

The rule is that the canonical tag can be used within a language or region version but not across / between them. For example, if you have a site that targets the UK and USA in English and within the UK version you have a page that canonicalizes to another UK page or itself, this would be fine.

Foreign language or region versions should use self-referential canonical tags to avoid other canonical duplication problems.

Let’s say we have two pages:

us.example.com
uk.example.com

The UK version should have the following tags:

  • <link rel="alternate" hreflang="en-gb" href="https://uk.example.com/" />
  • <link rel="alternate" hreflang="en-us" href="https://us.example.com/" />
  • <link rel="canonical" href="https://uk.example.com/" />

Incorrect use would be to use the US sub-domain within a canonical link on the UK sub-domain or vice versa.

ISO Language & Region Code

Hreflang attributes use country and language codes for each of the two components, these are:

Be sure to check what you put in because it’s not as intuitive as you might think.

Sign Up For Early Access
& Earn a Chance to Win 1 Years Free Subscription!

What You Get...

There's no obligation to become a full member after your trial, but we think that once you've seen what's available, you'll want to join us.

We are in the process of building our software and are ramping up to launch the Technical Auditing component in early 2018, soon to be followed by a suite of other components such as keyword ranking and backlink analysis.

Sign up today for 1 months free access and get a further 10% off of any package price when we launch for the first year as a reward for being an early subscriber.

Also, you will be entered into a lottery, where we will be giving away five 1-year subscriptions for free!

Sign up for early access today!