SHARE

Hreflang Guide

What is hreflang?

The hreflang tag is an HTML tag put on a page that tells Google what language the content of that page is being served in. By specifying the page’s language via hreflang, Google knows what language version of the page they should display to users. Proper use of hreflang is incredibly important for international websites and businesses, as well as websites that have users from multiple languages visiting the site.
Not only can you use hreflang to specify the language of the page, but you can also use it to tell Google the region you are targeting with a specific version of a page. For example, if you are targeting Spanish speakers in the U.S, you should make sure the hreflang tag specifies that the language is Spanish but that the region is still the U.S.

Why is hreflang important for SEO?

Hreflang is important because it allows websites to serve their content to users in the correct language and region. Without hreflang, even if you have several versions of your website in different languages Google may not know which version of the page to display. Google might even see these pages as examples of duplicate content, which can hurt keyword rankings and your website’s crawlability.
Hreflang is also important for international SEO. Keyword rankings can differ dramatically in different countries, so you cannot expect to rank well in other countries simply by optimizing for your home country. Once you have translated your content, updated your title tags/meta descriptions/etc you will also need to add the hreflang tag to let Google know that this is the version of the page you want to rank in certain regions. This will help your keyword rankings in other languages and countries.
seo
Proper use of the hreflang tag is essential for international SEO.

What is the hreflang tag and how do I use it?

The actual HTML tag looks like this:

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

Let’s break this down into each part.

rel=”alternate” is a part of every hreflang tag. It simply tells Google that there are alternate language versions of the page.

href=”https://www.example.com” is where you would put the URL of the page you are referencing with this hreflang tag. So, if the page you are adding this tag to is the English version of the page, make sure the URL you put here is for the English version of the page.

hreflang=”en-us” is where you specify the language and region of the URL you put in the preceding ‘href’ tag. Note that specifying regions is optional; you are only required to include the language code. If you are going to include both language and region, they must be placed in that order (language-region).

Now that we know how to put the hreflang tag together, we need to discuss proper implementation. It is absolutely essential that you remember the next piece of information:

Every page with alternate language versions needs to include hreflang tags referencing both itself and every other version of the page.

Let’s walk through an example of this. Imagine I have a website that serves content in four different languages. English, Spanish, Chinese, and Japanese. On all four of these pages, I would need to include the following hreflang tags.

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

If even one of these pages is missing one of these tags, it can confuse Google and cause the crawlbots to ignore your other directives. Make sure every page references every other version, including itself!

What are the hreflang language and region codes?

You can find a complete list of language codes here, and region codes here. Double-check your codes before implementing! When it comes to troubleshooting hreflang, incorrect language codes are one of the most common mistakes. Hint: ‘eu’ is not the region code for the European Union (there is no code for the EU!).
iso
Hreflang uses the ISO system for both country and language codes.

What is “x-default hreflang”?

The x-default hreflang tag tells Google that this version of the page is the ‘default’ version of the page; it isn’t targeting a specific language or region. Google will know to display this page when no other version of the page makes sense for a particular user.
A common example of when you would use this is if your site’s homepage allows users to select what language/region version of the site they want. That homepage would use the x-default tag. As always, every version of the page needs to include the x-default hreflang tag.

The tag looks like this:

<link rel="alternate" href="https://www.example.com" hreflang="x-default" />

How do canonical tags work with hreflang?

When selecting your canonical URL for pages with multiple language versions (implemented via the rel=canonical tag; check out our guide on canonicalization here) it is best practice to have the canonical by self-referential, meaning the canonical URL should point to itself. For example, the Spanish version of a page should have a canonical tag pointing to the Spanish URL, NOT the English URL.

How do I implement hreflang?

There are three major ways of implementing hreflang on your site. I personally recommend adding them via XML sitemaps (option 2), but there are pros and cons to each.
  1. <head>: You can put the hreflang tags directly in the <head> of a page. Under this method, you would add tags just like the ones in the above examples on each page.
  2. XML Sitemap: You can add hreflang tags directly to your XML sitemap instead of putting them directly on each page of the site. This is helpful because it allows you to keep all of your hreflang tags in a single location, which makes it easier to verify that nothing is missing at a glance. It also reduces the amount of code on each page of the site, which could result in slight improvements to site speed. Lastly, it lets you specify hreflang for non HTML pages, such as PDFs. If you decide to go this route, make sure you are marking up your sitemap correctly (this guide will help).
  3. HTTP Headers: If you are able to configure your server, you can choose to use hreflanghttp headers to specify the alternate language version of a page. This is most useful not non-HTML files. This is not the best option, but here is Google’s guide for this method
HTTPHeaders
An example of part of an XML sitemap using hreflang.
Implementing hreflang can be a lengthy process since you need to add the tags to every page. Thankfully there are some helpful tools and extensions you can leverage to speed things up.

Mageworx: Check out this in-depth guide to implementing hreflang via the Mageworx plugin for Magento.

Hreflang Tag Generator: This helpful tool can get you started on creating hreflang tags and serve as a reference point when creating them. Use this tool if you choose to add the tags directly onto the page.

Hreflang XML Sitemap Tool: If you decide to add the hreflang tags via your XML sitemap, this tool will help you generate a comprehensive XML sitemap with properly configured hreflang tags.

How can I check/troubleshoot hreflang?

According to Google, the two most common errors are:
  • Each version of the page is not referencing every other version.
  • The wrong language or country code is being used.
You can, of course, check everything manually, but depending on the size of your website this could be a massive endeavor. Instead, leverage Google Search Console/Webmaster Tools to check hreflang. Click on Search Traffic-International Targeting to see if Google is detecting any hreflang errors. Of course, this means that you will have to check your implementation after it is already live. This is not ideal because if there are any errors your user experiences could be negatively affected.

Do all search engines use hreflang?

Unfortunately, only Google uses hreflang. Bing instead uses the meta language tag.
written by: Justin McKinney

Check Out Other Relevant Guides

Let’s Talk Shop! Learn how to grow your business from the Wpromote experts.

Thank You For Your Interest In Wpromote!

Your message has been received and you will be contacted by one of our marketing specialists shortly. If you have any other questions, please do not hesitate to contact us by calling 310.421.4844 or by emailing sales@wpromote.com. We look forward to speaking with you shortly.

Sincerely,

The Wpromote Team

Get Educated! Recieve Wpro U Updates, Case Studies & More

Thanks for signing up to be a Wpromote Insider.
You’ll be the first to get the scoop on our latest services, promotions and industry news.


CONNECT
  • Los Angeles HQ: 310.421.4844
  • Chicago: 312.690.7112
  • San Francisco: 415.423.1535
  • Melville: 646.807.4074
  • Dallas: 214.696.9600
  • Houston: 281.974.5569
  • Denver: 720.583.9064
  • NYC: 310.321.4566