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?
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.
The name for this attribute is called language tagging, and it's an SEO tag you can use to make sure search engines know what language your content is in.
Language Tags
There are two different types of language tags: HTML 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:
<html lang="en">
Alternatively, here's a sample hreflang tag:
<link rel="alternate" href="http://example.com/" hreflang="en" />
Google recommends using hreflang when indexing websites that are in different languages.
Next, let's explore what hreflang tags are used for and how you can use them for your own webpages.
The tag is: rel="alternate" hreflang="x"
Hreflang tags 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".
This is a sample of what a website will look like when it's tagged with an hreflang attribute:
<link rel="alternate" href="http://hubspot.com" hreflang="en-us"/>
The "en" in the first part of the tag refers to the language code, English, and the "US" refers to the country code, for the United States.
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.
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.
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:
German/Germany: de-de
English/USA: en-us
Irish/Ireland: ga-ie
Hindi/India: hi-in
Italian/Italy: it-it
Japanese/Japan: ja-jp
Korean/Korea: ko-kp
Portuguese/Brazil: pt-br
Russian/Russain Federation: ru-ru
Chinese (simplified)/China: zh-hans-cn
Thai/Thailand: th-th
If you are sharing the same page in different regions, note that it is possible to have multiple hreflang 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.
Keep in mind that because hrefleg 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.
Ultimately, the point of hreflang tags is to give customers who speak different languages, or who live in different regions of the world, content meant for them. Search engines will give international users the version of the page in their language on the results page.
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.
Hreflang Tags Generator Tools
1. The Hreflang Tags Generator Tool
With this tool, you can generate hreflang tags for your multi-language site. All you need to do is add the URL to your site and choose which language it's in.
This is a great tool because you can even upload a CSV with up to 50 URLs and can generate the hreflang tag for 50 sites at once.
2. Geo Targetly
Geo Targetly is another great hreflang generator tool. It's easy and free to use. All you need to do is input your URL and the language, and then voila.
While you can't do up to 50 sites at once, this is still a quick, easy-to-use option.
3. Sistrix
The Sistrix tool is similar to the other two tools above. All you need to do is input your URL and language and then the tool will generate the code for you.
Now that you know a little bit more about hreflang tags, let's talk about HTML language tags.
HTML Language Tag Example
HTML language attributes define the language of a webpage. For example, an HTML language tag for an English webpage would look like this:
<html lang="en">
Recall that Google doesn't look at HTML language tags, but other search engines might, so it's a good idea to still include them for search engines that don't look at hreflang tags.
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.
When you're optimizing your content for search engines, it's important to do everything you can to rank on the SERPs. This helps people across the globe find your business.
