Hreflang Tags in Magento 2: Definition, Benefits, Extension

Getting your website ranked on Google is one of the most daunting tasks many websites struggle with, especially in eCommerce. Moreover, SEO is a complex concept that constantly changes and evolves. So, it may be hard to keep up with upcoming updates and algorithms.

However, there are some essential factors you, as a store owner, should pay attention to: website speed, image optimization, content. The list can go on and on.

The concept we want to get you familiar with today is hreflang tags, hreflang attributes or alternate hreflang tags. You will learn what hreflang tags are, why you need them, how they influence your website and, most importantly, how to add them to your Magento 2 website to get ranked.

Without any further ado, let’s start.

What are Hreflang Tags?

Hreflang Tags, also referred to as rel="alternate" hreflang="x", are the snippets of HTML code added to your website pages to let Google and other search engines know that you have different alternatives of the same page.

Alternate hreflang attributes are used if you have multiple store views on your website and serve content in different languages. Also, if you have content in the same language for different regions e.g. English in the US, English in GB and English in AU.

Are you confused?

The same is Google when it sees that you have a lot of duplicate content. So, if you don’t use hreflang tags to interlink the pages, search engines struggle to choose what page to rank. Eventually, they end up ranking only one page and leave other pages behind.

That is why you have to use hreflang tags to make all of the pages rank equally.

However, it is not that easy.

What Do Hreflang Tags Look Like?

Now that you already know what the hreflang tag is, let’s have a closer look at this link attribute element. So the alternate link looks like this:

<link rel="alternate" hreflang="x" href="https://www.mywebsite.com">

As you can see, there are three HTML attributes here:

• link rel="alternate" - tells search engines that there are other alternatives to this page
• hreflang="x" - specifies the language of the alternative page (sometimes region too)
• href="https://www.mywebsite.com" - states the link to the alternative page

However, there are also different hreflang values you have to use depending on the language and the region you want to target.

Language Code

If you don’t want to target any specific country, the alternate tags for your pages should look like:

In this example, we set the hreflang tags for English, Ukrainian, French and Spanish website pages.

Fairly easily, right?

It is if you don’t specify the country you want to target. However, when you sell worldwide, you have to provide a more personalized experience.

Language-Country Code

Some countries use only one language and some use multiple languages. In this case, you have to add the country code to the hreflang tags to make them work better.

We will review two different examples of how the country codes are applied.

Example #1 Location-based

Let’s say you want to target only English-speaking people who come from the UK, US, and Australia in your store. The product will be the same, but the prices and the content might be different.

All pages will be in English, so you have to avoid duplicate content issues by applying the alternate hreflang tags. They will look like:

Example #2 Language-based

In this case, your store operates within one country but still targets different languages. For example, you sell in Canada but want to serve content for English-, French- and Spanish-speaking people.

Pay attention to the language-country pattern in this case:

It is important to note that the language code always comes first and is followed by the country code.

Besides, every alternative page should contain the same set of alternate tags.

e.g. if you have 3 home page alternatives in English, Spanish and French, all 3 of them should contain the same 3 alternate tags.

Keep this in mind if you want to avoid hreflang tags with errors on your website.

X‑default Hreflang

Sometimes, when Google analyses your website, it doesn’t find the corresponding page to display to the customer in SERP. Nevertheless, it has to display something. In this case, it relies on the X‑default attribute.

So, the X‑default tags are used to specify the page search engines should fall back on if they don’t find any other page to choose from. Generally, they are not mandatory to use, however Google recommends you add them.

You will learn why later in this article.

The hreflang="x-default" page could be one of the alternative pages that are considered to be default, like here:

And this is how it looks like within a code:

How Do Hreflang Tags work?

Google analyzes a lot of things before showing your website page as a result of the users' queries. When you don’t have hreflang tags on your website, as we’ve told before, Google takes its best guess to pull some page.

Not very reliable, don't you think?

However, when you add hreflang tags to your Magento store pages, Google works on the best-match basis after analyzing the country and language signals.

For example, there is a French-speaking customer in Switzerland who searches for some products on the web. So, these are the steps Google is going to take:

Step 1: analyze the language-country match (fr-ca)

Step 2: analyze if the language matches (fr-be)

Step 3: go to the “x‑default” if it can’t find any matches

Do you need Hreflang Tags in Magento 2?

In eCommerce and Magento in particular, there are different scenarios when you need to use hreflang tags if you sell globally. Sometimes, you want to improve your website ranking by all means and look for the best ways to do so.

We have already covered it partially, but let’s list the most common cases when you need to use them:

• You have a store for one country with local languages

e.g. US-based website with English and Spanish store views or a Canada-based website with CA English and French store views

• In case you sell worldwide and have one website with multiple store views for different countries

e.g. A store with Spanish, German, French, Ukrainian, Italian store views and default English store view

• If you have a store in one language that has different variants

e.g. English-speaking website for the US, UK and Australia or German-speaking store for Germany, Austria and Switzerland

In all 3 cases, the hreflang links will be different, depending on the architecture of your website. However, you will have to set up hreflang tags in any of them to get your multilanguage pages visible for search engines.

Reasons to Use Hreflang Tags in Magento 2

If you weren’t convinced you need to use hreflang tags before, you probably will be after you hear about the benefits. And there are a few crucial ones that could improve your Magento 2 store dramatically.

1. Hreflang Tags SEO Benefit

As we've already covered, to get ranked on Google you have to take a lot of effort and optimize a lot of things. Hreflang tags are directly connected to SEO since they help you get your multi-language website pages rank.

If you have alternate pages in 3 different languages on your website but don’t use alternate hreflang tags, search engines will prioritize only one page and put it in on SEPR. They won't pay much attention to the other 2.

So, don’t be surprised if the other 2 pages don’t get much traction.

With hreflang attributes, on the contrary, you will be able to get all 3 of them to rank. However, please note that hreflang tags are just a signal, not a directive.

If you don’t see your pages on the first Google SERP after implementing hreflang tags, there might be some other things to cover.

2. Improved User Experience

We get thousands of results for our queries on Google. Imagine searching for something and getting many results in English, though your native language is German.

You click on the result in English since you have little choice. Once you land on the page, you see that you can switch to German since there is the German store view, but don’t get excited.

Why?

Because there are lot of extra actions your customers have to take to get to the information they are interested in. Wouldn’t it be better if this German-language page would show on Google results in the first place?

That is exactly what hreflang tags provide. They allow you to provide personalized and more localized results for your customers and improve their experience.

3. Reduced Bounce Rates and Better Conversions

The better your Google ranking is, the more people come to your website. And as long as you provide them with the information in their local language fast, you will see the improvement.

Fewer customers will leave your website without even browsing. They will stick around longer and spend more time learning about your products.

4. Better Store Switcher

If you have a Magento 2 multi-language website and sell globally, you may face store switching issues. Even if you configure the store codes and create store views for different languages, your customers may experience switching issues.

E.g. Customers land on the default English store view, but their native language is German and they want to switch to the German store view. However, when they use the store switcher, they are redirected to the homepage or the 404 pages.

It happens because no hreflang tags are there to specify that the English page has a German alternative.

How to Add Hreflang Tags in Magento 2?

We have discussed all the benefits and cases when you need to use hreflang tags and now it’s time to learn how to add them to your Magento website. There are a few possible ways you can do this. However, they depend on the amount of effort and skills you want to dedicate to this.

Add Hreflang Tags Manually

According to Google support, you can add hreflang attributes in 3 different ways. Let’s imagine you have an English-speaking website for 3 countries and review how hreflang tags work in each case.

HTML Tags

This method is one of the most simple ways to add hreflang tags. You need to place them on your website page <head> tag. However, you have to remember <head> and <header> tags are not the same. Content inside the <head> is not visible on the page, unlike in <header>.

So, basically, hreflang attributes should look like this within the <head> tag:

Note: though it is simple, it is the most time-consuming since all alternative pages have to have the same set of hreflang tags. And imagine if you already have 2 store views pages connected with hreflang links on your Magento website and decide to add 2 more.

You’d have to go to each of the pages that already have alternate tags to add 2 more.

Crazy long process, isn’t it?

HTTP Headers

This method is not common since it is used just in case you have non-HTML content on your website. It could be the PDF files for different languages you want to target. Here are the examples of how it should look like:

Sitemap

At last, you can add hreflang tags in your website sitemap.xml. It includes creating separate <url> elements for each of your alternate pages and other important steps. If you are not a technical person, it might be a daunting task to add hreflang tags this way.

The example of alternate tags in sitemap is:

However, we recommend you follow the detailed instructions from Google to set this up correctly.

Hreflang Tags Extension for Magento 2

Hreflang tags might be hard to set up, especially if you don’t have any technical background or just don’t want to spend tons of time on this. However, if you’re wondering if there is an easy way, we have a solution for you.

Although Magento doesn’t allow you to add hreflang tags from the admin panel by default, the Magento Hreflang Tags extension does. All you need to do is to set the alternative pages in the admin panel and the extension will generate the alternate hreflang links in the code.

Let’s take the Magento 2 homepage as an example and try to set hreflang tags for it.

Magento Hreflang Tags extension adds the Alternative Store View Localizations section to each page where you can find the available languages listed. So, when we are on the English version of the homepage, we just start typing the name of the page in the alternative language (in this case Ukrainian).

Both versions of the page should have the same hreflang tags. However, you don’t have to go to the Ukrainian version of the homepage to set the hreflang attributes there too. The extension does it automatically.

On the Ukrainian version of the page, we see the hreflang tags are already set for the English version.

So the process is 2 times easier.

And this what we get as a result:

Moreover, the extension works for the whole website: CMS pages, blog posts and categories and the homepage we’ve just covered.

What about product and category pages? - you ask.

The extension generates hreflang tags for them automatically, if the product pages for multiple store views have the same ID. If not, you can set the alternative product or category page the same way as others.

You can add hreflang tags to your Magento 2 website pages without much effort, just in a few clicks. And it doesn’t require any technical knowledge because you don’t have to work with a page code.

Besides, it offers you a round of other useful features.

If you have multiple store views in the same language, you can just enable the Locale Depends on Region option. And if you can’t find the locale you want to use in default Magento settings, you can set your Custom Locale Code.

If you have multiple Magento websites, each with different store views, then you can just restrict the hreflang tags to one website by setting the Locale Group. And the x-default is covered by the extension too.

Magento 2 Hreflang Extension is the ideal option for store managers and admins since it allows them to add hreflang tags waaaay faster and easier. Check it out on our demo to make sure!

Hreflang Tags. Yes or No?

Wow... That was quite an adventure. You now know a lot more about the alternate tags in general and Magento 2 in particular. In eCommerce, you have to pay extra attention to the little things like alternate attributes, especially with multi-language websites.

Why little things?

Alternative hreflang tags are not mandatory. Google can rank your pages without them. However, it is better if you explicitly state what pages are meant for what languages or regions to avoid the hreflang tags errors.

It not only provides a better user experience but improves SEO, increases conversions and reduces bounce rates. While there are multiple stores with the same products, you are going to stand out by providing a personalized experience.

So, hreflang tags. Yes or No?