Hreflang, the HTML attribute that your multilingual site cannot do without

If you are thinking of opening a multilingual site , or of translating your existing website to open yourself to new markets, you can’t help but ask yourself how to get Google to rightly interpret the new pages that will be created.

Yes, because creating a multilingual site is in all respects the same as redoing an existing site by re-proposing the same translated and remodeled content for different markets. What do I mean by “demodulated”? I refer to all the cultural and / or sociological differences that can occur between the various markets and for which a given message could lose its effectiveness if expressed following unsuitable communication patterns.

All this, if not properly managed by your web agency, could lead to some problems on search engines, such as for example proposing to Italian users the English version of your site, with the risk of not even getting the desired click or, even if you get it, the user will immediately exit it, thus increasing the bounce rate of the page in question.

The hreflang attribute comes into play precisely to avoid this type of problem and to ensure that the search engine fully understands the structure of your website and the nature of the pages in the different language versions. Full understanding by Google is essential to ensure that you show users the most correct version of your site depending on the language they have set in the browser and (possibly) the geographical region from which they search.

In the next paragraphs we will see in detail how it looks and how to handle it in the best possible way.

WHAT IS THE HREFLANG ATTRIBUTE AND WHY IT IS ESSENTIAL FOR A MULTILINGUAL WEBSITE?

The hreflang attribute is a small piece of HTML code that must be placed in the head section of your web pages and indicates to Google the versions of a particular page in the various languages ​​of the site.

But the hreflang goes even further, it makes it possible to distinguish and indicate to Google different versions of the same page not only according to the language, but also to the geographical area of your user! How can you be useful?

Think of having an e-commerce website addressed to both American and English users: the language is the same, but the currency (dollars, pounds) is different. If the hreflangs were not managed correctly you would risk that your site is opened by an American user in its version destined for the English market, therefore with prices in sterling, and that this is so disoriented: your ability to convert would be greatly reduced, do not you think?

HOW TO CHECK THE PRESENCE OF HREFLANG IN YOUR MULTILINGUAL SITE?

How to realize if hreflang is on your site? Let’s say you have a site in Italian and English (without distinction of geographical area): by right-clicking on a page on your site and choosing “View page source” you should find something like this in the head section .

<link rel = “alternate” href = “https://www.mysite.com/us/my-page” hreflang = “en” />

<link rel = “alternate” href = “https://www.miosito.com/it/mia-pagina” hreflang = “it” />

As you will imagine, the variable parts of these strings are 2:

  1. href : is the address of your page in language. The hreflang can also be crossdomain, ie it can refer to a page on a different domain in case you differentiated them by market (for example miosito.it for the Italians and mysite.uk for the English).
  2. hreflang : it can contain only the language, as in the case above, or language _ geographical area (it_IT) in case you want to specify both.

In case you have a main language, to show users whose search engine cannot establish language and / or geographical area, you can also add an x-default hreflang, like this:

<link rel = “alternate” href = “http://www.example.com/” hreflang = “x-default” />

In the latter case the only variable part is that of the href, in which the url that we consider to be the default one (generally the homepage) should be put. Remember that only one url per domain can be set as default.

Simple, isn’t it? And instead I assure you that the error is around the corner, because there are some precautions to keep in mind :

  • The alternate hreflang rel must be present in all the pages and specify all the versions , preferably also that of the page itself;
  • if the page my-page refers to my-page , my-page must also refer to my-page ;
  • care must be taken not to refer to pages whose HTTP status code can be 404 (page not found) or 301/302 (ie redirected permanently or temporarily);
  • The language and geographical area codes are standards and therefore cannot be different, otherwise the written code will be valid. The language codes are in ISO 639-1 format , while those of the geographical area are ISO 3166-1 Alpha 2 (the latter strictly in block letters);
  • While it is optional to specify the geographical area in the hreflang, it is not allowed to use only the latter without specifying the language. We could therefore have hreflang = “it” and hreflang = “it_IT”, but not hreflang = “IT”;
  • If there is a canonical tag on your page, it must be self-referential : it must therefore report itself as a canon.

And if you still aren’t convinced of the pitfalls of this aspect of international Digital marketing Services, we recommend reading the research carried out by Semrush on the most common errors in the implementation of the hreflang .

HOW TO CHECK FOR HREFLANG ERRORS ON YOUR WEBSITE

After all we have said, a question will arise: but then, does my site handle the alternate hreflang relay in the right way? How can I know?

Fortunately, there are valid online tools that help us, both to find errors and to help us correct them.

Multilingual sites: looking for hreflang errors on Google Search Console and beyond

The first step to see if your site has hreflang errors is to go to Google’s Search Console . All the “experts” know that in recent times the Search Console has undergone several changes due to the renewal of the platform, however currently the error report of the hreflang tag is found in International Targeting under the heading Tools and previous reports .

Search Console is not limited to just telling us that there are problems, but also exactly what they are and which pages are affected. In fact, clicking on the type of error will open an additional screen with the url affected by the criticality in question .

If, on the other hand, you want to test the correctness of  hreflang tag attributes in a site where you do not have a Search Console property, you can use the two tools suggested by Google itself in its hreflang article,

How to generate the hreflang in the correct way: the hreflang generator by Web Digital Media Group

If you are already aware of the errors on the alternate hreflang rel in your multilingual site and you want to try your hand at redoing them, you can rely on the automatic hreflang tag generation tool , developed directly by our team.

All you have to do is feed the url of your website to our tool, specify which markets (language and possibly geographic area) you are targeting and you will immediately get the necessary markup to insert in the head section of your pages. The tool also supports mass mailing of url by uploading .txt and .csv files.

If instead you prefer to leave the “dirty work” to web marketing professionals and have the security that Google always knows which version of your multilingual site to show users, contact us for an SEO consultation and the hreflang tag will be, for you, only a bad one I remember