All about hreflang: The key to effective SEO in multilingual websites

Developing a multilingual website can provide significant benefits, especially when targeting a global audience. However, simply localizing your web pages doesn't guarantee global success. The visibility of your multilingual website on the internet is also crucial. This is closely tied to SEO, and how search engines like Google understand and index multilingual websites. These elements can influence your website's traffic volume, which, in turn, significantly impacts its global success. This is where the hreflang tag steps in. In this blog post, we'll explain what hreflang is, why it's crucial, and offer practical advice on using hreflangs effectively to increase the visibility of your multilingual website on the web. Ready to dive in? Let's get started!

What is hreflang?

In 2011, Google introduced the 'hreflang' attribute in order to help search engines in identifying the connections between web pages in various languages. It serves as a hint to search engines, suggesting that other localized versions of a page are available and can be displayed. However, it's key to understand that hreflang is a suggestion, not an instruction. So, while it offers direction, the ranking of these pages is still significantly affected by other SEO factors.

The best way to understand hreflang is through a real-life example. Let's take a look at the Google search results for the 'Adidas website' when searched from the Netherlands and Sweden. People from these two countries will see different results, and among them, the localized version of the official Adidas homepage that best suits them. That's the magic of hreflang tags. You don't see them, but they really work.

Why is hreflang important?

The hreflang tag plays a crucial role in optimizing your multilingual website for search engines. It's important primarily for two reasons: signaling search engines about localized versions of a page and preventing duplicate content issues, both of which can significantly affect your website's SEO and ranking.

Let's start with the first point. Consider that you have a website with content in English, Spanish, and French. Without the hreflang tags, a search engine like Google would have difficulty determining which version of your content to display to a user in Spain, France, or the United States. By using the hreflang tags, you can specify the language and geographical target of a webpage, guiding search engines to display the most suitable version based on a user's location or language preference. This can result in a better user experience and higher engagement rates.

The second point is about preventing duplicate content issues. Search engines strive to provide unique, relevant content to their users. If you have the same content in different languages on different pages without properly using the hreflang tags, search engines might perceive these pages as duplicate content. This can harm your SEO as search engines may not know which version to rank for query results. The hreflang tags help search engines understand that these are not duplicate content, but rather the same content in different languages, ensuring all your localized pages are appropriately indexed.

Guidelines for setting hreflangs

There are three recognized methods for indicating different language or locale versions of a webpage to search engines: HTML tags, HTTP headers, and Sitemap files.

Each method serves the same purpose, so you can choose the one that best fits your website's needs. While it's possible to implement all three simultaneously, it's worth noting that this could make management more complex, without providing any extra advantages in search results.

No matter the method you opt for, there are certain universal guidelines to follow:

• Each language version must list itself along with all other language versions.

• Alternate URLs must be fully-qualified (a complete internet address that includes the protocol like http or https, domain name, and specific path to a web resource, if any).

• If two pages don't both point to each other, their tags will be disregarded to prevent external sites from naming themselves as an alternative version of your page.

• Consider setting up a default fallback page for any languages that aren't identified, using the 'x-default' value. This could be particularly useful if you're dealing with country-specific selectors or automatically redirecting homepages.

• If your website caters to region-specific languages (such as 'en-US', 'en-CA'), you might consider adding a generic URL for speakers of the same language from unspecified regions (like 'en'). Alternatively, you can assign this role to one of your region-specific pages.

• There may be situations when maintaining bidirectional links for every language becomes daunting. In these cases, leaving out some is permissible, and search engines will still analyze the remaining mutual links. However, it's more valuable to form bidirectional links from new language pages to the original or more dominant languages, rather than linking country-specific pages amongst themselves.

Hreflang in HTML tags

To incorporate hreflang into HTML, you need to use the <link> element in the <head> section of your web page's HTML. The rel="alternate" attribute signifies that an alternative version of the document exists, while the hreflang="language_code" attribute specifies the language of the alternative version.

Here's a simple example:

<html>
<head>
  <link rel="alternate" hreflang="en" href="https://example.com/" />
  <link rel="alternate" hreflang="es" href="https://example.com/es" />
  <link rel="alternate" hreflang="es-ES" href="https://example.com/es-es" />
  <link rel="alternate" hreflang="es-MX" href="https://example.com/es-mx" />
  <link rel="alternate" hreflang="x-default" href="https://example.com/" />
</head>
<body>
  <!-- Your page content goes here -->
</body>
</html>

In this example, there are several hreflang configurations. The first hreflang indicates that the page on the address https://example.com/ is in English. The next three hreflangs signal that there are Spanish variants of the page. One for Spain (es-ES), one for Mexico (es-MX), and a generic Spanish (es) version for Spanish speakers from non-specified countries. Finally, the 'x-default' hreflang, which points to the same page as the English hreflang, suggests that this page can be used for all languages not specified above.

Hreflang in HTTP headers

HTTP headers offer an alternative method to implement hreflangs, which is particularly useful for non-HTML files such as PDFs.

Here's how you could match the previous example using HTTP headers:

Link: <https://example.com/>; rel="alternate"; hreflang="en",
<https://example.com/es>; rel="alternate"; hreflang="es",
<https://example.com/es-es>; rel="alternate"; hreflang="es-ES",
<https://example.com/es-mx>; rel="alternate"; hreflang="es-MX",
<https://example.com/>; rel="alternate"; hreflang="x-default"

Hreflang in Sitemap files

Using hreflang in sitemap files is another viable method. This approach can be particularly advantageous for larger websites with numerous pages because it avoids cluttering your HTML code with multiple hreflang tags.

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
  xmlns:xhtml="http://www.w3.org/1999/xhtml">
  <url>
    <loc>https://example.com/</loc>
    <xhtml:link rel="alternate" hreflang="en" href="https://example.com/" />
    <xhtml:link rel="alternate" hreflang="es" href="https://example.com/es" />
    <xhtml:link rel="alternate" hreflang="es-ES" href="https://example.com/es-es" />
    <xhtml:link rel="alternate" hreflang="es-MX" href="https://example.com/es-mx" />
    <xhtml:link rel="alternate" hreflang="x-default" href="https://example.com/" />
  </url>

  <url>
    <loc>https://example.com/es</loc>
    <xhtml:link rel="alternate" hreflang="en" href="https://example.com/" />
    <xhtml:link rel="alternate" hreflang="es" href="https://example.com/es" />
    <xhtml:link rel="alternate" hreflang="es-ES" href="https://example.com/es-es" />
    <xhtml:link rel="alternate" hreflang="es-MX" href="https://example.com/es-mx" />
    <xhtml:link rel="alternate" hreflang="x-default" href="https://example.com/" />
  </url>

  <url>
    <loc>https://example.com/es-es</loc>
    <xhtml:link rel="alternate" hreflang="en" href="https://example.com/" />
    <xhtml:link rel="alternate" hreflang="es" href="https://example.com/es" />
    <xhtml:link rel="alternate" hreflang="es-ES" href="https://example.com/es-es" />
    <xhtml:link rel="alternate" hreflang="es-MX" href="https://example.com/es-mx" />
    <xhtml:link rel="alternate" hreflang="x-default" href="https://example.com/" />
  </url>

  <url>
    <loc>https://example.com/es-mx</loc>
    <xhtml:link rel="alternate" hreflang="en" href="https://example.com/" />
    <xhtml:link rel="alternate" hreflang="es" href="https://example.com/es" />
    <xhtml:link rel="alternate" hreflang="es-ES" href="https://example.com/es-es" />
    <xhtml:link rel="alternate" hreflang="es-MX" href="https://example.com/es-mx" />
    <xhtml:link rel="alternate" hreflang="x-default" href="https://example.com/" />
  </url>
</urlset>

In this example, you can see how we've applied all of the above guidelines. Each page variation is listed alongside the other language variations, using fully-qualified alternate URLs. There's a universal Spanish version for speakers from regions not specified, and an 'x-default' fallback page for any languages not detailed.

Supported language and region codes in hreflang tags

The hreflang value is usually composed of one or two elements, divided by a dash. The primary element is the language code (ISO 639-1). There may also be an optional second element representing the country code (ISO 3166-1 Alpha-2). It's worth mentioning that an optional script code can also be included, but is rarely used. Examples of both valid and invalid hreflang values can be found below.

✔️   en – English

✔️   fr-FR – French in France

✔️   sr-Cyrl – Serbian (Cyrillic)

✔️   zh-Hans-CN – Simplified Chinese in China

❌   English – Invalid language code

❌   cn – Invalid language code

❌   zh-NN – Invalid country code

❌   zh-Simp – Invalid script code

Troubleshooting hreflang tags: Dealing with common issues

Troubleshooting hreflangs is an important step to ensure that your configuration is set up correctly. One common issue is the missing reciprocal hreflang, where one page points to another but the second doesn't point back. Incorrect language codes can also cause confusion. To mitigate these issues, it's advised to thoroughly check and validate hreflang implementation prior to deploying to production. Using tools specifically designed for generating and debugging hreflangs can save you a lot of time and effort while ensuring accuracy.

Additional tips for effective SEO in multilingual websites

In this section, we'll show you some extra strategies that can improve search engine optimization for multi-language websites:

• International SEO is a potent strategy to expand your global business since there is a scarcity of content in languages other than English, despite the majority of people not speaking English. Tap into this opportunity to reach a wider audience.

• Consider adapting (localizing) the URLs of your localized pages to target specific regions or languages better. This can help optimize your SEO efforts by aligning with relevant keywords, resulting in increased traffic.

• Set up hreflangs to aid search engines like Google in understanding, indexing, and ranking your multilingual website. Hreflangs ensure that search engines recognize localized pages, eliminate duplicate content concerns, and enhance the visibility of your website in different languages. Note that hreflangs are not necessary if your website is not multilingual.

• Country-specific domains like .io, .me, .de, .fr can work harmoniously with hreflangs, further boosting your website's SEO performance.

• It is best practice to have a fallback or default option, even for unsupported languages. You can use the 'x-default' attribute value or provide a general language option when targeting country-specific languages. This ensures a seamless user experience and avoids potential pitfalls in SEO.

Conclusion

The hreflang is an essential tool for effective SEO in multilingual websites. It aids search engines in understanding your site's structure, ensuring that the correct language version is displayed and eliminating duplicate content issues. Using hreflang alongside other SEO strategies can greatly enhance your site's performance, increase user engagement, and help you reach a broader audience.

As illustrated in this article, implementing hreflang on your multilingual website is fairly straightforward. It's a 'set it and forget it' system unless new languages are introduced. Conversely, website localization is an ongoing task and can pose some difficulties. To assist with this, many helpful tools have been developed, such as Localizely. You can try Localizely for free to see how it can streamline your workflow, foster better team collaboration, and much more.