Have you ever visited a webpage that was in a different language, and your browser asked you if you wanted to change it to your first language?
It's a life-saver, right?
This is possible due to language tags or hreflang tags, which are used to let search engines know what language the content is in.
Now think about whether you've provided the functionality so your own webpages are ready for a global audience. If you haven't properly tagged or re-directed your content to be optimized in different languages, it may not be gaining the traffic it could be. Let’s take a look at how hreflang tags can help serve the correct results to your visitors.
Hreflang tags are HTML attributes that tell search engines what language is being used on a webpage that is linked on a SERP. This enables search engines to deliver localized results specific to the user’s geographic location and preferred language.
Hreflang tags (also known as rel="alternate" hreflang="x") allow you to show Google and other search engines the relationship between webpages that are in different languages. For instance, if your tag needs to link to an English-language blog, you'd use the following tag: hreflang="en".
What do hreflang tags look like?
Hreflang tags have an established syntax. Here’s an example of how hreflang tags are written.
Users with an IP address that notifies which language is being used will automatically see a properly tagged webpage, so a hreflang tag is especially helpful if you have a global audience and want to make their user experience delightful.
Hreflang Tags vs. HTML Lang Tags
There are two different types of language tags: HTML lang tags and hreflang tags.
While both HTML and hreflang tags are intended to optimize content in multiple languages, they have a couple of differences.
Simply put, language (or lang) tag attributes on an HTML tag tells your browser the language of the current document or webpage, while the hreflang tag attribute tells your browser the language of the webpage that's being linked — for instance, a lang tag on HubSpot.com tells your browser the language of HubSpot.com, but a hreflang tag attribute tells a search engine the language of HubSpot.com when a user searches for HubSpot.
If a user searches for HubSpot.com from Germany, a hreflang tag is responsible for changing the link available in the search engines. However, when someone lands on HubSpot.com in Germany, a lang tag changes the language on the page itself.
It might be easier to visualize, so here's a sample lang tag:
Google recommends using hreflang when indexing websites that are in different languages.
You might also want to use HTML language tags in conjunction with an hreflang tag — they can work together to inform search engines about the content on your webpages. Having both tags tells search engines what language a webpage is in, while directing users from other countries to the appropriate webpage.
Next, let's explore what hreflang tags are used for and how you can use them for your own webpages.
Why do you need hreflang tags?
Ultimately, it's helpful to use hfreflang tags so you can create a better user experience. If a user in Germany searches for HubSpot, we want to make sure the result in the search engine shows our site in German and not in English. Besides a better user experience, this can also help reduce bounce rate and increase conversion rates because you're showing the best version of your site to the right audience.
Another benefit of using hreflang tags is that they prevent duplicate content. Let’s say you have the same content on different URLs aimed at Spanish speakers in Mexico, Spain, and Chile but with slight differences depending on the target audience, like currency. Without an hreflang tag, Google may just see this as duplicate content.
Hreflang tags tell search engines that while the content may look similar, it is directed at different audiences.
How do hreflang tags work?
To illustrate how hreflang works, let's consider an example. Let's say you make two homepages that are the same, but one is in English (hreflang="en"), and the other's in Spanish (hreflang="es").
When a user searches for your homepage in Spanish or from a Spanish-language browser, they'll receive the Spanish version of your homepage, as long as it's properly tagged.
Each language and country has its own hreflang tag. Here's a list of common ones:
Russian/Russain Federation: ru-ru
Chinese (simplified for Chinese Mainland)/China: zh-hans-cn
If you are sharing the same page in different regions, note that it is possible to have multiple tags on the same page. For instance, if your French website sells to customers in Germany and Spain too, you'll be able to tag your page accordingly in HTML.
Hreflang tags are bidirectional and work in pairs. If you add a tag to an English page pointing to the Spanish version, then the Spanish version of the page must also have an hreflang tag pointing to the English page.
Keep in mind that because hreflang tags are able to be overridden by other SEO options, your page may rank higher in a different language. To avoid this, make sure search engines are equipped with the correct attributes, so they know which language to present your page in.
If all of this is a little confusing, don't worry. You can use a free Hreflang tag generator so all you need to do is copy and paste the code. Let's look at a few examples below.