A finger pointing at a search bar on a yellow background.

If your website is available in multiple languages, you’ve probably come across hreflang tags. These pieces of code get customers to the correct version of your site, starting their ‘customer journey’ off on the right foot. 

So setting them up correctly as part of your global SEO strategy is important.

What are hreflang tags?

Hreflang tags are small pieces of HTML code that detail the language and the target region of a webpage.

They’re made up of ISO language and country codes.

For example “de-DE” = German_Germany

Why do they matter?

Hreflang tags help search engines serve up the correct version of your website for users, depending on their settings and location. That makes them super important if you’re hosting content in multiple languages.

Example:

<link rel=”alternate” hreflang=”de-DE” href=”https://website.com/de” />

This piece of code tells the search engine that there is an alternate version of a webpage (https://website.com/de) that should be served to German speaking users in Germany.

<link rel=”alternate” hreflang=”en-JP” href=”https://website.com/en-jp” />

This piece of code tells the search engine that there is an alternate version of a webpage (https://website.com/en) that should be served to English speaking users in Japan.

How to add hreflangtags correctly

Reference all the versions, all the time

Each web page should contain a hreflang tag for each alternate version of the page, including itself. i.e. if your site is available in English, French, and German each version of each page would need to include the following:

<link rel=”alternate” hreflang=”de-DE” href=”https://website.com/page/de” />

<link rel=”alternate” hreflang=”fr-FR” href=”https://website.com/page/fr” />

<link rel=”alternate” hreflang=”en-US” href=”https://website.com/page/en” />

Set your canonicals

In addition to listing all the alternate versions of a page, you also need to include a canonical reference to signify the primary version of a webpage. This will need to be set to the correct language version, as needed. For example on the French version the code would look like this:

<link rel=”canonical” href=”https://example.com/page/fr” />

<link rel=”alternate” hreflang=”fr-FR” href=”https://website.com/page/fr” />

<link rel=”alternate” hreflang=”de-DE” href=”https://website.com/page/de” />

<link rel=”alternate” hreflang=”en-US” href=”https://website.com/page/en” />

Set your x-default tags

As well as a canonical tag you’ll need to add an x-default tag. This tells the search engine which page to show if there isn’t a hreflang match for a user’s language or region.

So our French version now looks like this:

<link rel=”canonical” href=”https://example.com/page/fr” />

<link rel=”alternate” hreflang=”fr-FR” href=”https://website.com/page/fr” />

<link rel=”alternate” hreflang=”de-DE” href=”https://website.com/page/de” />

<link rel=”alternate” hreflang=”en-US” href=”https://website.com/page/en” />

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

Bonus tips!

  • Always use full urls in your hreflang tags e.g. https://www.website.com/page/en
  • ISO language codes can be used on their own e.g. “de” for German, but country codes must be used along with a language code and always in the following format: “de-DE”(language_country)
  • Hreflang code snippets should live in the <head> section of a webpage
  • Each hreflang tag should point to a unique url. Duplicates can be ignored by search engines which means users may end up being served content in the wrong language.

A robust global SEO strategy is a must-have for any brand or business looking to establish itself overseas. From getting the technical structures in place to optimising your on-page content, we can help.

Get in touch to find out more about our global SEO services.

A finger pointing at a search bar on a yellow background.

If your website is available in multiple languages, you’ve probably come across hreflang tags. These pieces of code get customers to the correct version of your site, starting their ‘customer journey’ off on the right foot. 

So setting them up correctly as part of your global SEO strategy is important.

What are hreflang tags?

Hreflang tags are small pieces of HTML code that detail the language and the target region of a webpage.

They’re made up of ISO language and country codes.

For example “de-DE” = German_Germany

Why do they matter?

Hreflang tags help search engines serve up the correct version of your website for users, depending on their settings and location. That makes them super important if you’re hosting content in multiple languages.

Example:

<link rel=”alternate” hreflang=”de-DE” href=”https://website.com/de” />

This piece of code tells the search engine that there is an alternate version of a webpage (https://website.com/de) that should be served to German speaking users in Germany.

<link rel=”alternate” hreflang=”en-JP” href=”https://website.com/en-jp” />

This piece of code tells the search engine that there is an alternate version of a webpage (https://website.com/en) that should be served to English speaking users in Japan.

How to add hreflangtags correctly

Reference all the versions, all the time

Each web page should contain a hreflang tag for each alternate version of the page, including itself. i.e. if your site is available in English, French, and German each version of each page would need to include the following:

<link rel=”alternate” hreflang=”de-DE” href=”https://website.com/page/de” />

<link rel=”alternate” hreflang=”fr-FR” href=”https://website.com/page/fr” />

<link rel=”alternate” hreflang=”en-US” href=”https://website.com/page/en” />

Set your canonicals

In addition to listing all the alternate versions of a page, you also need to include a canonical reference to signify the primary version of a webpage. This will need to be set to the correct language version, as needed. For example on the French version the code would look like this:

<link rel=”canonical” href=”https://example.com/page/fr” />

<link rel=”alternate” hreflang=”fr-FR” href=”https://website.com/page/fr” />

<link rel=”alternate” hreflang=”de-DE” href=”https://website.com/page/de” />

<link rel=”alternate” hreflang=”en-US” href=”https://website.com/page/en” />

Set your x-default tags

As well as a canonical tag you’ll need to add an x-default tag. This tells the search engine which page to show if there isn’t a hreflang match for a user’s language or region.

So our French version now looks like this:

<link rel=”canonical” href=”https://example.com/page/fr” />

<link rel=”alternate” hreflang=”fr-FR” href=”https://website.com/page/fr” />

<link rel=”alternate” hreflang=”de-DE” href=”https://website.com/page/de” />

<link rel=”alternate” hreflang=”en-US” href=”https://website.com/page/en” />

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

Bonus tips!

  • Always use full urls in your hreflang tags e.g. https://www.website.com/page/en
  • ISO language codes can be used on their own e.g. “de” for German, but country codes must be used along with a language code and always in the following format: “de-DE”(language_country)
  • Hreflang code snippets should live in the <head> section of a webpage
  • Each hreflang tag should point to a unique url. Duplicates can be ignored by search engines which means users may end up being served content in the wrong language.

A robust global SEO strategy is a must-have for any brand or business looking to establish itself overseas. From getting the technical structures in place to optimising your on-page content, we can help.

Get in touch to find out more about our global SEO services.

Related Posts