Hreflang Tags: What They Are and When to Use Them

Global websites often have content in multiple languages or that is tailored to specific regional markets. When those web pages are discovered in Google, how does Google know to show searchers the content that was tailored just for them? The answer is hreflang tags.

Adding hreflang tags is a powerful international SEO strategy. It helps crawlers understand your multiple web pages and promote them accordingly. If your website wants to go international, adding hreflang tags is a really powerful way to improve conversion rates for the global visitors you earn from organic search.

Here is a complete guide on how to add hreflang tags to your pages. Also, we will detail the many benefits of this powerful technical optimization.

Hreflang Basics

For global brands, creating a multilingual site is a powerful digital strategy. For example, this website communicates to users whose IP addresses are not aligned with the regional page that there is a better version of the page for them to view.

What Are Hreflang Tags?

Hreflang tags are snippets of code that communicate to web crawlers web pages that have similar content but are tailored to different languages or regions. In HTML, the hreflang tag looks like this:

Basically, this code tells search engine crawlers that this is the English version of the page. Therefore, it should be shown to searchers in the United States.

Alternatively, the below hreflang tag tells search engine crawlers that this web page, although also in English, should be shown to searchers located in Hong Kong.

Hreflang can communicate both the same content in the different languages or the same content, but targeted at different countries. This method ensures that someone in the United States will be directed to the English version of a page. Also, someone in a different region will find the same exact content in their preferred language through an alternative URL.

Hreflang is considered an advanced meta tag, It requires some more complex work on the backend of your website. However, these tags can be very powerful for any website that wants to expand their global reach or market share.

How does hreflang work?

First, Google will determine if it wants to rank the URL you have presented to it. Next, search bots or crawlers will check for any present hreflang annotations associated with that specific URL.

Then, Google will show searchers the variant of the URL that contains the right content for their language and geographic region. The searchers’ current location and the language settings they have specified on their devices are all taken into account.

These elements are then used to ensure the correct version of your site is presented to the right audience in the right language. If there is no specified language-country data in the searcher’s browser settings, Google will default to the version of the page that is specified as the “x-default.” 

Do I need hreflang tags on my website?

If you already have content in multiple languages on your website, then hreflang tags are essential to your SEO strategy.

If you are thinking about implementing an international SEO strategy, creating that content is the first step. This is far more time and resource intensive than the hreflang implementation. But once that content is live on your site, you’ll be ready to move forward with adding hreflang tags.

To run a successful international SEO campaign, you need to ensure that browsers are displaying the right content to the right audience. If not, the amount of users who exit your site after visiting the homepage will increase. 

Searchers in the United States are not very likely to stay and toggle language translation options on your homepage if it is written in another language. This is because there are billions of other sites to choose from that have already catered to them through the use of hreflang tags.

SEO Benefits of Hreflang Tags

Hreflang is an integral part of SEO for a website that hosts content aimed at different countries. As mentioned above, language codes can help search engines distinguish duplicate content that is actually written in a different language or geared towards different regions.

Some of the SEO benefits of hreflang include the following: 

• Improved rankings for pages that are optimized for specific regions or languages
• Protects your site from duplicate content issues
• Decreased bounce rate (i.e. searchers are more likely to find your page relevant if it is tailored to them)
• Better user experience for your global audience
• Improved conversion rates and lead generation

How is Hreflang Different from Rel Canonical?

If you are familiar with rel canonical tags, hreflang may sound similar.

Rel canonicals tell Google to index a specific page and ignore others that are similar. They are particularly useful for websites that have multiple pages with similar content (like ecommerce sites with multiple product pages).

Rel canonical tags ensure that the master page is always promoted in search results, regardless of the searcher.

So how is hreflang different? 

Well, hreflang tells Google to index the page and all of the other similar pages with language variations. It then asks Google to promote those pages based on key information about the user including language preference and geographic location.

Your language variation pages each need to have their own self referencing canonical. If any of the canonical tags on your foreign or regional pages point to the “x-default” or some other url, those tags will actually work against each other. Working with skilled web developers who are familiar with technical SEO can prevent you from using these advanced tags incorrectly.

How to Implement Hreflang Tags on Your Website

Once you have your different web page variations created and published on your website, you can use hreflang to make sure Google promotes the right versions of the page to the right international searchers.

There are two ways to add hreflang tags. You can add tags to each individual variation of the page, or you can add hreflang tags via your sitemap.

Adding Hreflang to individual pages

The first step is to write your hreflang tags in a text editor. And make sure you do so properly! Each hreflang tag needs to have a specific HTML language and country code, so make sure to confirm the accuracy of your language and regional attributes.

You can also use a hreflang tag generator tool. Here’s one from Geotargetly you can try.   

Then, follow these three steps.

1. Specify which version of the page will be the default. Google crawlers will show the default page when they can’t determine language or region.
2. Add all of your hreflang links to the <head> section of your default url. You need to include return links for all of the language variations of the page (which will look like the image below).
3. Add the same hreflang link elements to the <head> section of each page that you consider a language or regional variation of the default page. These are called reciprocal hreflangs.
4. Double check that any rel canonicals on those web pages are self-referencing so Google doesn’t ignore your hreflang tags

Adding hreflang tags to your sitemap

If you only have a few language variations, you can add your hreflang tags to your sitemap. Warning: If you have hundreds of page variations, this can take quite a bit of time. 

However, adding hreflangs to your sitemap reduces the page load by not having all that additional data in your header. A step-by-step for adding hreflang to your sitemaps is as follows:

1. Designate the language variations below the default url in your sitemap using the xhtml:link attribute. Your sitemap will look like the image below.
   
   
2. All of the alternative urls that you specify with the xhtml:link attribute also need to be added to your sitemap.

Common Mistakes With Hreflang Implementation

Because hreflangs require quite a bit of HTML work, it’s easy to make mistakes. Beginners to the process should make sure they do their homework before adding metadata for SEO purposes. 

Here are some of the more common mistakes that webmasters make in their implementations. 

1. Invalid attributes. The attribute’s value must be combined with the region and language through a two-letter code. There are multiple country and language codes, so make sure you have the right hreflang codes in your tags.
2. Improper use of rel canonicals: Many site owners use rel canonical tags incorrectly on pages where they have hreflangs. Remember that the rel canonical tag tells Google to ignore all the language variations, and as a result, Google doesn’t know what to do. When you use rel canonical incorrectly, Google will just choose whatever variation it thinks is best to show searchers
3. Not using reciprocal herflangs (or return links): Each language or regional url needs to have return links back to every other language or regional url. Any site owner that tries to get around this will ultimately implement hreflang incorrectly and not see the desired results. 
4. Slowing down server requests: This post only breaks down adding hreflang via header tags and sitemaps, but you can also add hreflang via http headers for non-HTML content. This can end up adding a lot of overhead to every request, slowing down the web page load times.
5. Not consulting professionals: The best practice for implementing hreflang into your website is to consult with professionals and use expert tools for site optimization.

The Value of Hreflang and International SEO

International SEO can take a lot of time and consume a lot of resources. Nevertheless, the payoff is well worth it.

The primary goal behind optimization as a whole is to provide internet users with the best information possible. Providing tailored content for language preferences and regional areas shows your a webmaster that thinks about the user’s experience.

Google’s primary goal is also making search better for users. If you implement hreflang correctly, Google will ultimately reward you by promoting your pages more often to the right audience.