What Are Hreflang Tags and How to Use Them in WordPress
If you’re thinking of going viral and reaching a worldwide audience, it might be a good idea to have a website that supports multiple languages. Even though English has sort of become a global lingua franca of the modern age, there’s still plenty of people who’d much rather browse websites written in their mother tongue.
And that’s where hreflang tags come into play. Thanks to them, Google can display a page in search results in the user’s preferred language.
In this roundup, we’ll dig deeper into the subject of hreflang tags, and we’ll answer the following questions:
Hreflang is an HTML meta tag that stipulates the language and the geographic location for a page. It informs Google that a website has different versions for users that come from different countries and speak different languages, and that the search engine should display the pages accordingly.
For instance, a hreflang tag will instruct Google to display one page for Italian speakers in Italy and a different one for English speakers in the UK. As such, this attribute is especially useful if you wish to target a specific audience with particular products or services.
This is how hreflang tags look in action. First, we have the top result for Italian users who’d like to visit the MTV’s website:
And when an English speaker from the UK googles MTV, this is the first result they’ll see:
This is all possible thanks to hreflang tags. They enable Google to direct users to the most appropriate version of a website based on their language preferences, search criteria, and region.
When Should You Use Hreflang Tags?
While we did mention the most obvious case that requires the implementation of hreflang tags (when your site is international and translated into multiple languages), you should also consider using them in any of the following scenarios:
Your pages are in one language but different regional dialects. For instance, you have a website in English, but with different versions for the US, the UK, Ireland, and Canada markets.
You own a website that comes in different versions for various global markets. This means there’s one version for Europe, another one for Asia and the Pacific region, a different one for North America, for Latin America and the Carribean, etc….
When you wish to keep the main content in one language but have the navigation and footer in other languages, e.g. in user forums.
There are three ways to tell Google you have multiple language versions of a page. You can use hreflang tags in:
Let’s go through each of these methods separately.
1. How to Implement Hreflang in HTML Tags
For starters, we’ll show you what a hreflang tag looks like:
<link rel="alternate" hreflang="lang_code" href="url_of_page" />
That’s the tag you should add to the header of your page to let Google know about different language and/or locale versions of your page.
Now, let’s see what each part of this tag means:
link rel=”alternate” : this tells us that this is the alternate version of a page
href=”url_of_the_page” : you should insert here the URL of the page for a specific language or a region
2. How to Implement Hreflang Tags in HTTP Headers
This method is an excellent option when dealing with non-HTML files, such as PDFs. But you can use it with HTML pages, too.
In this case, the link will look like this:
<url1>; rel=”alternate”; hreflang=”lang_code_1″, <url2>; rel=”alternate”; hreflang=”lang_code_2″, <url3>; rel=”alternate”; hreflang=”lang_code_3″,… and so on, depending on how many language or regional versions of a page you have.
3. How to Implement Hreflang Tags Using a Sitemap
While this method may seem like the messiest, it’s quite useful since it lets you use just one file to inform Google about all the languages and region versions of your page.
For this method, you’re going to need the <loc> attribute that specifies an URL and the <xhtml:link>, to list all language and region variants of your page.
Basically, what you would need to enter is this:
<url> <loc>url_of_page</loc> <xhtml:link rel=”alternate” hreflang=”lang_code” href=”url_of_page_targeted_at_specific_language_speakers”/> </url>
Repeat this part for every language, just change the codes.
N.B. Google has specified hreflang implementation guidelines for all methods, so make sure to stick to them no matter which method you opt for.
When Should You Use the Hreflang=”x-default” Tag?
Google has introduced the hreflang=”x-default” tag in 2013. Its purpose is to specify which page users should see when there are no other language pages that match their preset criteria. Setting this tag up isn’t obligatory, but it can be useful if a page doesn’t target a specific language or region (e.g. homepages with the country selection option).
Hreflang tags are immensely important for your SEO.
They help reduce the chances of seemingly having duplicate content. Thanks to hreflang tags, Google will know that you’re not running two copies of the same content. This is especially important if you have pages in one language aimed at different markets, with seemingly small differences. For example, you could be running an eCommerce website in English, but with prices displayed in different currencies depending on the country.
Another benefit of using hreflang tags is great user experience, and therefore, lower bounce rates. The longer visitors stay on your page, the higher the chance of them becoming leads, and eventually, converting.
The fastest and easiest way to add hreflang tags in WordPress is by using plugins. You could make your website multilingual by using multilingual or hreflang plugins.
Multilingual plugins are the best solution when you aim to create a multilingual website. One of the most popular plugins of this kind is Polylang. It currently has more than 500k active installations, it’s regularly updated, and it has an average rating of 4.7 stars.
Once you install the plugin, you’ll be able to choose which languages to add to your website. You can select as many of them as you need. Plus, you can enable Polylang to translate the text that accompanies media files, such as titles, descriptions, etc. There’s also the option to choose the language that’ll go along the content that comes without an assigned language.
Polylang also integrates with Lingotek, which is an excellent translation management system.
Besides Polylang, another excellent multilingual plugin you could use is Weglot.
With an average rating of 4.8 stars, Weglot automatically detects, translates (first layer of machine translation, with full editing control) and displays the content of your website under language subdirectories. It also allows you to edit and update your translations, and even hire Weglot’s professional translators to translate all types of content for you. This plugin also follows Google’s best practices for multilingual SEO so hreflang tags are automatically added to your WordPress website for you.
If you wish to avoid using multilingual plugins, you can try the HREFLANG Tags Lite plugin.
As you activate the plugin, the Hreflang option will appear in your WordPress menu. Click on it to choose the types of content for which you wish to set the hreflang metaboxes. We wanted to add hreflang tags for our pages, so we ticked the appropriate box. And now, when we go to Pages > Add New we have the option to add hreflang tags for the new page. All we have to do is paste the URL of the page we’ve just made and select the language.
The pro version of this plugin offers more options, such as the HTML Code Generator, the Bulk Editor (it displays all of your pages and posts in one place and lets you add hreflang tags to them), and the Validation Tool, that allows you to test your hreflang tags.
To all entrepreneurs with an international audience, hreflang tags are your friends. You can use them to ensure better user experience and deliver the content to your audience in their own language. Adding them to WordPress is effortless, thanks to the powerful plugins. But if you decide to create them on your own, try to keep in mind the following practices:
Choose one method to implement hreflang tags and stick to it
Try to ensure your hreflang tags are bidirectional and point to each other
Use self-referential hreflang tags
Be careful not to mess up language and region combos
Consider setting up your hreflang=”x-default” tag