Hreflang tags and what you need to know
Hreflang is an HTML attribute used to specify the language and geographical targeting of a webpageIf you have multiple versions of the same page in different languages (as Wagamama does), 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.
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:
<link rel=”alternate” hreflang=”xx–AB” href=”https://example.com/alternate-page” />
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:
<link rel=”alternate” hreflang=”en–GB” href=”https://example.com/about-us/gb” />
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:
<link rel=”alternate” hreflang=”en-GB” href=”https://example.com/about-us/gb” />
A German hreflang tag for the ‘about us page’ would look like this:
<link rel=”alternate” hreflang=”de-DE” href=”https://example.com/about-us/de” />
Whilst a Spanish hreflang tag for that page would look like this:
<link rel=”alternate” hreflang=”es-ES” href=”https://example.com/about-us/es” />
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:
<link rel=”alternate” hreflang=”en-GB” href=”https://example.com/about-us/gb” />
<link rel=”alternate” hreflang=”es-ES” href=”https://example.com/about-us/es” />
<link rel=”alternate” hreflang=”de-DE” href=”https://example.com/about-us/de” />
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.
Further reading
For other useful tips and information on how to implement hreflang please read the following:
Need help with your hreflang tags? Get in touch today! MintTwist is a digital agency based in London that offers bespoke SEO services based on your brand’s needs. We love an excuse to chat about all things SEO, so do reach out to us to learn about how we can help.
More insights from the team
