Hreflang tag: how to use this attribute for SEO

Google likes things very clear, this means that if you want to rank you must define very well every detail of your website, no matter how small it may seem. In the case of multi-language websites, one of those crucial details is the hreflang tag.

A markup that will not only help you rank and offer the best user experience, but can save you from many problems with Google, this, of course, if you have a multilingual site.

What is hreflang?

The hreflang tag is a language markup that helps search engines understand that a website has several different language versions; thanks to this tag, the search engine can serve your site in some of the languages it has depending on the geographic location of your users, and their respective languages.

This makes it an indispensable tag if you have a multilingual website, especially if you want to take care of your international positioning.

The hreflang and the canonical URL: How are they related?

Few things annoy Google more than duplicate content.

The big problem with multi-language sites is that they offer the same content in multiple languages, and without the proper tags, Google will see it as duplicate. 

Fortunately, there are two tags that will help you show Google that you are not copying or duplicating anything, and these are the hreflang and the canonical.

<link rel="canonical" href="https://linkatomic.com/what-are-backlinks/">

With the canonical you indicate to search engines which is the primary URL of a certain content or page. This works as a kind of recognition and suggestion, which prevents search engines from thinking that you copy or duplicate content in a misleading way.

In the case of the hreflang, it not only serves to signal to search engines that your website offers its content in several languages; or to clarify which of these versions should be served to users depending on their location; but also to indicate which is the main version of all, which prevents it from considering the versions in other languages as duplicate content.

The canonical, in this case, indicates which is the main version; while the hreflang would show that there are variants depending on the language. Both are necessary, and work best together, to define as precisely as possible which is the main content and which is the alternative.

How does hreflang impact SEO?

The hreflang can have a significant impact on your site’s SEO, but that will depend on the characteristics of your page.

For example, if you have a website with only one language version, hreflang is unlikely to affect your website’s SEO performance too much.

Why? Because it is more oriented towards sites that offer content in many different languages.

So that they can help Google understand what you offer, and index and rank your variants appropriately.

With the hreflang you avoid penalties for duplicate content; you offer your readers an optimal experience adapted to their language and tell Google which version of your website should be interpreted as the main one.

If you have a multilingual website, hreflang can make the difference, guaranteeing your international positioning, an ideal user experience, and in short, the most impeccable SEO possible.

In essence, hreflang is designed to prevent multi-language sites, or those that offer country-specific content, from confusing search engines or being penalized for publishing multiple versions of the same content.

If you want to avoid penalties, and improve the SEO of your website globally, for each of the versions in which you offer it; the hreflang is for you.

How to implement the hreflang tag in WordPress?

Now to the matter at hand. 

If you want to implement an hrflang tag on your site there are at least three ways you can do it.

Let’s talk about each one.

With HTML

This method is relatively simple, although it can be a bit challenging for beginners. 

To implement an hrflang tag using HTML, you just have to add some code in the Header of each page of your site.

The code you would add would look something like this:

<link rel="alternate" href="URL" hreflang="ISO language code" />

In the space where it says URL you will place the alternative URL that offers the content in a different language than the main one.

Where it says language code you must put the language for which you will show that version, for example: if it were Spanish, it would be “es-es”.

You must place a tag for each of the alternative versions (in other languages) that you have for the same content. 

So the code you would add could end up looking like this:

<link rel="alternate" href="https://es.linkatomic.com/" hreflang="en" />
<link rel="alternate" href="https://fr.linkatomic.com/" hreflang="fr" />
<link rel="alternate" href="https://it.linkatomic.com/" hreflang="it" />

In this way you will be telling Google, and other search engines, which version of your website to display for each user, depending on their language.

Via HTTP

But not everything is HTML in this world, you may be sharing a PDF file on your website and want each user to receive a specific version according to their language and location. 

In these cases, one of the best ways to implement the hreflang tag is through HTTP headers.

It should look like this:

Link: <https://www.tusitio.com/loquesea.pdf>; rel="alternate"; hreflang="es",
<https://tusitio.com/en/whatever.pdf>; rel="alternate"; hreflang="en", 
<https://tusitio.com/de/wasauchimmer.pdf>; rel="alternate"; hreflang="de"

In this case, it is clear to the search engine that you are interested in offering a particular PDF for each user according to the language they speak. And as you can see, each link points to a PDF that changes depending on the hreflang variable.

Implementing the hreflang tag with a plugin in WordPress

If there is a challenge in WordPress, it is very likely that there is a plugin designed to solve it. The extensions repository of this CMS is a real marvel, and some of its plugins can save us a lot of trouble and a lot of time.

With the HREFLANG Tags Lite plugin you will be able to add hreflang tags to your site’s posts and pages without having to touch any code, which can be a great help for those who want to avoid implementation errors.

You can also take a look at the article on how to turn your wordpress into a multilanguage page, using the Polylang plugin.

In case you are just starting to manage a website, personal or for a client, this method may be the safest and most effective for you. 

How to implement a hreflang in your web page in the right way

Implementing a hreflang may seem simple, but it is not always so. However, what really causes problems is the implementation of this tag in the right way, as we often make mistakes out of ignorance.

If you want to implement your hreflang as a specialist, take into account these tips.

hreflang tags can do self-reference, and this is cool

Whenever you add the hreflang attribute to any URL on your website, you must define alternative language versions, including your own. 

What this means is that you should place a tag that points to itself. This helps Google and any other search engine to clearly understand all the language versions that a particular page or post has.

However, it is an optional procedure, but it is certainly positive to keep things clear between your website and the search engines, especially Google.

The hreflang attribute can take into account a region and a specific language at the same time.

When implementing this tag you must define a language, but you can set a particular region as well; this is ideal if you want your hreflang tag to be even more precise as to which version of your page you show to which user.

For example, if to define a language you simply add an “es”, which means Spanish; or an “en”, which means English; adding a region would result in something like “es-es”, which is used to indicate that we are referring to Spanish from Spain.

Is this necessary? Not at all, but it never hurts to add a little more precision to our attribute, especially if we want to position better in a specific region.

Your hreflang tags for the different language versions of your page should point to each other

It’s simple, if you have a page or post that has an English and a Spanish version, the hreflang of the Spanish version must point to the English version and to itself; and the hreflang of the English version must point to the Spanish alternative and to itself.

Doing this sends a clear message to search engines, it makes them understand that these two variants are related, that they are alternative versions of the same content, and that the link is not unidirectional, but agreed between the two pages, as they reference each other.

On the other hand, when you do this, you ensure that the vast majority of your users get to the version that is most appropriate for them, at least in terms of language; and you save yourself problems and confusion with search engines.

Hreflang: a tag that can do wonders for your site

From international positioning to user experience, the hreflang tag is not the flashiest of them all, but it is invaluable in many cases.

And yes, as unbelievable as it may seem, this subtle SEO on Page factor can make the difference between a site that ranks globally in different languages; from one that is penalized for duplicate content. 

If you have a multi-language website, offer specific content for specific regions or something similar; you will definitely want to implement your hreflang tags as soon as possible, the benefits of these can be substantial. 

In addition, it never hurts to protect yourself from penalties.