Skip to content

What are hreflang tag attributes and how to implement them to your website

What are hreflang tag attributes and how to implement them to your website

With Google’s rel=alternate hreflang=x attribute, pages in different languages can be marked up with both their original language tags and corresponding hreflang=x attributes that indicate the appropriate country code and language code from the ISO 639-1 list of standardized language codes.

With well over 20 languages used by over 1% of internet users, the opportunities to take advantage of this attribute are huge — but do you know how to use hreflang for SEO? Read on to find out!

What are hreflang tag attributes?

In order for search engines like Google to understand that your website is accessible in multiple countries and regions, you must use language tags within your code. In other words, if you have a Spanish version of your site, search engines need to know which version they should show users who are browsing in Spain.

These language tags are known as “hreflang” and can be placed within your pages’ HTML code. One common misconception is that having all versions of your content on one page is enough for search engines to pick up on your multilingual content.

However, it’s important to remember that not every user will visit your homepage. This means that even though there are several versions of your content available through various URLs, it doesn’t mean search engines will always find them.

Therefore, it’s important to add a link rel=alternate tag pointing at each URL where an alternate version of a page exists.

Let’s say, if we search for “apple official website” on Google in the United States, the first result looks like this:

hreflang tag explained

If we search for the same query (apple official website) in Spain, the first result looks like this:

hreflang attribute explained

At the same time, if we search for the same query in India, it will look like this:

hreflang examples

Hreflang attribute makes this possible.

Why should you use hreflang tags attribute?

Google shows results in multiple languages when searching from different countries. When you add a few lines of code to your website, Google will understand that it should show content in another language, including variations such as localized currency and addresses.

When a user searches on their country’s version of Google, they see what’s relevant to them. This is especially helpful if you operate globally and sell products or services across borders.

For example, if someone types buy shoes online into Google in Germany, they’ll be directed to German-language sites selling shoes. If they search on French Google, they might be sent to sites selling chaussures.

You can even use hreflang tags for internal links between pages of your site—for example, so users who visit your German site can click through easily to other international versions of your site.

Do you need hreflang tags?

Hreflang is a new HTML attribute that helps search engines and browsers understand which language and region you’re targeting, helping them serve up content in your users’ preferred language.

For instance, let’s say you have an e-commerce store selling jewelry. You might sell some items in English (US), some items in Spanish (Mexico), and some items in German (Germany).

If you don’t use hreflang correctly, Google might think all of these pages are duplicates of each other—but if you add hreflang tags to each page, Google can identify that they are different languages/regions, and show each one accordingly.

However, it’s important to note that hreflang isn’t required for any kind of ranking signal; it simply allows you to specify what language/region a given URL targets.

To understand whether or not your website needs to implement hreflang attribute, just head to your Google Analytics dashboard.

Now navigate to Audience » Geo » Language as shown in the screenshot below.

Google Analytics-Audience-Geo-Language

Here; you can see that this particular website is searching worldwide in different languages and different countries.

Google Analytics-Audience-Geo-Location

Now; its time to add hreflang tag to your website.

What does a correct hreflang implementation look like?

A correct implementation will help you reach your target audience in countries and regions where your content has not been translated.

For example, if you have content on recipes in English, but no translations are available yet in German, French or Italian, then using a correctly implemented hreflang could help you attract people searching those languages.

Using hreflang elements incorrectly is worse than having no language tags at all!

You must always include all of them when your content is available in multiple languages. This helps Google find out which one is best suited for each user’s search query so they receive results they are looking for.

It also reduces any confusion by users who will be redirected based on their location, which means there is a much lower chance of getting banned by Google because of duplicate content issues with Search Console.

hreflang tag html

Hreflang best practices (how to implement hreflang right way):

There’re two methods you can use to add hreflang tag into your website: 1) through html tags; and 2) using XML sitemap; and 3) using WordPress plugin.

1. Implement hreflang tags using HTML tags:

First we’ll use the html tags method. To implement hreflang tag into your website, you just need to go to Aleydasolis.

Step 1. Scroll down and “Add your URL” in the given field.

Step 2 & 3. Select language of url (such as English) and country of the url (such as United States).

Step 4 & 5. If you want to target different languages of different countries, you can add multiple coulmns. Repeat the same.

Step 7 & 8. Now select “Tags to Include in the Head Area of the Page HTML” and click “Generate The Hreflang Tags for These URLs”.

Hreflang tag generator

Now your html hreflang tag is ready. Simply copy it by clicking “Copy The Hreflang Tags Code”. Go to your website theme editor and open “header.php” (website header).

Paste this code between <head> and </head> and click “Update” as shown in the below screenshot.

How to generate and add hreflang tag into your website

To check if all is going well, you just need to add “Hreflang Tag Checker” extension to your chrome browser.

Hreflang Tag Checker

Now go back to your website and click on “Hreflang Tag checker” extension. (first you have to pin this extension)

Check your hreflang tag is it working fine

As you can see in the above image, it is working fine!

2. Implement hreflang tags using XML sitemap:

Now we’ll use second method! We will implement hreflang tag using XML sitemap.

As you can see that in the first method we have used the option “Tags to Include in the Head Area of the Pages HTML”. In this method, we’ll use second option “Attributes in An XML Sitemap” as shown in the below screenshot.

How to Use Hreflang Attributes in XML Sitemap

Click on “Generate The Hreflang Tags For These URLs”. Now simply click on “Download XML Sitemap With Hreflang”.

Now your hreflang html code for XML sitemap is ready to implement!

To help you create and manage your own XML sitemaps, you can use Google Webmaster Tools’s Upload a Sitemap feature. You can use it to generate an optimal sitemap based on what you tell Google about your site’s URLs.

Basically, if your website is large enough that manually updating a sitemap would be overwhelming or unrealistic (there’s no shortage of URLs in which case), then go with a tool like Google Webmaster Tools. It will update your sitemap regularly based on changes to your site, so you don’t have to worry about missing out on crawl opportunities.

This also helps reduce mistakes when creating a new sitemap. If you make a change to one page but forget to add it into your sitemap, Google might miss that change during its next crawl.

Instead, by using Webmaster Tools’ automated system, there’s less chance for error and more opportunity for your pages to get crawled quickly.

Finally, since Google updates its search results every few weeks, there’s not much point in waiting until after every single change before submitting a new version of your sitemap.

3. How to add hreflang tag attributes using WordPress plugins:

If you’re a WordPress user, you can also add hreflang tag attributes using a WordPress plugin. Here; we will use Hreflang Manager plugin.

Hreflang Manager Plugin WordPress

First of all, install and activate this plugin. Now go to settings!

Hreflang Manager Plugin-Connections

Fill all details as per your need and save all settings!

Conclusion

This blog post have covered all the best practices when it comes to using hreflang, a critical ranking factor that can be completely overlooked by webmasters who don’t know much about it. Whether you are using it for multi-regional targeting or delivering separate language versions of your content, we hope that after reading through these guidelines you will have a greater understanding and more confidence in implementing these tags on your site.

Leave a Reply

Your email address will not be published. Required fields are marked *

1 Shares
Share
Tweet
Pin1