How to Implement Hreflang

If your website is targeting multiple languages or locations, hreflang tags are an integral part to your technical SEO success.

Google’s John Mueller recently Tweeted about the complexity of hreflang tags, even for advanced SEO professionals.

TBH hreflang is one of the most complex aspects of SEO (if not the most complex one). Feels as easy as a meta-tag, but it gets really hard quickly.

— John ☆.o(≧▽≦)o.☆ (@JohnMu) February 19, 2018

We’ve helped dozens of clients work through this complicated process – in this article, we’ll be covering everything you need to know about properly implementing hreflang tags on your site:

Let’s get into it.

What is an hreflang Attribute?

An HTML ( rel="alternate" hreflang="x") markup that denotes the language or region your webpage is targeting. The attribute makes sure Google knows which page to rank, in which language and in which location (i.e. in Google US, UK, etc).

The hreflang tag is important because it can help your website get more exposure for international search queries. 

It’s important to note, hreflang will NOT:

1. If your website is only in 1 language, the tags will not improve performance.
2. Transpose rankings across SERPs. For example, ranking for “Nike shoes” in Google US will not translate into equal rankings in Google Mexico.
3. Fix errors with duplicate content. The hreflang tag does not function like a canonical tag.

 

When to use hreflang Attributes

Hreflang attributes should be used for content that’s specific to a local audience. The tags help Google understand the relationship is between your pages in alternate languages and regions.

For example:

• If your pages are in the same language, but different markets (i.e. pages are in English, but targeting US, UK, Australia, Canada, etc)

• If you have the same pages translated into different languages (i.e. you translate a page(s) into Spanish, French and German)

• If you translate sections of your website into a different language (i.e. if you have a forum with UGC and multiple languages spoken)

 

How to use hreflang tags

The hreflang tag gets added to the head of each relevant page. A simple example could be:

link rel="alternate" href="http://example.com/" hreflang="en"
link rel="alternate" href="http://example.com/en-gb/" hreflang="en-gb"

The attribute tells Google that http://example.com has an “alternate” (i.e. duplicate) page. That page can be found at http://example.com/en-gb/ and it’s written in British English.

There’s 2 elements of the tag:

1. Language codes
2. Location

Without these, Google understand won’t understand what you’re trying to communicate. These are standardized codes in ISO format. You can find them here:

• Language codes – ISO639-1
• Country codes – ISO3166-1

Misused Language and Country codes are a common error that can hurt your rankings. Triple check your codes before implementation.

Hreflang use cases

There are several instances where you will want to consider using the hreflang directive.

1. Multi language websites

The simplest use case is when you translate your website into multiple languages. In an ideal situation, you’d set your site up on subfolders for each language:

• example.com
• example.com/es/
• example.com/de/

Each translated page passes under that subfolder:

• example.com/services/
• example.com/es/servicios/
• example.com/de/uber-mich/

Neil Patel translates his blog posts into 5 different languages to maximize traffic to his site.

href="https://neilpatel.com/" hreflang="en"
href="https://neilpatel.com/br/" hreflang="pt-br"
href="https://neilpatel.com/de/" hreflang="de"
href="https://neilpatel.com/es/" hreflang="es"
href="https://neilpatel.com/it/" hreflang="it"

2. Regional targeting

When you want to distinguish the difference between two locations, that speak the same language.

CNN uses a subdomain to target UK readers but the same domain to target US and Canadian audiences.

href="https://edition.cnn.com" hreflang="en-gb"
href="https://www.cnn.com" hreflang="en-us"
href="https://www.cnn.com" hreflang="en-ca"

3. Cross domain tags

Before hreflang tags, the common practice to capture international searchers was to use multiple Top Level Domains (TLDs). If you have multiple top level domains, you’ll still want to link them with hreflang tags.

ASOS uses a combination of TLDs, subdomains and subfolders to manage their international presence.

• asos.de targets Germany
• asos.com targets the UK
• asos.com/ru/ targets Russia
• us.asos.com targets the US

hreflang="es-ES" href="http://www.asos.com/es/"
hreflang="de-DE" href="http://www.asos.de/"
hreflang="en-AU" href="http://www.asos.com/au/"
hreflang="fr-FR" href="http://www.asos.fr/"
hreflang="ru-RU" href="http://www.asos.com/ru/"
hreflang="en-GB" href="http://www.asos.com/"
hreflang="en-US" href="http://us.asos.com/"

This is complicated setup – most likely left over from legacy, stagnated regional launches.

Generally speaking, best practice is subfolder structure across a single domain. This preserves SEO equity and reduces effort required to manage multiple domains.

How to Implement hreflang

Google recommends 3 methods…

1. HTML link element in the header.

This is generally the most followed route. You’ll need to write the hreflang attributes and then have a developer insert them into the <head> on all the pages needed.

For example, if you have an English (webris.org) and Spanish (webris.org/es) site:

rel="alternate" href="https://webris.org" hreflang="en-us"
rel="alternate" href="https://webris.org/es/" hreflang="es-co"

Aleyda Solis has a great tool to help you generate the code.

2. HTTP header.

If you publish non-HTML files (like PDFs), you can use an HTTP header to indicate a different language version of a URL.

3. Sitemap

You can submit via sitemap. Using the same English (webris.org) and Spanish (webris.org/es) site, the sitemap would look as follows:

<url>
<loc>https://webris.org</loc>
<xhtml:link rel=”alternate” hreflang=”en-us” href=”https://webris.org” />
<xhtml:link rel=”alternate” hreflang=”es-co” href=”https://webris.org/es/” />
</url>
<url>
<loc>https://webris.org/es/</loc>
<xhtml:link rel=”alternate” hreflang=”en-us” href=”https://webris.org” />
<xhtml:link rel=”alternate” hreflang=”es-co” href=”https://webris.org/es/” />
</url>

If you’re using WordPress, there’s some plugins that can help manage the load:

• Polyang
• hreflang tags

Plugins can bloat load times and are better suuited for smaller sites.

Troubleshooting hreflang implementation

There’s a lot of SEO tools like SEMrush that can flag issues you might be having.

But for deeper technical audits, you’ll want a more hands on approach.

You can start by mimicking Google search results from other locations. This can be done by altering the URL string.

• Mimic a Spanish searcher in the US: http://www.google.com/search?hl=es&gl=us&pws=0&q=seo
• Mimic a searcher in Australia: http://www.google.com.au/search?hl=en&gl=au&pws=0&q=seo

Google has a full list of CCTLDs language and reference sheet – you can review the Google docs version go here.

Closing

There’s a handful of small items that can create a big headache. If you’re experiencing issues, check the following:

1. Errors with codes – Tag used in the wrong order or incorrect selections. Triple check your tags before implementation or check legacy tags for validity.
2. Errors with Sitemaps – If implemented via sitemap, make sure to follow Google’s guidance. It’s easy to miss ASCII codes which can break sitemaps.
3. No alternative page – no HREFLANG required. Don’t use HREFLang without a link to an alternative page – this can cause GSC to return errors that could cause a lot of wasted time troubleshooting.
4. Don’t use HREFLang on pages you have set to NOINDEX.  This can result in a number of errors.

If you’re in need of help with your website’s international SEO, let’s talk!