8 July 2022

Multilingual WordPress

Hreflang Tags: Definition & Its Importance in a Multilingual Environment

If your website has content in different languages, knowing what hreflang tags attributes are and their importance in a multilingual site is essential.

The hreflang tag is a simple HTML attribute with straightforward syntax. However, it is challenging to learn, especially if you don’t have a technical background.

Google digital marketing expert, John Mueller, even describes hreflang as one of the most complex aspects of SEO (search engine optimization).

Luckily, in this article, we will talk about everything you need to know about hreflang tags and how to implement them on your multilingual website!

What is hreflang?

Hreflang Tags are snippets of code that tell Google which language to use when serving search engine results to geographically targeted users.

This hreflang attribute will signal to search engines that users who submit queries in language “x” will want these results, not pages with similar content in language “y.”

These tag attributes are mostly used for multilingual websites. They make it easier for website owners to target specific audiences in another language or country.

What does it look like?

Hreflang tags use a consistent and straightforward syntax. It consists of a few important codes, such as:

link rel=“alternate”: is a code that tells search engines there’s another version of the web page that exists on the website.
hreflang=“x”: is used to specify the language of the targeted page. You can also use a combination of language and area code to target a specific area.
href=“https://example.com/alternate-page”: is the URL at which an alternate can be found.

Here’s an example of the default hreflang tag syntax:

If this website has another version in German, then change the hreflang=”x” with the language code of Germany in the ISO-639-1 format:

Change the hreflang=” x” with the two-letter country code from the ISO 3166-1 Alpha 2 format to target a specific region. For example:

Targeting English speakers in the UK:

Targeting English speakers in the US:

Why Should You Use Hreflang Attributes?

Hreflang tag attributes are commonly used for multilingual websites.

By default, these tags will not directly increase the ranking of a website. However, it greatly improves website performance and SEO in a multilingual environment.

Here are some reasons why hreflang attributes are a must-have on your website.

1. Better User Experience

As it detects regions and provides content in the specified language, hreflang tags are bound to improve the website’s overall user experience.

When the users are provided with content in their local language, they will most likely feel at home and get a more positive experience on the site.

2. Improve SEO

Better user experience also means reducing the website’s bounce rate ratio. This means users are more likely to stay longer and open other pages on the site.

This also results in a higher dwell time on a page and other good SEO stuff that improves the site’s ranking on the search engine results (SERPs).

3. Prevent Duplicate Content

Like canonical tags, hreflang tags also prevent duplicate content issues on the site. It provides different URLs for every language and region listed in the rule.

Suppose you provide English content for two regions, for example. Hreflang tags allow the use of two different URLs for the same content without sacrificing your SEO efforts.

These hreflang tag attributes make it clear to Google and other search engines that each content is optimized for multiple users in different regions.

Without them, Google may see this as duplicate content, which might negatively impact the site’s SEO and rankings.

How to Implement Hreflang Tags Correctly

According to Google supports, hreflang tag attributes can be implemented in three ways: using HTML, HTTP headers, and XML sitemap markup.

However, if you’re using WordPress, thanks to the innovation of multilingual plugins like MultilingualPress, there’s a way to implement hreflang tags safely.

This section will explain in detail how users can insert hreflang tag attributes to their multilingual websites through the methods mentioned above.

Using Multilingual Plugin

The easiest way to implement hreflang attributes is through a multilingual plugin. Most of these plugins add them automatically whenever the user creates a new site.

Like MultilingualPress, for example, as soon as users define the relationships between one site and another, it automatically inserts the link attribute into the sites.

Here’s what that looks like on our website:

For a complete guide on defining translation relationships between one site to another using the MultiligualPress plugin, check out this article.

Using HTML

Another easy method to implement hreflang is through basic HTML tags. You need to add the appropriate elements to the <head> section of your page.

However, while it does sound simple, this HTML method usually takes more time since users need to add the tags into the <head> section of every page on the site.

Here’s how the hreflang will appear when implemented using basic HTML for websites in English, German, and French:

<head>

</head>

Using HTTP headers

If your website publishes PDF content, DOC, or other non-HTML files, you can also implement hreflang tags using the HTTP headers.

Here the hreflang works the same as it would o a webpage. It’s used to specify the language used in the document.

Here’s what the HTTP headers should look like for non-HTML content in French, English, and German:

Link: <https://domain.com/blog/document.pdf>; rel=”alternate”; hreflang=x-default”,

<https://domain.com/blog/fr/document.pdf>; rel=”alternate”; hreflang=”fr”,

<https://domain.com/blog/document.pdf>; rel=”alternate”; hreflang=”en”,

<https://domain.com/blog/de/document.pdf>; rel=”alternate”; hreflang=”de”

Using XML sitemap markup

Another method to implement hreflang tags is through the XML sitemap — one of the best options if your website has multiple language versions.

To use this method, you must add a <loc> element to specify a URL with the child entry <xhtml:link> to include the targeted language information.

Therefore, if your website has three different language versions, the sitemap will have three entries, each with three identical child entries.

If you have a website in three languages: English, German, and French. Here’s what the hreflang tags will look like on the sitemap:

<url>

<loc> https://domain.com/blog/post/ </loc>

<xhtml:link rel=”alternate” hreflang=”en” href=”https:/domain.com/blog/en/post/” />

<xhtml:link rel=”alternate” hreflang=”de” href=”https://domain.com/blog/de/post/” />

<xhtml:link rel=”alternate” hreflang=”fr” href=”https://domain.com/blog/zh/post/”/>

</url>

3 Common Errors & Solutions

The following are some of the most common mistakes when using hreflang tags:

1. Using incorrect language and country code

When adding hreflang code to a web page, enter the correct country and language codes.

An example of this misuse of codes is using “en-uk” to target English speakers in the UK instead of using “en-gb.”

This webpage provides a list of valid hreflang codes that Google and most search engines recognize for popular countries.

2. Implementing multiple hreflangs on a website

As explained earlier, hreflang attributes can only be used in one place. Implementing these tags with different methods at the same time will only result in errors.

Each method we’ve explained above has its own advantages and disadvantages. So it’s recommended to find the one that suits your needs best.

3. Missing return tags

This error can be found on the Google Search Console page, under the international targeting tab. It results from invalid hreflang annotations.

A default rule of hreflang tags is that every line of code that references another page must have the same code on every page it’s implemented.

This means your hreflang annotations must be confirmed to another page. If page A links to page B, page B must link back to page A.

Otherwise, your annotations will not be recorded correctly, and the return tag errors will occur.

Wrapping Up!

To make sure your multilingual website reaches its maximum potential, it’s important to have a good understanding of how hreflang tags work.

The hreflang tags attribute provides a good user experience as it makes it easier for Google to

display pages according to customers’ location.

In this article, we have talked about the hreflang tags attribute, its importance in a multilingual website, and how to implement it.

We hope this article has been helpful! If you need guides on creating and maintaining multilingual websites, check out our blog for more articles!