

In every web application, website or project, when you open a code editor, it all starts with the definition of the language used for your page which is very important for good SEO results. You are probably familiar already with a `<lang>` attribute in HTML but let me explain it to distinguish two similar (at first sight) terms. Lang determines the linguistic content of the page and the content recipient country (this one is optional). At the same time it is making it easier for crawlers to assign a page to a particular language version. But what is hreflang, and how to use it?

## What is hreflang and how it is used?

Hreflang is a tag in HTML `<link>` attribute used to **define content language** and **localization** with a specific language 
indicator in the URL. 
It may also be used to indicate a specific region, not only country. Hreflang indicates to crawlers that the 
page has different language versions, depending on the used language code. 

There are three places where you can use hreflang in your code. The most popular one is hreflang tag used in **`<link>`
attribute in `<head>` section** of the page. Have a look at the example below.

```html
<head>
    <link rel=”alternate” hreflang=”en” href=”http://simplelocalize.com/"/>
    <link rel=”alternate” hreflang=”es” href=”http://simplelocalize.com/es-ES/"/>
    <link rel=”alternate” hreflang=”es” href=”http://simplelocalize.com/es-CL/"/>
</head>
```

![hreflang and google search](/blog/hreflang-google-search.jpg)

In the example we determined language versions on our website. The first part of the tag is a **language code**, and the 
second part represents a **region code** (both must conform to [ISO 639-1](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) 
and [ISO 3166-1](https://en.wikipedia.org/wiki/ISO_3166-1) Alpha 2 format). The main language 
is English, but we translated the website also to Spanish in two versions: Castilian for European use and localized 
for Chile. It works the same way for subpages, we add links referring to specific language:

```html
<head>
    <link rel=”alternate” hreflang=”en” href=”http://simplelocalize.com/contact"/>
    <link rel=”alternate” hreflang=”es” href=”http://simplelocalize.com/es-ES/contacto"/>
    <link rel=”alternate” hreflang=”es” href=”http://simplelocalize.com/es-CL/contacto"/>
</head>
```

It's crucial to put the links of all language versions in each webpage. This way crawlers can read and display the 
correct language version for the user. Any error in implementing hreflang tags will make Google ignore them completely. 
Make sure they are added correctly on all webpages to provide localized content for your audience.

Hreflangs should be added in the `<head>` of the page before scripts that could cause the section to close prematurely, 
before crawlers can read them.

![computer macbook](/blog/computer.jpg)


## Why is hreflang important?

When optimizing and then positioning a website in Google, using hreflangs will be one of the ranking factors that will 
add points to the website. The tag provides crawlers with a linkage between different language versions of the same page. 
In other words, hreflang tags are treated by Google as a ranking signal. They **improve SEO** by showing the right 
language version to specified language users. 

Another but not less important fact is that using hreflangs you **do not duplicate the content**. 
Instead of creating multiple, different pages with separate domains for each language version, you create one 
website or application and indicate the right version to crawlers. 

![SEO and hreflang](/blog/seo.jpg)

## FAQ about hreflangs usage

### Should I use hreflang in one language app/website?

No, if your website is designed for one country/area audience, then you don't need to use hreflangs. 
Correct indicators in `<lang>` attribute will do their job in this case.

### How it works when my domain is not generic but region specific, for example .it or .me?

In such cases it's good to use hreflangs if you target to another language audience. .it ending is country specific, 
so crawlers will be positioning your content as Italian. To improve that, ad hreflangs to correct language 
versions or indicate that the language is, for example, English.

![dogs has a question](/blog/question-dog.jpg)

### What are rel="alternate" and rel=”canonical”? Are those required while using hreflangs?

Rel=alternate indicates to search engines that there is another URL with the same content but in a different form, 
like language or mobile version. It points that there in an alternative page for a given URL.

Rel=canonical indicates to crawlers that that given URL is a master copy of a page, its most 
representative version. It should be used when you have many pages with similar content, like in the case of e-commerce stores.

Both tags are essential for hreflang correct usage and they are required for the correct page optimization. 
Note that the hreflang attribute and the canonical URL must match and both need to be defined. 
For example, we have a website in English which is also available in Spanish Castilian and regional for Chile. 
In this case, the default fallback will be the English home page.

```html
<head>
    <link rel=”canonical” href=”http://simplelocalize.com/"/>
    <link rel=”alternate” hreflang=”es” href=”http://simplelocalize.com/es-ES/"/>
    <link rel=”alternate” hreflang=”es” href=”http://simplelocalize.com/es-CL/"/>
</head>
```

### What x-default value in hreflang tag does?

X-default value is used for unmatched languages, in case some languages are not translated. 
It is optional, but recommended by Google, to control the page when no language versions match. 
Using X-default you define a fallback page in such cases. It's a good practice to 
always set x-default value if using hreflangs.

Hrefalngs help you with localization of your website so it's designed and adjusted to the 
specific language group of users. Adjusting the content of your pages to a specific audience, 
help you improve customer satisfaction, increase customer base and improve your SEO. Check how you can start 
with localization of your website with SimpleLocalize, start with a free access right now!


Posts tagged with `hreflang`

What is 'hreflang' and how to use it