How To Set Up Hreflang Tags Correctly

01-08-2018

Do you own a website which is available in different languages? Do you wish to give your international visitors a pleasant experience on your website? If so, you should certainly set up hreflang tags on your website, which is a staple of international SEO.

Read on to learn more about what hreflang tags are, different ways to implement them as well as common mistakes to avoid!

Set up hreflang tags

What is the Hreflang tag?

Introduced by Google in December 2011, the hreflang tag is a technical solution for websites that have similar content in a variety of languages. By sending this instruction to Google, the webmaster of a multilingual site tells the search engine to send people to the content in their own language. It can also be used to show you have content targeted towards variants of a single language (e.g. the different variants of the English language).

Implementing hreflang tags correctly can decrease your bounce rate and increase your conversions. This is because you are ensuring that every segment of your target audience is landing on the version of your website that is most convenient for them.

The following is a code sample of an hreflang implementation:
<link rel=”alternate” href=”https://example.com/” hreflang=”en-us” />
<link rel=”alternate” href=”https://example.com/uk/” hreflang=”en-gb” />
<link rel=”alternate” href=”https://example.com/fr/” hreflang=”fr-fr” />

 

How do you set up hreflang tags?

There are three methods for setting up hreflang tags on your website:

In the header section of the HTML code of each page

The first method to set up hreflang tags on your website is by adding code in the <head> section of every page. Possibly the simplest and most popular method used by developers, this is useful if you don’t have a sitemap or the ability to specify HTTP response headers for your site. Also, Google normally processes the information incorporated in the header section quite well.

In XML sitemaps

Secondly, you can also inform Google of all the language and region variants for each URL via the use of the sitemap. The downside is the fact that Google does not crawl and process XML sitemaps as often as HTML pages. Thus, Google has issues processing the information that is included in sitemaps on time.

In the HTTP header of each page

The third and final method is by setting up the hreflang tag in the HTTP header of each page. This is especially useful for non- HTML files such as PDFs.

Refer to Google’s recommendations to learn more about how to set hreflang tags step by step.

 

Common mistakes to avoid when setting up hreflang tags

Hreflang implementation mistakes can do real harm to your international SEO efforts. Here are three common mistakes to avoid when setting up your hreflang tags.

Incorrect language and country codes

Use ISO 639-1 format for the language code and ISO 3166-1 Alpha 2 format for the country code. Since typos can happen to anyone, you can use the hreflang tags generator tool by Aleyda Solis to prevent any mistakes.

Incorrect country code:
<link rel=”alternate” href=”https://example.com/” hreflang=”en-uk” />
<link rel=”alternate” href=”https://example.com/” hreflang=”en-gb” />

Incorrect language code:
<link rel=”alternate” href=”https://example.com/” hreflang=”eng-us” />
<link rel=”alternate” href=”https://example.com/” hreflang=”en-us” />

No self-referencing hreflang tag

When the hreflang tags of a page do not include a reference to the current page itself, such tags may be ignored or interpreted wrongly. To avoid this mistake, make sure to include the current page’s URL and language code in your set of hreflang tags. In the below example, the default language for a webpage is English but French and Italian versions are also available.

Missing self-referencing hreflang tag:
<link rel=”alternate” hreflang=“en-gb” href=“https://www.example.com/en-gb/page.html”>
<link rel=”alternate” hreflang=“fr-fr” href=“https://www.example.com/fr-fr/page.html”>
<link rel=”alternate” hreflang=“it-it” href=“https://www.example.com/it-it/page.html”>

Incorrect hreflang links

Check your links before embedding them in the code for Google to index them. If a hreflang tag points to a 404 Error page or if you are using a relative URL instead of an absolute URL, these pages could be indexed incorrectly or remain completely unindexed.

Not using absolute URL:
<link rel=”alternate” href=”example.com/” hreflang=”en-us” />
<link rel=”alternate” href=”https://www.example.com/” hreflang=”en-us” />

Contact us today to discover more about the benefits of international SEO!