Posted on March 10, 2019 by
For all its power, Google is still a machine and doesn’t know what it’s reading unless you properly identify your content. The Hreflang tag tells Google the language of a page on your site and the country the page serves. This tag ensures different pages on your site end up in front of the right people.
Pronounced “h-ref-lang”, hreflang is an HTML tag used in the backend HTML of your website that tells Google all of the language and/or country variants of a given url on the site. You may translate the same set of pages into different languages for different audiences and you want to identify the language for each version of a webpage.
Perhaps you ship products to many parts of the world – someone in Sweden doesn’t want to see information about costs and shipping to the United States. With this tag, you can tell Google which url contains Swedish content and provides information and costs for shipping to Sweden.
The hreflang tag also prevents Google from assuming you’re making duplicate content; pages for the UK and US are similar content-wise since they are both in English, but they serve different countries. This tag helps Google know you aren’t duplicating content but in fact making slightly different content for each place.
Like other HTML tags, hreflang can be easy to get wrong if you flub the syntax. Luckily, there are tools online to help you.
The first thing to know is there are three places you can put the code, and where you choose to put it determines how you write the code. The three locations are in the:
If you choose to add this to the HTML code in the <head> you will want to add all of the language variants including itself in the tags. (see Google article)
The first part of the code specifies the url and the second part specifies the language and/or country. For example, the code might look like this:
<link rel=”alternate” href=”https://www.example.com” hreflang=”en-us”/>
Here you are specifying the url https://www.example.com is in American English (en-us).
You can differentiate between the same language spoken in a different country, e.g. Spanish from Spain and Spanish from Mexico. In hreflang, this might look like
<link rel=”alternate” href=”https:/www./example.com/es” hreflang=”es-es”/>
<link rel=”alternate” href=”https://www.example.com/mx” hreflang=”es-mx”/>
The first url is in Spanish from Spain and the second is in Spanish from Mexico.
A user’s current location and language settings determine what they see when they search in Google. If someone’s IP address gives the impression they are in a country in which a certain language is spoken, they are more likely to get results in that language.
If all this sounds a bit too technical, fear not: there are tools you can use to generate hreflang code. There are also great companies out there like Webcertain who are experts at international SEO and can help you if it’s all a little too much.
Let’s take a look at a site using hreflang effectively. When I query ‘Zara’, Google brings up the US English version of their site because my default Google search settings are for American English:
If I change my Google search settings to the country of France and language to ‘French’, I get the following result for the same query (‘Zara’):
Using hreflang doesn’t necessarily help with ranking, but it ensures the right page gets served to the right people. This reduces your bounce rate because people are finding the page they want (and can read!) and aren’t clicking away quickly. A lower bounce rate is better for your site’s SEO.
At the end of the day, both you and Google have the same goal: you both want people to find the best possible landing page for a given keyword search (your page of course!). Knowing how to use hreflang in your HTML markup is an excellent step to get you there.