With Google coming out with its new international targeting feature, I’ve seen more poorly implemented Hreflang annotations than good ones.
These 5 easy steps will help you avoid mishaps and implement Hreflang tags correctly across your multilingual website.
Do I Need Hreflang?
First of all, Hreflang should NOT be used simply to indicate the language of the page: it has other well-established methods of doing that. Hreflang tells Google that different language or country versions of the same page are related, so it can serve the right content to the right users worldwide.
Here are the most common examples of when it’s good to use Hreflang:
Have you found similarities with your global website? Great, let’s rock’n’roll.
Why Should I Care About Language vs. Country Targeting
Language targeting is useful when you want to approach users speaking the same language in different countries. For example, users who travel a lot or field specialists who are used to reading in foreign languages or same-language countries.
On the contrary, targeting users in a particular country is usually more precise and efficient than targeting users by their language.
So — Let the fun begin!
Step 1: List the URLs of Your Multilingual Website
To ease things up, I’ll show you how to handle language targeting first. In a new spreadsheet, create a table with headers corresponding to your website’s language versions. Add an extra column and name it “Hreflang.”
When you sort your website URLs like this, you’ll then see which pages have equivalents in different languages. Non-equivalent, standalone URLs don’t need to be hreflang-ed.
So far, so good.
Step 2: Make a Hreflang Set Out of 1 Row
Let’s say we’ll try to create a Hreflang tag for the page: www.mysite.com/page2.html targeted at English-speaking users.
This is what an example Hreflang tag looks like:
<link rel="alternate" hreflang="es" href="http://es.example.cz/" />
We’ll simply replace the example language code with the code we want from this list. So “en” for English in this case. We’ll also replace the sample URL with our desired English URL:
That wasn’t so bad, was it? Now, let’s do the same for all the remaining equivalents we have in the table:
For the German version:
<link rel="alternate" hreflang="de" href="www.mysite.com/de/seite2.html" />
For the Spanish version:
<link rel="alternate" hreflang="es" href="www.mysite.com/es/pagina2.html" />
Easy, right? So let’s piece them all together:
<link rel="alternate" hreflang="en" href="www.mysite.com/page2.html" />
<link rel="alternate" hreflang="de" href="www.mysite.com/de/seite2.html" />
<link rel="alternate" hreflang="es" href="www.mysite.com/es/pagina2.html" />
Now, place the Hreflang tags into the empty “Hreflang” column in the respective cell. Like this:
Step 3: Keep Going
Repeat the same process for the remaining rows until all are filled in. Row 2, Hreflang tags, Row 3, Hreflang tags ...
Step 4: Put It On Your Website
Once you’ve done the entire Hreflang column, it’s time to implement Hreflang on your website. It’s going to be very easy now, because you’ve done the tricky part and now it’s just copy-paste.
The fun part is that you copy-paste exactly the same Hreflang tag on every page in the row.
Between the <head> and </head> tags.
Step 5: Test What You’ve Done
Log in to your Google Webmaster Tools account and go to Search Traffic > International Targeting. If you set up your Hreflang tags correctly, you should be able to test them using this built-in feature.
The results could look like this:
Image credit and more info: http://googlewebmastercentral.blogspot.cz/2014/07/troubleshooting-hreflang-annotations-in.html
If you can’t see any numbers or figures, don’t worry. Go back to Webmaster Tools in a couple of days. If you still don’t see anything, you may have to check the following:
- Are you using the correct piece of code I gave you? No? (Naughty, naughty...)
- Have you put the code in the header (between <head> and </head>)? If you have no idea what the heck I am talking about, talk to your webmaster.
- Have you used the correct language or country code? Check the links above again.
- Is there a quotation mark missing?
- Is there an extra space around the language/country code?
- Have you not swapped the language and country codes? (language first, hyphen, country)
- Have you not confused a dash and a hyphen? (this is a hyphen: -)
When You’re Targeting Users in a Particular Country
If you want to approach users in a certain location, country targeting is definitely a better fit for you. The only difference to language targeting is that you specify the location in the table headers:
… and add a country code from this list after a hyphen. Like this green one:
The rest is the same. It’s also perfectly fine to combine language and country targeting. One language version may be targeting German speaking users, while the other, users in Spain.
IMPORTANT: Never ever confuse language codes and country codes. They are different. For example “be” is a country code for Belgium, but a language code for Belarusian. Also don’t try to figure out the country code yourself: “uk” is not a country code for the UK, but for Ukraine.
Have you managed to implement Hreflang annotations on your website? Let me know in the comments!