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.
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.
Hreflang Tags
This attribute is what lets a search engine know what language is being used on a webpage that is linked on a SERP. This enables search engines to deliver results specific to that language.
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.
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.
Now that you know a little bit more about hreflang tags, let’s talk about HTML language tags.
HTML Language Tag
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.
