Today we are going to look at the rel=”alternate” hreflang tag. If that sounds foreign to you, don’t worry, you are in the right place – as this tag is specifically designed to help all International SEOs or webmasters who serve users from around the world with content that is translated or targeted to users in a certain region.
Who needs rel=”alternate” hreflang?
The rel=”alternate” hreflang tag helps Google to serve the correct language or regional URL to searchers when you have two or more pages that are equivalent but they are in different languages or target users in different countries. So if you have multiple languages targeting different regions/languages, you shouldn’t have problems with serving content at the wrong users.
To be more specific, Google themselves recommend that rel=”alternate” hreflang is suitable for the following scenarios:
- You translate only the template of your page, such as the navigation and footer, and keep the main content in a single language. This is common on pages that feature user-generated content, like a forum post.
- Your pages have broadly similar content within a single language, but the content has small regional variations. For example, you might have English-language content targeted at readers in the US, GB, and Ireland.
- Your site content is fully translated. For example, you have both German and English versions of each page.
How does rel=”alternate” hreflang work?
Imagine you have a website with two subdomains, with one for German speakers in Germany and one for German speakers in Switzerland. Obviously, you want to ensure that the right people get served the right content (let’s just say for example that there are important differences in currency).
This simple link tag would be implemented as below on each page if you need specific language and country codes. It is very important to note that it is implemented per page, rather than per site or per directory. So it lets you tell Google which is the equivalent page on the other website.
<!doctype html>
<head>
<link rel=”alternate” hreflang=”de-de” href=”http://de-de.example.com/”>
<link rel=”alternate” hreflang=”de-ch” href=”http://de-ch.example.com/”>
</head>
There are several important things to note:
- In the example above, you have just two alternatives, but you can go ahead and create many more alternatives in the same way. You could add any number of alternatives. For English speakers in the USA it would be en-us whilst for English speakers in the UK it would be en-gb.
- This tag is not case sensitive, so if you have countries or languages in capital letters, that is fine.
- If you want to be less specific, you can use the “country agnostic alternate” which does not specify a country, just the language. In that case, for German speakers you could add the simple code
<link rel=”alternate” hreflang=”de” href=http://de-de.example.com/>
For more information I highly recommend that you watch Pierre Far’s excellent Google+ hangout on the topic:
