News and Insights

Hreflang tags and what you need to know

November 16, 2023

Recently we’ve been discussing hreflang tags and their importance for clients’ international SEO, where brands have multiple forms of the same content targeting different countries or languages. Today we’re taking you along for a ride as we walk you through correct hreflang implementation.

What is hreflang?

Hreflang is an HTML attribute used to specify the language and geographical targeting of a webpage. If you have multiple versions of the same page in different languages, you can use the hreflang tag to tell search engines like Google about these variations. This helps them to serve the correct version of the URL to users.

Hreflang syntax explained:

Hreflang tags use a simple and consistent syntax to denote a page’s geo location. Below is an example of how a typical hreflang tag looks:

Breaking it down, here’s what each part of that code means:

link rel=“alternate”: here you’re telling search engines the link in this tag is an alternative version of this page.
hreflang=“xx”: this is saying the link is an alternative because it’s in a different language, with xx referencing the code for the select language (“en” for English, for example).
AB : this references the geographical region the page is targeting (“GB” for United Kingdom or “US” for United States, for example).
href=“https://example.com/alternate-page”: Finally, you reference the URL where this alternate page can be found.

Using this, here’s how an ‘about us page’ would look like on a page written in English, intended for an audience in the UK:

How to construct Hreflang tags

Constructing a hreflang tag is a simple process. Once you know how each part of the tag functions, the next step is to look up the codes for your chosen language and country in the list of valid hreflang codes. You’ll then populate your tag with the appropriate code. And repeat.

To make identifying relevant codes easier, there are dedicated hreflang sites that help developers with the task.

We mentioned what a hreflang tag for about us page would look like for the UK:

A German hreflang tag for the ‘about us page’ would look like this:

Whilst a Spanish hreflang tag for that page would look like this:

The basics of Hreflang implementation

There are a couple of rules that need to be followed to ensure your site adopts best practices for hreflang implementation. These rules are:

Hreflang works both ways

It’s critical to understand that hreflang tags work in pairs. In other words, if you add a hreflang tag to an English page pointing to the Italian variant, then the Italian variant must return the favour with a hreflang tag pointing to the English page.

This proves to search engines that you have control over both pages, and that they’re each in agreement about their relationship to one another. Over time, the more versions of a page you have, the more tags you’ll need to make sure all are being referenced within hreflang.

Self-referential Hreflang

It is considered best practice that each language version must list itself as well as all other language versions. What that means is that every page should have a self-referential hreflang tag—i.e., one that points back to itself.

The process of Hreflang implementation

Using basic HTML tags is probably the easiest and quickest way to implement hreflang. All appropriate hreflang tags (as discussed above) should be added to in the head (<head>) section of a web page.

So if we wanted to implement hypothetical hreflang tags for our about us page example above ( for all the versions of languages: EN, ES, DE ), we would include the following html code in the <head> section of each version of the page:

So , for each version of the about us page there would be 3 individual tags added: one for each language the site targets. Following this you can then apply the same method to other pages that exist across multiple languages.

Our step-by-step approach

To correctly implement hreflang tags please use the above guidance. In summary, the steps are:

Identify the languages and regions you have pages for and create a list of all the relevant ISO/language codes you need.
Create a list of all URL’s that are duplicated across different languages or regions. Make a note of each country/language version (as they’ll all need the same hreflang tags in place).
Using this list create the hreflang tags for each page.
Check (and double check) the appropriate URL path is selected and correct language and region ISO code is written.
Place the hreflang tags in the <head> section of each page.
Repeat these steps for each domain/subdomain/subfolder your have dedicated to a language or region.