hreflang tags are a method to mark up pages that are similar in meaning but aimed at different languages and/or regions. You can use this for three types of variations:
- Content with regional variations like en-us and en-gb.
- Content in different languages like en, de and fr.
- A combination of different languages and regional variations.
You can use hreflang tags to target different markets that use the same language. This is a fairly common use case. Using hreflang tags you can differentiate between the US and the UK, or between Germany and Austria.
hreflang is code, which you can show to search engines in three different ways, more on that below. With this code you specify all the different URLs on your site(s) that have the same content. These URLs can have the same content in a different language, or the same language but targeted at a different region.
In a complete hreflang implementation, every URL specifies which other variations are available. When a user searches, Google goes through the following process:
- it determines that it wants to rank a URL;
- it checks whether that URL has hreflang annotations;
- it presents the searcher with the results with the most appropriate URL for that user.
The users current location and his language settings determine the most appropriate URL. A user can have multiple languages in his browser’s settings. I, for instance, have Dutch, English and German in there. The order in which these languages appear in my settings determines the most appropriate language.
One thing is very important when implementing hreflang: don’t be too specific! Let’s say you have three types of pages:
- German
- German, specifically aimed at Austria
- German, specifically aimed at Switzerland
You could choose to implement them using three hreflang attributes like this:
- de-de targeting German speakers in Germany
- de-at targeting German speakers in Austria
- de-ch targeting German speakers in Switzerland
However, which of these three results should Google show to someone searching in German in Belgium? The first page would probably be the best. To make sure that every German searching user who does not match either de-at or de-ch gets that one, change that hreflang attribute to just de. Specifying just the language is in many cases a smart thing to do.
It’s good to know that when you create sets of links like this, the most specific one wins. The order in which the search engines sees the links doesn’t matter, it’ll always try to match from most specific to least specific.
Technical implementation
1. Valid hreflang
The hreflang attribute needs to contain a value that consists of the language, optionally combined with a region.
2. Return links
The second basic rule is about return links. Regardless of your type of implementation, each URL needs return links to every other URL, note that it should point at the canonical versions, more on that below. The more languages you have the more you might be tempted to limit those return links: don’t. If you have 80 languages, you’ll have hreflang links for 80 URLs. There’s no getting around that.
**3. hreflang **link to self
The third and final basic rule is about self-links. Just like those return links might feel weird at some point, the hreflang link to the current page feels weird for some developers. It’s required though and not having it will mean your implementation will not work.
