Hreflang tag: what is it, why do you need it and how to use it

Home ▸ Blog ▸ Hreflang tag: what is it, why do you need it and how to use it

20th June 2019

If your website targets users from all around the world and the content is translated into various languages catering for different countries and regions, you need to help Google understand which page to index and display for a particular region. Simply publishing translated versions of your content on different URLs won’t help Google understand the relationship between URLs and how your site is set up. It can be problematic for search engines to understand your multilingual problem and as a result your French pages may be showing in the UK and vice versa.

The solution to this is called hreflang tag. It’s a HTML meta tag that stipulates the language and the relevant geographic region for a page. It tells search engines where to find the content in other languages.

Bear in mind that if you publish the same content on localised URLs (for example, content on www.example.com is the same as content on www.example.com/fr) without translating it first, it will be considered as duplicate content by search engines.

When should I use Hreflang?

You should use hreflang when:

You keep the main content in a single language and translate only the template, such as the navigation and footer. This is common for user generated content like forums.
When you have pages in the same language using regional variations. For example, you have individual English versions of a page for users in US, Canada, the UK and Ireland.
When your site is fully translated into multiple languages. For example, you have both French and English versions of each page.

How can I add Hreflang attributes?

There are three ways of indicating alternate pages of your website.

1. HTML tags

You can add <link rel=”alternate” hreflang=”en” href=”https://www.example.com”> elements to the <head> section of your website. This way you tell Google all of the language and region variants of a page. This method is particularly useful if you don’t have a sitemap or access to HTTP response headers.

When adding hreflang tags to your pages, you have to include a link to every version of the page, including a self-reference. So, if you have a page in English, Spanish and French, each page would have all three tags:

2. Adding hreflang to HTTP Headers

You can return an HTTP header with your page’s GET response to tell Google about all of the language and region variants of a page. This is particularly useful for non-HTML files (like PDFs).

Here is the format of the header:

Link: <url1>; rel=”alternate”; hreflang=”lang_code_1″, <url2>; rel=”alternate”; hreflang=”lang_code_2″, …

Example: Here is the format of the header:

Link: <http://example.com/file.pdf>; rel=”alternate”; hreflang=”en”, <http://de-ch.example.com/file.pdf>; rel=”alternate”; hreflang=”de-ch”, <http://de.example.com/file.pdf>; rel=”alternate”; hreflang=”de”

3. Adding hreflang to an XML sitemap

You can add hreflang to your sitemap, however this method can be time consuming as you would need to add every language option to every URL in your sitemap.

For example: if you have an English language page targeted at English speakers worldwide, with equivalent versions of this page targeted at German speakers worldwide and German speakers located in Switzerland. Here are all the URLs present on your site:

www.example.com/english/page.html, targeted at English speakers.

www.example.com/deutsch/page.html targeted at German speakers.

www.example.com/schweiz-deutsch/page.html targeted at German speakers in Switzerland.

Can hreflang tags be used with canonicals?

Hreflang tags are not an alternative to the canonical tag. Best practise indicates that these two tags are used together. You should add self-refencing canonical tag to each version of the page.

For example, for the site in three languages, the English mark-up should look like this:

French should look like this:

And Spanish should look like this:

They need to be added to each version, Spanish, German, etc

Does hreflang tag affect SEO?

Incorrect hreflang implementation can be harmful to your website rankings, organic visibility and traffic. Hreflang tag will not only reduce the impact of duplicate content by illustrating a relationship between two pages, but it will also help you serve the right content to new users.

Below, we have listed some of the most common hreflang mistakes and tools that will help you debug hreflang errors. You can also monitor errors in Google Search Console.

Missing self-referencing canonical tags
Conflicting hreflang and rel=canonical tags
More than one URL is specified or the same hreflang value
Hreflang links points to redirecting or broken URLs
Not using absolute URLs

Useful tools:

Aleyda Solis’s hreflang tags generator toolfor generating or modifying hreflang tags.
Merkle SEO hreflang tag testing toolfor validating hreflang tags on a single live page.
HREFLang checker and validatorfor validating hreflang tags on a single live page.

When you need assistance with translating your pages, in order to gain online visibility internationally, complete the free 20 minutes quote here.

Recent Posts

Updated Posts

Blog Archive

Blog Categories