$2,000 Free Audit

blog

Hreflang Tags: The Technical Guide to Global SEO

Don't alienate yourself from Hreflang Tags. Understand how search engines work in this Hreflang guide so you can survive in the SEO galaxy.

Hreflang tags are a must for any global business operating in multiple languages or across different regions. 

Nail your hreflang attributes, and your website will be more relevant to your target audience and rank higher in search. However, this tag is also one of the most challenging for business owners to lock down because, as John Mueller from Google puts it, hreflang gets “really hard quickly”.

In this blog, we'll take you through:

 

What are hreflang tags for?

Hreflang tags are added in a website’s code to indicate what language the content is in and which geographical location it’s intended for. Adding the rel="alternate" hreflang="x" attribute tells Google which version of your website to display to audiences, based on their location and browser language.

Let’s say you’re running an eCommerce website. You sell to the US and Mexico and in order to cater to both markets, you’ve created two versions of your website: one in English and one in Spanish. In this case, the hreflang attribute identifies and tells Google which version of your site to include in SERPs for customers in Mexico and which version is the correct version for customers in the US.

For example, if you’re Adidas and you have hreflang tags implemented on your website, this version of your website would show up in search results from the US:

And this version would show up for searchers located in Mexico:

 

It’s not just for multiple languages either. Hreflang tags can also be used to distinguish different versions of your website in the same language. 

For example, if you have customers in both the United Kingdom and United States, you might need separate English language content for British and American spellings or currencies. With hreflang, you can tell Google to send British searchers to the British version of your site and Canadians to the North American version, and so on.

 

Why does hreflang matter for SEO?

Hreflang annotations matter for international SEO because they help you provide the most relevant content possible to an audience, based on their geographical targeting and their language. And if there’s one thing Google loves, it’s relevancy.

In particular, the hreflang attribute helps with three things.

1. The hreflang attribute helps search engines show the most appropriate content

Hreflang tags help ensure that a search result is delivered in the native or preferred language for a region. It also signals to Google how highly it should rank different versions of your page in search results.

While it IS technically possible for search engines to figure this out on their own, the hreflang attribute is like an extra safety measure to ensure that it serves up the right result for users every time and doesn’t get different versions confused (like the British or American versions of your site).

In fact, Google has explicitly stated in Search Central that you should tell it about different versions of your website using hreflang tags:

If you have multiple versions of a page for different languages or regions, tell Google about these different variations. Doing so will help Google Search point users to the most appropriate version of your page by language or region.

Note that even without taking action, Google might still find alternate language versions of your page, but it is usually best for you to explicitly indicate your language- or region-specific pages.

2. The hreflang attribute can improve the user experience

Content that’s created specifically for a local audience in their native language will, more often than not, resonate far better than content that’s more generic. And when content clicks with its audience, it leads to higher dwell times, longer time spent on your page, and lower bounce rates — all of which are positive ranking signals to Google.

Another benefit? In a hreflang Q&A, Google’s Webmaster Trends Analyst Gary Illyes said that hreflang tags can have a direct effect on rankings, as pages within a hreflang cluster share ranking signals.

3. Having a hreflang attribute can prevent duplicate content

Google hates duplicate content and does everything possible to discourage websites from copying content. Having duplicate content or pages on your website often leads to swift and harsh action from the search engine, ranging from getting demoted in search results to being removed altogether.

This becomes particularly challenging when you have different versions of your website, particularly when they’re in the same language. While the currency, prices and language used on your site might vary, the bulk of your content is likely to be the same. The hreflang attribute tells Google that your content is similar, but has been deliberately optimized to be more relevant to different audiences. Without these tags, Google might see your web pages as duplicates and penalize your site as a result. 

 

Should you use hreflang?

Absolutely. Hreflang tags are a must if your website falls into one of these two categories:

  • You have a different language version of your website

  • Your website content is in the same language but you have localized variations for geographical regions

In these two instances, hreflang tags can provide a ton of benefit, both for users and search engines. However, you need to ensure that it’s implemented correctly to avoid any issues with your pages being crawled or indexed.

John Mueller from Google has also made a point of telling website owners not to go too far in the other direction and create countless variations of a website. The key with hreflang is to focus on multi-language pages that truly add value to users and help them solve their problems:

“It’s easy to dig into endless pits of complexity with hreflang. “Let’s create all languages! Let’s make pages for all countries! What if someone in Japan wants to read it in Swahili? Let’s make even more pages!” My guess is most of these “pages created because you can” get very little traffic, add very little value, and they add a significant overhead (crawling, indexing, canonicalization, ranking, maintenance, hreflang, structured data, etc.).

My recommendation would be first to limit the number of pages you create to those that are absolutely critical & valuable — maybe that already cuts the pages you’re thinking about. Think big here; if you’re talking about individual pages within a medium-sized site, it’s probably a non-issue. On the other hand, if you’re considering copying your whole site into 20 languages x 10 countries, that’s something else.”

A final word of advice: hreflang shouldn’t be the ONLY attribute you use to denote different versions of your website. Some search engines, like Bing, don’t support the hreflang attribute, and instead rely on content language meta tags.

 

The anatomy of the hreflang attribute

Before you start implementing hreflang tags on your website, you need to wrap your head around what each part means.

Here’s an example of a HTML link element with the hreflang attribute:

<link rel="alternate" href="https://www.example.com/us" hreflang=”language code”/>

Let’s break down what each part of that code means:

  • rel=“alternate”: This tells search engines that the link included in this tag is an alternate version of the page. 

  • href="https://www.example.com/": This tells Google where the alternate page can be found.

  • hreflang=“x”: This part specifies the particular language and country code of the page. 

 

How to construct a hreflang tag

Constructing a hreflang tag is a fairly straightforward process. All you need to do is look up your language and country code, then add these to your hreflang tag.

To find your language code, navigate to the ISO 639-1 list and look for your language’s two-letter code. For example, it might be en for English or zh for Chinese. Once you have this, add it into your hreflang tag, along with the URL for that variation:

<link rel="alternate" href="https://www.example.com/zh" hreflang=”zh”/>

If you’re using the same language but localizing your website for different geographical locations, you can do a similar process but by adding the two-letter ISO 3166-1 Alpha 2 country code after the language code. 

For example, pages with the hreflang=”en-us” tag tell Google that these pages are the American English version of the site:

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

Whereas as the hreflang=”en-gb” tag tells Google that these pages are the British English version:

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

On top of language codes, Google also recommends using the hreflang=”x-default” value. This specifies the default page that should be shown to users if none of the variations are suitable, such as if a French-speaking person visits your website but you only have an English and Italian version available.

 

How to implement hreflang on your website

According to Google Search Central, there are three ways you can implement the hreflang attribute:

  1. Add HTML hreflang link elements

  2. Implementing hreflang HTTP headers

  3. Adding hreflang to your XML sitemap markup

Below, you’ll find a step-by-step guide for each hreflang implementation method.

Adding hreflang annotations in your website HTML

This one is the easiest and most straightforward. All you need to do here is add your hreflang tags into the <head> section of your web page HTML. This tells Google to return the most relevant result for a user based on their browser settings and location. For each variation, you need to include a set of <link> elements in the <head> element as well as one for the default option. 

Let’s say you have three variations of a page on your website:

  • Original page: https://en.example.com/page.html

  • British English version with pricing in pounds sterling: https://en-gb.example.com/page.html

  • American English version with pricing in USD: https://en-us.example.com/page.html

  • German version with pricing in Euro: https://de.example.com/page.html

In this case, you would want to include the following hreflang codes in the <head> section to denote all the different alternate page variations, along with the fallback “x-default” option:

<head>

 <title>Hello world!</title>

  <link rel="alternate" hreflang="en-gb"

       href="https://en-gb.example.com/page.html" />

  <link rel="alternate" hreflang="en-us"

       href="https://en-us.example.com/page.html" />

  <link rel="alternate" hreflang="de"

href="https://de.example.com/page.html" />

 <link rel="alternate" hreflang="x-default"

       href="https://www.example.com/page.html/" />

</head>

This version is the most straightforward, but it’s also the most time-consuming — both from a coding perspective and a loading perspective. 

Here's why. If you service 10 different countries and have 10 different versions of your website available, you would need to add 10 different link elements to your HTML. On top of this, every time a user navigates to your page, the browser would have to load these parts of code, even though only one of these elements is relevant to the user. Given that loading speeds are a pretty important ranking factor, this option isn’t the best way to go if you have more than a couple of versions on your website.

Implementing hreflang HTTP headers

Link elements work well for HTML pages. For other types of content like PDFs? Not so much. That’s where HTTP headers come in.

Unlike HTML tags, HTTP headers can be used to denote different versions of PDF files and other non-HTML files. In this case, you need to use the HTTP header to indicate different versions in the following format:

Link: <url1>; rel="alternate"; hreflang="lang_code_1", <url2>; rel="alternate"; hreflang="lang_code_2", ...

Here’s an example. 

Let’s say you have different versions of a white paper for English speakers, one for Spanish speakers, and one for Mandarin Chinese speakers. Your HTTP headers would look like so:

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

However, like the link elements in your <head> section, these HTTP headers can drag out loading times.

Adding hreflang to XML sitemaps

Last but not least, you can implement hreflag in your XML sitemap. This won’t affect your load times at all and you won't have to edit multiple HTML documents; however, it’s also the most complicated of the three to implement.

With XML sitemap markups, you simply tell Google all of the language and region variants for each URL using a <loc> element for each URL, along with an <xhtml:link> listing for every variant of your page. 

In the sitemap, it looks like this:

<url>

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

  <xhtml:link 

rel="alternate" 

hreflang="en" 

href="https://www.example.com/" /> 

  <xhtml:link 

rel="alternate" 

hreflang="en-us" 

href="https://www.example.com/us/" /> 

  <xhtml:link 

rel="alternate" 

hreflang="en-gb" 

href="https://www.example.com/uk/" />

</url>

 

How to find and fix hreflang issues

Remember what we touched on earlier? Hreflang tags are incredibly beneficial, but you need to implement hreflang attributes properly if you want to see the benefits for your users and rankings. Here are X of the most common mistakes that websites make, as well as tips to fix them.

​​Why are search engines ignoring my hreflang attribute?

Search engines like Google will ignore any invalid hreflang tags, such as those with typos or that aren’t formatted correctly. Even if you’re diligent, small issues may pop up that could affect your SEO, so make sure to regularly audit your website for any issues with your hreflang tags.

Mistake #1: Forgetting to include a self-referencing hreflang link attribute

According to Google, each localized version of a web page should list itself as a hreflang attribute. For example, if you have a Spanish version of your website, your page should include a hreflang tag for itself along with the other versions of the page, such as English or French.

The best way to identify these is using a dedicated SEO tool, like Ahrefs Site Audit or Google Search Console, to find any missing tags.

Fix it: Once you’ve found the culprit, simply add a self-referencing hreflang tag either as a link element, HTTP header or in the XML sitemap.

#Mistake 2: Making a typo in the language or country code

According to an SEMrush survey, typos in the hreflang values are responsible for 15% of all hreflang implementation mistakes. This might be something as small as:

  • putting in the wrong country or language code (i.e. eng-gb or en-uk), which will result in Google registering it as an invalid language

  • only using the country code and not the language code (i.e. gb)

  • using underscores instead of dashes to separate language and country codes (i.e. en_gb)

  • putting the country code first instead of the language code first (i.e. gb-en instead of en-gb)

Fix it: Double check that all of your codes are correctly formatted, and that you are using ISO 639-1 for your language codes and ISO 3166-1 Alpha 2 for your country codes. 

#Mistake 3: Specifying more than one URL for a hreflang value

You should only have one localized version of each page with one URL linked to each hreflang value. However, some websites accidentally end up with multiple versions of a page for the same language or variation, which can cause local search engines to render your hreflang tags as invalid.

For example:

<link rel="alternate" href="https://www.example.com/zh" hreflang=”zh”/>

<link rel="alternate" href="https://www.example.com/china" hreflang=”zh”/>

Fix it: Keep the most relevant URL and remove the other annotation. 

#Mistake 4: Conflicting hreflang and canonical URLs

Rel=canonical tags tell a search engine that a website isn’t the authoritative version of the page, whereas the hreflang attribute tells it to show a localized version of the page. In the code, it might look like this:

<link rel="canonical" href="https://www.example.com/us">

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

These two tags are contradictory and will only serve to confuse search engines, not help them. 

Fix it: Either modify your hreflang tags to only point to canonical URLs, or remove the canonical tag in question.

 

Unlock global growth with international SEO

The hreflang attribute isn't as complex as it seems, provided you stay organized and regularly audit your website for any issues. However, these tags are just the first step in building your international online presence. You need to target the right keywords for each market and create relevant content for your target audience, not to mention ensuring that your technical SEO is rock-solid for every version of your website.

When it comes to international SEO, a helping hand can be the difference between global domination and disappearing off the face of search results altogether. That's why thousands of businesses around the world work with OMG to get the job done. With a seasoned team of gurus and a 4.9+/5 star rating on Google, we're here to help you climb search engine rankings and fuel explosive revenue growth. Claim your free digital marketing audit today to get started.

New Call-to-action

Let's increase your sales.

Claim your $2,000 Audit for FREE by telling us a little about yourself below. No obligations, no catches. Just real, revenue results.