The impact of hreflang tags on multilingual SEO: best practices

In order to cater to customers from different parts of the world, businesses adopt approaches that allow them to present their content in the relevant languages their website supports. International SEO practices help such efforts, and one of the key elements in that approach is using hreflang tags.

These HTML tags inform search engines about a web page’s language and geographical targeting, ensuring that the content is presented in the same language as the one your target audience uses.

This article explores the role of hreflang tags in multilingual SEO, how to implement them correctly, and the common mistakes to avoid for optimal website performance. But first, let’s look at what hreflang tags are.

Multilingual SEO and hreflang tags: an overview

Optimizing your website to support multiple languages and perform better in search engine results page (abr. SERP) is the essential function of multilingual SEO. A significant part of multilingual SEO’s success is hidden in the language versions of all the pages your website displays to users in different geographic areas.

Herein come hreflang tags – bits of HTML code that you can include in your web pages to tell every search engine bot (called crawler) of Google, Bing, DuckDuckGo, etc. that you are performing geographical targeting of your content by supporting different language options. 

When properly implemented, these tags allow crawlers to understand the structure of your website, assuring that the correct language version of the page’s alternate version is shown to users in different regions.

In other words, hreflang tags help your multilingual website reach more users in regions where varying languages are spoken by displaying the same content on the same page in different languages.

For instance, a user in Great Britain who searches in French would be shown results in French, where the language version of each website fits the search language, rather than simply showing the English versions. 

However, sometimes, the language settings of the user’s device will determine the results’ language. If the same French user makes a general search like “SEO,” for example, and their device’s language is not French or English but, say, Korean, then the results that will appear will be tailored to fit that language.

The structure of an hreflang tag is straightforward. It includes:

• The link relation (rel) attribute set to “alternate”;
• The hyperlink reference (href) attribute set to the URL of the alternate version of the page;
• The hreflang attribute set with the appropriate language and country code.

Here’s an example of an hreflang tag you can deploy: 

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

This tag tells search engines that the page at this URL is an English-language version intended for users in the United States. For Great Britain users, the region code would have to be changed to en-gb. And that’s basically how hreflang tags work.

Hreflang tags for multilingual websites: How hreflang tags can impact SEO

Nowadays, almost 1.5 billion people in the world speak English. Still, there are also around 1.2 billion who speak Chinese, and another ~610 million and ~560 million who speak Hindi and Spanish, respectively. 

Many of those people indeed speak multiple languages, but many speak only their native language.

To overcome the language barrier and reach as many people as possible, websites use hreflang tags. Needless to say, other SEO factors, such as localized keyword optimization, quality content creation, and obtaining backlinks from platforms of high authority in those languages, are just as essential. 

A common concern among site owners is duplicate content. Even websites in multiple languages, pages that have similar content to the original web page can still be flagged as duplicates by search engines, negatively impacting SEO. 

However, by implementing hreflang tags correctly, language versions become clearly determined, which is signaled to search engines so that they understand that each page is intended for a different audience. Thus, any penalties associated with duplicate content can be avoided.

Despite the numerous benefits of implementing hreflang attributes, they are not an on-size-fits-all solution. As such, you should have a good understanding of the best practices when you attempt to implement hreflang tags into your website.

Understanding language and regional hreflang tags: Best practices

Language and region codes are fundamental elements in building quality hreflang links. 

Language codes follow the ISO 639-1 format, which consists of two letters: EN for English, FR for French, ZH for Chinese, and so on. 

Region codes, on the other hand, are based on the ISO 3166-1 Alpha 2 format and generally specify a particular geographical region within a language group, such as US for United States, GB for Great Britain, CA for Canada, etc. 

When combined, these codes indicate the specific language and region for which a page is intended. For instance, en-gb is for British English, and es-mx is for Mexican Spanish.

One of the best practices when implementing hreflang tags is to include a self-referencing hreflang tag on each page. This means that all the pages have a separate tag pointing to each one, in addition to tags pointing to other language versions. In doing so, Google’s and other search engines’ crawlers can better understand the relationship between different language versions of the same page.

Another important practice is to ensure that pages with hreflang annotations reciprocate the references. If page A links to page B using an hreflang tag, page B should also link back to page A with a corresponding hreflang tag.

While implementing the tag, remember this one hreflang tag that plays a special role: x-default. It is used to specify a fallback page for users whose language preferences do not match any of the available language versions on your website.

Using the x-default hreflang tag, you have a catch-all that ensures all users are served a version of the website, even if their preferred language option is unavailable. 

Here is what happens when a website does not have a user’s language version and has to rely on a fallback page:

1. The search engine will detect the language of the user’s browser when they execute a search, and will check if a language and region version that has been indexed is available. 
2. If there is no such version, the search engine will check only for an appropriate language version.
3. If no such version is found either, then it will have to go with x-default, redirecting the user to the fallback version of the website without them doing anything.

Hreflang tags and duplicate content: How to avoid duplicate content issues

When it comes to SEO, duplicate content is a significant issue many websites struggle with. Most search engines are designed to provide unique and relevant content to users. When they encounter multiple pages with the same content, they have a hard time determining which one is the most appropriate version.

In order to avoid showing the wrong version to users, or worse, getting all duplicate versions penalized, you need to implement hreflang attributes. That way, duplicate content where the same content is translated and presented in different languages does not get flagged.

It is imperative that you add hreflang tags for all language versions on every page, including a self-referential hreflang tag, so that you can adequately handle duplicate content. Identical pages in the same language but for different regions should also use hreflang tags to indicate regional targeting.

When you have done all that, your website will guide search engines to serve the most appropriate version based on the user’s location and help avoid potential penalties associated with duplicate content.

How to implement hreflang tags for multilingual websites: A step-by-step guide

The process of hreflang implementation can be broken down into several main steps.

1. Identify your language and region variants. Before anything else, you need to know your website’s current language and region versions. 

2. Decide on your implementation method. There are three ways to implement hreflang tags. You can do it through HTML link elements in the head section of your page, through HTTP headers for non-HTML files like PDFs, or within your XML sitemap.
   
3. Format your hreflang tags. Once you know the method, format your tags accordingly. An hreflang tag should include the rel, href, and hreflang attributes. The latter should consist of the correct language code and, if applicable, the region code.
   
4. Implement self-referential and reciprocal hreflang tags. Every single one of your pages needs to have a self-referencing hreflang tag. Reciprocal tags rely on mutual hreflang tag pointing between pages – for example, A has a tag pointing to B, and B has a tag pointing to A.
   
5. Don’t forget the x-default tag. Remember to use the fallback page tag for users whose language preferences do not match any of the available versions on your site.
   
6. Validate your implementation. Finally, go through a validation process to ensure all tags are working correctly. You can use tools like Google Search Console to check for any errors.
   

As your website evolves and you add more supported languages, you will need to continually update your hreflang tags to make sure that the stable state of your website within search rankings is not affected. This ongoing commitment is all for the sake of avoiding common mistakes and maximizing your site’s potential in multilingual SEO.

Implementation methods of hreflang tags

Depending on your choice of implementation method, your approach will vary. Be it through HTML hreflang link elements, an HTTP header, or an XML sitemap, your tag implementation should apply to all website pages.

Let’s delve into each method for implementing hreflang tags.

HTML

This strategy requires you to add HTML attributes to the <head> section of every page. 

HTML stands for HyperText Markup Language – the standard markup language for creating web pages and web applications. It’s used for all kinds of content, including images, text, and interactive forms.

Generally, this method becomes rather time-consuming whenever you need to add alternate pages because you have to go back and check if you have missed adding the appropriate tag to each one. In some cases, when you consider each HTML attribute and any other implementations you may have done, the page load time could also be affected.

Here is what the syntax looks like when implementing a tag in a page’s HTML code:

<link rel=”alternate” href=”lang_page_link” hreflang=”language_code” />

Here is a practical example of an HTML hreflang implementation with a page in Mexican Spanish:

<link rel=”alternate” href=”www.example.com/es-mx” hreflang=”es-mx” />

If you have many entries to tag, you may wish to indicate each alternate page in your sitemap. Otherwise, to hasten the process with multiple HTML documents, you can use Aleyda Solis’ hreflang generator tool by inputting the URLs of the pages required and having the tool generate a list you can just copy-paste into each page’s <head> section.

HTTP

Hreflang HTTP headers are quite useful when implementing an hreflang attribute in a non-HTML website.

HTTP stands for HyperText Transfer Protocol. It’s the protocol for transmitting hypertext (the links leading to online web pages) requests and information between servers and browsers in web communications.

HTTP header codes transfer data between a server and a client, meaning the code contains the required information.

Here’s an example of how the format of the header in HTTP would look like:

Link: <url_1>; rel=”alternate”; hreflang=”language_code_1″, 

<url_2>; rel=”alternate”; hreflang=”language_code_2″, …

Now, the syntax introduces an additional element: <url_x>, where you have inside < and > the full URL address of the alternate page you add. 

Let’s look at a more specific example, where we can see three versions of a web page – one for English speakers, one for Spanish speakers in Mexico, and one for all other Spanish speakers.

Link: <https://example.com/file.pdf>; rel=”alternate”; hreflang=”en”,

      <https://example.com/es-mx/file.pdf>; rel=”alternate”; hreflang=”es-mx”,

      <https://es.example.com/es/file.pdf>; rel=”alternate”; hreflang=”es”

This method actually works also for content relying on HTML tags. HTTP headers do add an extra burden when the two are combined, though. 

Here is an example of how HTTP headers can be used for HTML content:

<link rel=”alternate” href=”https://example.com/” hreflang=”en” />

<link rel=”alternate” href=”https://example.com/en-ca” hreflang=”en-ca” />

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

There are generators like the one of Aleyda Solis, which give you the chance to avoid entering the data manually. You can also use integrations and plugins, depending on the ecommerce platform you are on.

XML

Finally, we have perhaps the most efficient method – an XML sitemap. 

In its essence, an XML sitemap is a document that helps search engines better understand your website while crawling it by fetching this document to them. It contains the URL’s of all the pages and a portion of metadata on them.

With an XML sitemap, you can make all the changes in one place, no matter how many hreflang attributes you edit. This removes the need to edit multiple HTML documents or HTTP files every time you get a translation of one of your pages.

Your XML sitemap begins by adding an <loc> element for each URL and <xhtml:link:> for every language and region code. If you have three versions of a page, the sitemap will contain three entries, each with three identical listings.

Here’s how the whole thing would look with English, Mexican Spanish, and Spanish,as well as a fallback page:

<url>

<loc>https://https://example.com</loc>

<xhtml:link rel=”alternate” hreflang=”en” 

href=”https://https://example.com” />

<xhtml:link rel=”alternate” hreflang=”es-mx” 

href=”https://example.com/es-mx/” />

<xhtml:link rel=”alternate” hreflang=”es” 

href=”https://example.com/es/” />

</url>

<url>

<loc>https://example.com/es/</loc>

<xhtml:link rel=”alternate” hreflang=”en” 

href=”https://https://example.com” />

<xhtml:link rel=”alternate” hreflang=”es-mx” 

href=”https://example.com/es-mx/” />

<xhtml:link rel=”alternate” hreflang=”es” 

href=”https://example.com/es/” />

</url>

<url>

<loc>https://example.com/pt/</loc>

<xhtml:link rel=”alternate” hreflang=”en” 

href=”https://https://example.com” />

<xhtml:link rel=”alternate” hreflang=”es-mx” 

href=”https://example.com/es-mx/” />

<xhtml:link rel=”alternate” hreflang=”es” 

href=”https://example.com/es/” />

<xhtml:link rel=”alternate” hreflang=”x-default”  

href=”https://example.com/page-default/” />

</url>

</urlset>

At first look, this looks like the most complex and least efficient method. You would be half right in thinking that.

While XML sitemaps can look daunting, they are the most well-organized way of creating hreflang tags because everything is in a single file. 

Of course, you may as well utilize the Aleyda Solis generator for a faster generation of your particular sitemap since there is no need to do it manually if you have a plethora of pages that require an hreflang link implementation.

Hreflang tags and Google’s language detection

Google’s crawlers are sophisticated and can detect the language of a web page with a very high degree of accuracy. 

However, language detection alone is not foolproof, as there can be certain ambiguities, especially with languages that share the same base structure but vary significantly because of regional dialects. That’s why regional targeting must be considered an entirely separate aspect of hreflang tag implementation.

Choosing the proper hreflang link attribute whenever you implement a tag can provide explicit information for Google and other search engines about the language and region of your web pages. When there are no errors in this setup, the user experience and likelihood of engagement, and, consequently, conversions, jumps up as well.

To that end, hreflang annotations help you avoid potential confusion caused by automatic language detection. Through them, you feed the algorithm clear and direct information about your pages’ targeted languages and regions.

Hreflang tags for language variants

Things become a little tricky when it comes to hreflang tags for language variants because their goal is to solve the issues caused by having users who speak the same language but come from different regions.

When you have targeted parts of your website to a US audience and other parts to a UK audience, you would have to use hreflang tags. Even if the language on those pages is identical, that way, you ensure users are provided with the correct website version by the search engine.

In other words, when there are differences in language and/or content, you are to utilize hreflang tags for the respective language and regional variants. Should there be no differences in both language and content between regions sharing the same language, you don’t need to create separate language versions.

Using hreflang tags for geotargeting

Geographical targeting of users through hreflang tags helps search engines use the geographic location of the user’s device in order to determine what language to display your website in.

This practice encompasses the delivery of content, as well as advertisements, based on consumers’ location.

Signaling to search engines which version your website can use is the country code – that’s why you should use them in your hreflang attribute. For instance, the English version of your website that targets users in the UK would use en-gb, while the French version will use for target users in France would be fr-fr.

Even if you have sorted that part, you should still keep in mind that your site’s ranking in search results relies on more than just hreflang tags. Nevertheless, crawlers can better provide relevant content to your target audience by delivering the most appropriate version of your site to users in various locations.

Testing and validating hreflang tags: best practices for ensuring proper implementation

Last step – testing and verification. When everything is said and done, you must ensure that it all functions correctly. By doing so, you can catch any potential errors and technical issues that could impact your multilingual SEO.

A simple and easy way to perform this step is to use a well-known tool like the ones offered by SEMrush, Ahrefs, or Screaming Frog. They can perform reports that provide information on hreflang errors on your site, such as missing return links, incorrect language or country/region codes, and hreflang tags on pages with no alternate language versions. 

We’ll take the chance and again emphasize the importance of having self-referential hreflang tags. If you’ve skipped the previous sections, re-read them to learn more about this type of tags, as they are especially important.

Smaller websites that would perform quick checks can also utilize free online tools to scan a single URL for errors quickly.

Regardless of the method you choose, you will need to do hreflang tag checks regularly, as testing and validating only once during the lifetime of your website will not suffice to keep it optimized at all times.

Common hreflang tag mistakes to avoid

During the hreflang tag implementation process, common mistakes could hinder your multilingual SEO’s effectiveness. 

Here are some of the common pitfalls you should avoid to ensure your hreflang tags are working as intended:

• Not including a self-referential tag. If you haven’t taken notice of this already, now is the time. Each version of your page should include an hreflang tag pointing to itself, along with tags pointing to all the other language versions.

• Wrong language or region codes. Before inputting what you think may be the correct code for a language or a country, check the ISO 639-1 and ISO 3166-1 Alpha 2 formats. You wouldn’t want to make rookie mistakes like using en-uk instead of en-gb.

• Inaccessible pages. This one is more aimed toward those using robots.txt or noindex tags to block page access. Despite all hreflang tags being correctly set up, if search engines cannot crawl a page, they cannot discover those tags.

• Non-existent language versions. When you input a certain hreflang attribute to point to a certain language version, you should still have one. Say your Mexican Spanish pages actually turn out to be Spanish pages – now that would be a bit embarrassing.
  
• Missing x-default tag. Without this tag, your website does not have the capability to lean on a fallback page in situations where the language versions available do not match the language detected in the user’s preferences.
  

Needless to say, other mistakes could occur if you are not careful (and we include typos in that category!), but as long as you give yourself enough time to go through the whole process of hreflang tag implementation, you should be able to complete it in one piece.