If you’re creating content in multiple languages, you’ve probably heard of hreflang tags by now. But how do they work? And what codes do you need to use to ensure that you’re giving search engines all the right signals? Plus, what about different locales? To answer those questions, let’s look at what hreflang tags are and how to create them, and finish off with a handy list of languages and locales you can use to create your own hreflang tags.
What are hreflang tags?
Simply put, hreflang tags are an HTML attribute that tells Google what language your page is in. They are useful if you have pages on your website that are in multiple languages and you’re looking to specify which page should be served to which users.
Here you can see that this website has its hreflang tags set up, so it will serve the Irish or the English version as needed.
Why do hreflang tags matter?
There’s little worse than being on a website and not being able to find information in your own language. There’s no guarantee that your potential customers have a working knowledge of English, which means that if your content is in English, people simply won’t be clicking on it.
If they click on it, they’re more likely to bounce because the product they’re looking at might not be available where they are, or maybe they couldn’t find how to change the language easily. There are plenty of reasons why they end up bouncing when it comes to language, and it impacts the overall experience customers have with your brand.
How to create hreflang tags
There’s no secret recipe; all you must do is follow the formula below, making sure you add in an ISO 639-1 language code (which we’ve got listed for you below!) and the URL you want to tag.
<link rel="alternate" hreflang="x" href=https://example.com/alternate-page />
So, to show you how that would look using Argos as an example, imagine we had a French version of this blog post:
<link rel="alternate" hreflang="fr" href=https://argosmultilingual.com/fr/balises-hreflang />
Then we’d put this piece of code in the <head> tag of our English blog post to signal that there is a French version available. We’d need to do the same on the French version to signal that there is an English version available, which would look like this:
<link rel="alternate" hreflang="en" href=https://argosmultilingual.com/en/hreflang-tags />
You must make your hreflang tags reciprocal, as they need to be on both the English and French pages to work.
Make sure you’re using locales
Suppose you’re like many of our customers, and you’re targeting different regions that speak the same language, e.g., Australia, South Africa, Ireland, the UK, Canada, and the USA. In that case, you can add locales to your hreflang tags. This is vital if you’re targeting multiple markets, as it’ll ensure that English speakers get the page right for them instead of being served the US page all the time.
Using the same example above, imagine we’re targeting French spoken in Belgium and English spoken in Ireland. We’ve added the country code next to the language to specify which country we’re targeting.
<link rel="alternate" hreflang="fr-be" href=https://argosmultilingual.com/fr/balises-hreflang />
<link rel="alternate" hreflang="en-ie" href=https://argosmultilingual.com/en/hreflang-tags />
This is something that many websites forget to do, and it’s a great way to boost your website visibility in countries like Brazil, Spanish-speaking Latin America, and English-speaking markets outside the US, to name a few.
ISO 639-1 language codes
Here we’ve put together a handy list of ISO 639-1 language codes, including locales, so you can implement your hreflang tags easily.
|Arabic – Algeria||ar-dz|
|Arabic – Bahrain||ar-dz|
|Arabic – Algeria||ar-bh|
|Arabic – Egypt||ar-eg|
|Arabic – Jordan||ar-jo|
|Arabic – Kuwait||ar-kw|
|Arabic – Lebanon||ar-lb|
|Arabic – Libya||ar-ly|
|Arabic – Morocco||ar-ma|
|Arabic – Oman||ar-om|
|Arabic – Qatar||ar-qa|
|Arabic – Saudi Arabia||ar-sa|
|Arabic – Syria||ar-sy|
|Arabic – Tunisia||ar-tn|
|Arabic – U.A.E||ar-ae|
|Arabic – Yemen||ar-ye|
|Chinese (Hong Kong)||zh-hk|
|Chinese (PRC/Mainland China)||zh-cn|
|Dutch (The Netherlands)||nl-nl|
|English (New Zealand)||en-nz|
|English (South Africa)||en-za|
|French – Belgium||fr-be|
|French – Canada||fr-ca|
|Spanish (Costa Rica)||es-cr|
|Spanish (Dominican Republic)||es-do|
|Spanish (El Salvador)||es-sv|
|Spanish (Puerto Rico)||es-pr|
As you can see, hreflang tags may sound scary, but if you follow the correct formula, they’re nothing to worry about. So, if you’re looking to take your global content to the next level or need a hand getting your content set up correctly, get in touch.