By Helena Alcoverro, on 11 March 2021
If your brand does business in more than one language you need to know about hreflang tags and how they impact SEO. We’ll break down what hreflang tags are, why they’re important for SEO and how to use them in your marketing strategy.
What are Hreflang Tags?
Hreflang tags are html attributes that indicate different languages for a website or webpage. If you have your site in more than one language, hreflang tags let Google know which one to display to users based on their location.
A tag for a Spanish version of your site would look like this: hreflang="es".
Hreflang tags do more than distinguish between languages, they also specify regional variations and dialects. Think ‘en-us’ and ‘en-gb’, for example. Both pages are in English but with their respective spelling differences. The same goes for let’s say Spanish spoken in Spain, versus Mexico. The code in hreflang tags redirects users to a version of your site based on where they are.
An hreflang tag for Spain hreflang="es-es" versus Mexico hreflang="es-mx".
Why are Hreflang Tags Important for SEO?
There are a number of reasons to implement hreflang tags in your content. They make sense from a user experience perspective and from an SEO standpoint. While hreflang tags don’t necessarily increase traffic, they are important for keeping it. Here are the key reasons for using hreflang tags if you do business in more than one language:
- Reduces bounce rate - In terms of UX experience, if you’re sent to a page in a language you don’t understand you’re likely to click back to the search results. This can be extremely frustrating for users and it increases your site’s bounce rate, which in turn negatively affects your SEO and rankings.
- Shows location specific information - Not only do you want your content shown in the right language, you want location specific variations to be user specific. Logistical questions based on location that include currency, shipping options and seasonality need to make sense for the user. If not, users are again going to be frustrated and leave your page.
- Duplicate content - Hreflang tags also let Google know that your content in language variations isn’t duplicate content. Content in English for the US, UK and AU markets will be similar but with variations in currency and some words usage/spelling. Without hreflang tags, Google will see this as duplicate content which could be copied or stolen,which as we know is bad for SEO. Using hreflang tags indicates that distinction to the search engine.
- Increases time on page - Just as a higher bounce rate negatively impacts SEO, more time on your pages increases SEO. This signals Google that your page is relevant and answers users’ questions or search intent.
- Ranking Signals - Clusters of hreflang pages also share each other's ranking signals which is another source of SEO juice.
How to Add Hreflang Tags
If you’ve read this far it’s likely you have pages in multiple languages/locations or would like to create them. Adding hreflang tags does take effort and you’ll need to invest some time to do it right. That being said, using hreflang tags isn’t terribly difficult and is well worth the work involved. Let’s go through a step by step process of adding hreflang tags, starting with 3 tips.
- Validate your hreflang codes - Each language and regional variation used has a corresponding code that is in the ISO 639-1 format. This is a two letter code such as ‘us’ or ‘de’. Before you use these attributes in your hreflang tag you need to validate that it exists in the directory. This list from Wikipedia is a great place to start.
Regional variations are the tricky part and where mistakes are most often made. Codes need to be in the ISO 3166-1 Alpha 2 format.
- Use return links - For every language and variation that you use, you’ll want to make use of return links. Each URL needs to have return links to every other URL and direct towards the canonical version. This creates a reciprocal relationship that search engines recognize and ensures they don’t punish you for duplicate content and lower your rankings. Sound complicated? This guide explains rel=canonical in more depth.
- Self referencing links - You also want to use self referencing links in your hreflang tags, too. This simply means adding the main URL to each tag.
Let’s say we have an English page: https://woop.com/one
And a German page: https://woop.com/ein
Each page should contain both of these hreflang tags:
Implementing Hreflang Tags
HTML Hreflang Link Elements
The easiest way to implement hreflang tags. Just add your chosen hreflang tag into the tag of your page. Depending on how many language variations you’re working with, this can become quite time consuming as each variation needs to link to every other variation. For larger sites with many languages it’s not the best choice as it will slow down load times.
Using our earlier example, this time with an English page with three variations:
XML site map
Another option for implementing hreflang tags uses XML sitemap markup. To do this you use the xhtml:link attribute in XML sitemaps for inserting the tag into every URL. And while it might look the worst in terms of complications, it has its advantages. For one, it’s a single file unlike HTML files which would need to be edited individually every time you make a change. Also, the slowdown experienced because of extra code using the other two methods, does not apply when adding hreflang tags via XML site map.
HTTP headers
This is the method to use when adding hreflang tags to content that isn’t HTML based. This includes documents like PDFs but can also work for regular HTML pages if you like. Like adding HTML elements this method also adds a lot of code if you have many variations. Let’s say for example we want to have PDF versions of our site in Spanish, Italian and Hungarian. Our tags would look like this:
Link:
Hreflang x-default
A very important attribute that you should know about and implement. Hreflang x-default shows users a default version of the page if their location and or browser settings don’t match up with any of your available variations. Hreflang x-default looks like this:
Hreflang Tools
There are a number of tools which can help you with hreflang implementation. Here we’ll share two of them, the Hreflang tag generator tool and the Hreflang XML sitemap generator.
1. Hreflang Tags Generator Tool
Created by Aleyda Solis, this tool helps generate link elements for you, saving you both time and effort in creating your hreflang tags.
2. Hreflang XML Sitemap Generator
Developed by Erudite, the XML sitemap tool is a god send. Simply add in a CSV file with the URLs for each language and this tool will create the XML sitemap for you. Make sure to include an x-default URL in your CSV, too.
