Contents

What is the hreflang tag?

When you want to set up an international SEO strategy, it is necessary to think seriously about the use of the hreflang tag. It is a technique used by websites that have the same content in several languages. Google introduced this piece of HTML code in 2011 to help search engines understand the international context of a page - specifically the location and language. Prior to 2011, Google relied on other, less precise elements, to guess the relevance of a page to a query. Subdomain, URL structure (site.com/uk/en/), server location or location targeting in Google Search Console were indeed some of the clues, but this generated a lot of inconsistencies. The hreflang tag has become essential to differentiate between the English from the United States and English from the United Kingdom, for example.

beacon-hreflang-site-multilingual

In practical terms, it can be used in 3 scenarios:

- You have a completely different version of your site translated into one or more languages.
- You only translate some elements of the template (menu, sidebar, footer...) but the main content is only available in one language.
- Some of your pages are very similar because they use regional language variations (example: Spanish from Spain vs Spanish from Mexico).

Hreflang and SEO: why is this tag so important?

The implementation of a hreflang tag is essential from an SEO and UX (user experience) perspective. Indeed, by allowing search engines to rank a page in the right language, it reduces the bounce rate and pogo sticking. Pogo sticking occurs when a user performs a search, clicks on a result, immediately returns to the Google results page and clicks on a different result. Google translates this type of behavior as a direct consequence of the user's dissatisfaction with the search result. It is therefore a negative signal that can impact your pages’ ranking.

The hreflang tag also avoids duplicate content that can be generated when a site offers several page versions depending on the region. For example, company A has a multilingual website with content for Germany, Switzerland and France. The contents of the Swiss and German versions sometimes differ only in currency, price, etc. As the two languages are quite similar, without the hreflang, there would be a problem of duplicate content. Thanks to the tag, the search engine recognizes that it is content aimed at different regions.

Where should the hreflang tag be placed?

In its guidelines, Google allows three different ways to implement the hreflang tag: in the header (HTML), the XML Sitemap or the HTTP header.

beacon-hreflang-header-sitemap

While implementation in HTML and XML sitemaps are the most frequently used solutions, there is no single best method of implementation. Only the development team can judge what is most feasible based on the site structure and its constraints.

Implementation in the header

The implementation of hreflang tags in the HTML section is the easiest to check (just look in the source code). It looks like this:

<link rel= »alternate » href= »https://www.exemple.com » hreflang= »en »>

<link rel= »alternate » href= »https://www.exemple.de » hreflang= »de-DE »>

<link rel= »alternate » href= »https://www.exemple.es » hreflang= »es »>

Each alternative must be linked to all the others. This type of implementation can therefore add server load and slow down the site. Indeed, if you offer 20 languages, it means that you will have to add 20 link elements as shown above on each page. The user will have to load each element when he will only use one. The database will also have to work harder to generate these links. This implementation is therefore not recommended for large sites that require a lot of server resources.

Implementation in the XML Sitemap

This method has the advantage of not increasing the page loading time. It is nevertheless more difficult to check its good implementation, in particular if the linked pages are in different sitemaps, for example: example.com/us/sitemap.xml and example.com/es/sitemap.xml. To check the hreflang tag, it will be necessary to search the specific URL in each sitemap, which is tedious.

Here is an example of a Hreflang tag in a sitemap:

<url>

<loc>http://www.exemple.com/de</loc>

<xhtml:link rel= »alternate » hreflang= »fr » href= »http://www.exemple.com/fr » />

<xhtml:link rel= »alternate » hreflang= »en » href= »http://www.exemple.com/en » />

</url>

You will note that each unique URL must have its own location node and each alternate version (including the URL itself) must be specified as follows in the URL node:

<xhtml:link rel= »alternate » hreflang= »de » href= »http://www.exemple.com/en » />>

Enfin, chaque sitemap doit se terminer par la balise </urlset>

Implementation in the HTTP header

This is the least known and least used method. However, in theory, it has many advantages. Unlike the implementation in the XML sitemap, the HTTP header is processed each time the page is crawled. Therefore, Google always receives the hreflang information. It is also possible to integrate the tag into pages that do not have their own source code or PDF files, which are also indexed in Google.

The code needed to implement hreflang tags in HTTP headers is quite similar to that used for HTML headers, with a few syntactic differences.

If we take our example above:

Link : < http://www.exemple.com/en; rel= »alternate » ; hreflang= »en »,
< http://www.exemple.com/fr; rel= »alternate » ; hreflang= »fr »,
< http://www.exemple.com/de/> ; rel= »alternate » ; hreflang= »de »

As with the HTML header, this technique requires an implementation at the URL level. The HTTP header code for a category page, in these three versions would therefore look like this:

Link : < http://www.exemple.com/en/category1/> > ; rel= »alternate » ; hreflang= »en »,
< http://www.exemple.com/fr/categorie1/> ; rel= »alternate » ; hreflang= »fr »,
< http://www.exemple.com/de/categorie1/> ; rel= »alternate » ; hreflang= »de »

Once the implementation method is defined, it is important to consider some technical elements before jumping in.

Hreflang x-default

The "x-default" is a hreflang attribute value that defines the default version to which the user should be returned if none of the specified languages match their browser settings.

Canonical tag and hreflang

As a reminder, the canonical tag is a method to indicate to search engines that an individual URL (not necessarily a page) is the main copy of a page. It avoids possible problems of duplicate content.

rel= "alternate" hreflang= "en" and rel= "canonical" must be used simultaneously. Each version of each language must have a rel= "canonical" link pointing to itself, even if it is a regional variant. In another example (English UK, Australia), let's assume we are on the homepage:

<lien rel= »canonique » href= »http://exemple.com/ »>

<lien rel= »alternate » href= »http://exemple.com/en-gb/ »

 hreflang= "en-gb" />

<lien rel= »alternate » href= »http://exemple.com/en-au/ »

 hreflang= "en-au" />

If we were on the en-gb page, only the canonical tag would change:

<lien rel= »canonical » href= »http://exemple.com/en-gb/ »>

<lien rel= »alternate » href= »http://exemple.com/en-gb/ »

 hreflang= "en-gb" />

<lien rel= »alternate » href= »http://exemple.com/en-au/ »

 hreflang= "en-au" />

NB: You must be careful to point the hreflang links to the canonical version of each URL. Otherwise, the system will not work.

Hreflang integration mistakes to avoid

Google's John Mueller said that hreflang is one of the most complex technical issues for SEO professionals. It's easy to make a costly mistake in implementing it! Here are some hreflang tag mistakes to avoid at all costs.

Integrate the Hreflang tag only on the homepage

Even if it is quite rare, it happens that some sites use the tag only on the homepage. This is probably due to the fact that in its examples, Google always uses the homepage.

Use incorrect language codes

While it may seem obvious, you need to make sure you are using the right country codes and in the right format. Aleyda Solis has published a handy tool to easily generate hreflang tags.

Add hreflang tags to pages with a noindex tag

Google warns against using hreflang tags when they point to pages that are not indexable and/or blocked in robots.txt. The backlink cannot be followed by robots.

Mix implementation methods

It is best to use only one method for your hreflang strategy. It is therefore useless and counterproductive to implement it for example in the sitemap and the HTTP header! Moreover, the creation of hreflang in the XML sitemap can be complex. Some CMS offer solutions for automatic markup (hreflang WordPress, hreflang Prestashop...). It is a recommended solution when you do not master the code.

Use hreflang to solve your duplicate content problems

For a long time considered as the miracle solution against duplicate content, the hreflang tag has shown its limits. Let's take the example of 2 strictly similar pages, in the same language (Belgian French and French from France). The hreflang tag will not change anything, the content will remain duplicated and therefore sanctioned by the robots. At best, one of the pages will be indexed and will cannibalize the other. At worst, both will not be indexed.

To reduce the harmful effects of similar pages, it is possible to implement an "international" netlinking strategy. By linking to different versions of our pages from sites using the same language, you will give more value to your different versions. But this strategy would only be a band-aid. Eradicating duplicate content remains the cleanest and most sustainable solution.

Best practices for successful implementation of your hreflang tag

If you have followed the above guidelines, these "best practices" will seem obvious:

  • Index the original page and all its variants (do not put a noindex tag and banish nofollow internal links).
  • Set up bidirectional hreflang attribute references.
  • Use the right codes for different languages and countries (for example, do not use AT, which corresponds to Austria, for an Australian version...).
  • Always set up a hreflang = "x-default”.
  • Make sure that the hreflang and the canonical URL match.
  • Do not use relative URLs but only absolute URLs.
  • Use only one implementation method: XML sitemap, HTTP header, HTML header.

An essential rule to keep in mind is that your hreflang values must be confirmed from other pages. For example, if A refers to B, B must refer to A. Page A must use rel-alternate-hreflang binding to itself to function properly.

How to check the correct implementation of your hreflang tags?

It is possible to detect possible implementation errors in the Google Search Console. In this case, the message "Return Tag Errors" will appear under the International Targeting tab. It will show you the number of return tags found, whether you use an XML sitemap or an HTTP header. But as prevention is better than cure, there are fortunately tools to check the validity of your hreflang tags beforehand. The best known are hreflang.ninja and hflang.dejanseo. You just have to enter the URL to test and the tool will return the corresponding version of the site.

Conclusion

The hreflang tag is therefore a key issue when you want to reach foreign Internet users. If it has demonstrated its effectiveness for several years, it is also the source of many errors that can impact the SEO of a site. It is therefore advisable to handle it with caution and to entrust its implementation to a developer. It is also important to keep in mind that hreflang is only a signal and not a directive, contrary to robots.txt. Other elements can impact the effectiveness of your tag and disrupt the ranking of pages. To reinforce your international strategy, you can also opt for a local IP hosting, with of course, a carefully executed netlinking strategy.

class="img-responsive
   Article written by Louis Chevant

Further reading

The complete guide to Internal Meshing

The step-by-step method to build your semantic cocoons, your mesh and the optimal tree structure of your website.

Download for free