How to Add Hreflang Tags to Your WordPress Website: The Complete Guide (2023)

Want online customers from all over the world? Then your website will need to speak their language.

After all, while English is one of the most spoken languages globally, this doesn’t mean that everyone can speak it. Even if your visitors can understand the English version of your website, they may be more proficient in another language. And if you’re seeking their business, then you’ll have to adapt to their language preferences – not the other way around.

Accordingly, you’ll need to translate your content into the different languages of your target markets. But to ensure that your website displays the right language content to the right audience, you’ll also have to add code known as “hreflang tags” to your website.

If you’re using WordPress for your website, be aware that it isn’t designed for multilingual website operations out of the box. As a result, you won’t find a built-in setting in WordPress called “Add Hreflang Tags” or similar.

Not to worry, though, because there are various options for adding hreflang tags to a WordPress website. So let’s get into:

• What hreflang tags are,
• Their importance for international websites targeting visitors from different countries, and
• How you can add them to your WordPress website.

We’ll also throw in some best practices for running a multilingual website that delivers an exceptional user experience and drives sales.

What are Hreflang Tags?

Hreflang tags or hreflang tag attributes are HTML code attributes that indicate the language of a web page, and the geographical region for which it was created. Let’s say we have a home page with the URL “https://www.example.com/gb” that contains this hreflang tag:

Here, the hreflang tag indicates that the home page “https://www.example.com/gb/” is:

• In the English language, following the “en” ISO-639-1 language code, and is
• Created for visitors from the United Kingdom region, following the “gb” ISO 3166-1 alpha-2 region code.

Web pages can contain multiple hreflang tags at a time – and in fact, they’ll need to, if you have multiple web page variants for targeting visitors with a different language and regional settings.

Search engines use hreflang tags to determine which language and regional variant of a web page to serve to searchers. In fact, Google officially recommends using hreflang tags as part of your localization process. Following the example above, if a searcher from France has French as their language settings, then it wouldn’t be appropriate for the search engine to direct the searcher to the “https://www.example.com/gb/” web page.

Instead, the search engine might try to direct the searcher to an alternative version of the same web page that has the ‘rel=“alternate” hreflang=“fr-fr”’ hreflang attribute (assuming that this page exists).

Separately, have you ever tried visiting a global “.com” version of a web page, only to find yourself automatically redirected to a country-specific variant of that web page? If you haven’t, try going to “https://nike.com/” and observe whether this URL changes as the browser processes your request.

Put simply, the purpose of hreflang tags is to help website visitors access web content specifically adapted for their local context.

Why Are Hreflang Tags Important for Multilingual Websites?

By advising on a web page’s target language and regional settings, hreflang tags play a critical role for websites that cater to an international audience. This is because hreflang tags can help:

1. Optimize Your Website’s Global Search Engine Rankings

Search engines want to serve the most relevant results to searchers, in terms of content and language. By using hreflang tags, you help search engines understand which version of your web pages is most relevant for searchers with certain language and regional settings. As a result, search engines may rank that page variant higher in the search engine results pages for those searchers.

For instance, if the search engine detects that your web page contains the hreflang attribute ‘rel=“alternate” hreflang=“en-us”’, then it’d learn that your web page is meant for English language users from the United States. Accordingly, it may rank that page higher in the search results for English language searchers from the United States – which is what you want as you pursue a global SEO (search engine optimization) strategy.

Additionally, search engines do their best to serve unique content to searchers. So when you use hreflang tags, you’re signaling to search engines that certain web pages are not to be considered duplicate content, even though their content may be closely identical. In consequence, search engines learn that they should be ranking all of these highly similar pages, instead of picking only one version of the page to rank.

2. Improve the User Experience

Following how search engines try to serve unique and relevant content, hreflang tags help direct website visitors to language versions of web pages created specifically for their consumption. This opens up opportunities for you to craft web pages that deliver a truly local user experience – from referencing the local weather to incorporating location-specific images or even including unique slang that isn’t used elsewhere.

When you’ve done so, you may create a sense of connection between website visitors and your brand. You may even foster goodwill that encourages visitors to spend money with you!

3. Reduce Your Website’s Bounce Rate

“Bounce rate” refers to the percentage of visitors who leave a website after viewing only one page. Ideally, you’d want to try and keep your bounce rate as low as possible.

As per the previous point, hreflang tags help direct website visitors towards content that is relevant for them. If this causes visitors to have a great user experience on the web page they’ve initially landed on, then they might just stick around to browse other pages on your website. This is great news for reducing your bounce rate.

A lower bounce rate can translate to more tangible business results too, such as increased course sign-ups and order volumes.

How to Implement Hreflang Tags on Your WordPress Website

Now that we’ve seen the importance of hreflang tags, how can we actually implement them on a WordPress site? Here are two solutions:

1. Use a WordPress Plugin

WordPress plugins are lifesavers, helping to extend your website’s capabilities with little coding needed. And the same applies to implementing hreflang tags – the right WordPress solution with hreflang functionality can automatically add hreflang tags to all your web pages on your behalf. 

Weglot is primarily a no-code website translation tool that integrates with your WordPress site to translate website content into practically any language.

Leveraging sophisticated machine language technology such as DeepL and Yandex Translate, Weglot translates content speedily and with a high degree of accuracy. You can then engage professional translators or make manual changes yourself right from the Weglot dashboard to tweak your translations to perfection.

That’s not all: Weglot also effortlessly adds hreflang tags to every web page on your website for you. This is a massive time-saver and frees you up to focus on core business responsibilities.

To get started with Weglot, sign up for a free Weglot account here and start a new translation project. Copy your Weglot account API (you’ll find it in the settings page for your Weglot project) and save it in a safe place – you’ll need it shortly!

Next, search for and install the Weglot plugin into your WordPress website:

Paste your Weglot account API into the settings page. Weglot is now all set up and ready to go.

To translate your website content, select your website’s original language and the languages into which you want your website to be translated. When you save your changes, Weglot will instantly translate your content, and also add hreflang tags to your web pages.

While Weglot is doing its job, you can work on other to-dos for making your website multilingual. Check out our guide to best practices for WordPress multilingual websites if you need a leg-up on this.

2. Manually Add Hreflang Tags to Your WordPress Website

Alternatively, if you’d prefer not to use a third-party solution to automate the adding of hreflang tags to your WordPress site, then there’s always the more manual approach. However, you’ll need to be extra careful when manually adding hreflang tags, because:

• Hreflang tags contain many moving parts: from using the right language and region codes to structuring your hreflang tags in the proper format, you’ll need to make sure that you compose your hreflang tags correctly for them to work.
• Manual implementation becomes especially complex for large websites containing many page variants: the more web pages you have and the more languages you have translated them into, then the more hreflang tags you’ll need to create and add to your website. This leaves more room for human error – and one small slip-up can cause your hreflang tags to not perform as intended.

Accordingly, manual hreflang implementation is recommended only for serious coders who have the time and patience to troubleshoot any hreflang errors that occur. If you fit the bill, then you could manually add hreflang tags through one of the following ways:

a) Via HTTP Headers

Head over to the <head> section – pun not intended – of one of your web pages, then add all the hreflang tags you need there. Rinse and repeat for every web page (or page variant, to be precise) on your website. Be sure to provide the correct language and region codes, and alternate page URLs, in your hreflang tags.

While this method sounds straightforward in theory, it’s going to get quite tedious manually adding multiple hreflang tags to all your web pages. Not only that: if your web pages end up containing dozens of hreflang tags, your page load speeds might suffer. Your SEO could take a beating as a result, because search engines prefer to rank web pages that load quicker, with all else being equal.

b) Via Your Website’s XML Sitemap

An XML sitemap is a file containing information on the contents of your website (pages, images, videos, and so on). Search engines refer to the XML sitemap to learn which content on your website is more important, such that they should pay special attention to crawling – and hence indexing and ranking – it.

To add hreflang tags to your XML sitemap, you’d use code that looks like this:

Adding hreflang tags to your XML sitemap simplifies the manual hreflang implementation process. This is because you’ll essentially place all your hreflang tags in one central location, with no need to replicate them across multiple pages. As a result, you eliminate unnecessary on-page code, and can also shorten your page loading times. Though of course, the more page variants you have, the more complex your XML hreflang implementation will become.

Regardless of which method you use to manually add your hreflang tags, be on the alert for implementation errors afterward. If your hreflang tags haven’t been added correctly, you may encounter the “Your site has no hreflang tags” error message in Google Search Console.

While this is a common problem with DIY implementation, the exact cause of the error can take some time to identify and fix. If you’ve run into this issue, we have a separate guide to troubleshooting the “Your site has no hreflang tags” error that you may find useful.

Best Practices for Adding Hreflang Tags to Your Multilingual WordPress Website

Adding hreflang tags to your WordPress website isn’t the end of the story. To produce a well-built multilingual site built for international SEO, follow these hreflang best practices:

Validate Hreflang Tags in WordPress

As previously discussed, there are many moving parts and risks associated with manually adding hreflang tags. Even if you’re an experienced coder, you cannot absolutely rule out human error. It’s also difficult to know if you’ve implemented them incorrectly – you’ll have to manually check each of them and whether they’re showing the right country code.  

That’s why we recommend using our free hreflang tag checker! Simply copy-paste your URL, choose a search engine that you want to be optimized for and click on the “Test URL” button. 

The tool will check whether your hreflang tags were implemented correctly and show you details like alternate languages URLs, whether they’re indexable or not, current status and if there are any errors. In the example below, you can see that the hreflang tags were implemented incorrectly!

Implement Your Translated Content

WordPress doesn’t offer a feature for designating translated variants of a certain web page, so you’ll need a separate tool for this. In this regard, there are various WordPress-compatible solutions, such as Weglot.

Opt For Well-Designed WordPress Plugins

Boost the performance and functionality of your multilanguage WordPress websites using reputable and powerful WordPress plugins. Such plugins include:

• WooCommerce if you intend to operate an ecommerce store, or
• Yoast SEO or Slim SEO to help search engines better index and rank your content.

What’s more, many of these plugins can be used for free! This is a big opportunity to soup up your website at no cost, so don’t hesitate to add such plugins to your multilingual site if it makes sense to do so. Make sure to check if they’re compatible with your WordPress theme before you use them on your website!

Hreflang Tags: A Crucial Component of Any Multilingual WordPress Website

If you’re making your WordPress website multilingual, then you absolutely cannot afford to skip over hreflang tags. Adding these tags to your website – and adding them correctly – is key to ensuring that:

• Search engines rank the appropriate language and regional variants of your pages in the search results,
• Users are channeled to the most relevant content for their own language and region, and that
• You ultimately optimize your website presence for maximum global reach and sales.

With its ability to automate the implementation of hreflang tags and render high-quality machine translations of content, Weglot is the ideal translation solution for webmasters who want to take their WordPress website to the world stage. It supports over 100 languages including Spanish, German, Arabic, Sinhala, Afrikaans etc.

Sign up for a free trial to try Weglot.