Let me be your oracle for a day.
You are here because your site has no hreflang tags, and you are wondering how to add hreflang tags in WordPress?
You are probably searching to understand what is hreflang tags because you have read somewhere that the SEO benefits of hreflang tags will help you rank your multilingual website.
Although hreflang isn't a ranking factor, the benefits of using hreflang tags for SEO shouldn't be written off.
In a way, the proper implementation of hreflang tags will help you position your websites' multilingual pages higher in SERP, mainly by improving searchers' experience while reducing bounce rate.
Let's start by explaining what hreflang tags are.
What Is Hreflang Tags?
The hreflang attribute is a technical solution for websites that have similar articles, usually landing pages, in multiple languages.
Hreflang tags tell Google which language you are using on a specific page so that the search engine can show that result to users searching in that language.
How Does a Hreflang Tag Code Look Like?
Here is an example code of the hreflang tag.
<link rel="alternate" hreflang="ja" href="https://example.com/url-example/"/>
What are rel="alternate" and hreflang="language"
When you've created content that is specific to a local audience, the hreflang attribute shows Google and search engines in general what the relationship is between web pages in alternate languages.
Let's take the example code above and unscramble it.
Let's say that we have created a Japanese-language version of our English-language landing page.
Then we would tag the page as "Japanese" by using hreflang="ja."
This will tell the search engine that when a user is coming from an IP address located in Japan, to show that searcher the Japanese version of the language page instead of the English version.
Further, with hreflang tags, you can geotarget users speaking the same languages but coming from different countries.
For example, you can tag one language by using hreflang="ru-ru."
This means that the landing page is written in Russian, and it targets searchers located in Russia.
However, you can also tag another landing page in Russian by using hreflang="ru-kz."
This indicates that the landing page is written in Russian, but it targets searchers located in Kazakhstan.
You see, it's not that complicated once you have the basics.
What Are the SEO Benefit of Hreflang?
One of the SEO benefits of implementing hreflang tags on your site is decreasing your bounce rate and increasing your conversion rate by ensuring that your target audience lands on the version of your landing page most appropriate for them.
The second SEO benefit for implementing hreflang tags on your multilingual site is avoiding duplicate content.
This is very relevant for eCommerce pages where the content is 99% the same for multiple countries (for example, in English for Australia, USA, England, New Zealand), and the only change is country name and currency.
Without hreflang tags, Google might see it as duplicate content.
With hreflang, you make it technically very clear to the search engine that it is the same content (or almost), just optimized for searchers coming from different countries.
What Is Hreflang's Effect on Rankings?
The purpose of the hreflang attributes isn't necessarily in increasing traffic; instead, the goal of using them is to serve the right content to the right users.
Hreflang attributes help search engines serve the correct version of the landing page into the SERP based on the user's language preferences and location.
The 3 Ways to Correctly Implement Hreflang Tags
There are three ways you can use to implement hreflang tags on your website.
You should choose and use only one option not all of them.
The hreflang attribute can be placed in the following 3 sections.
- HTML hreflang link elements in your <head>
- Sitemap
- HTTP header
From my experience, the easiest way to add hreflang tags in WordPress is by using HTML hreflang link elements in your <head>.
The "easiest way" doesn't necessarily mean that it is the best way.
Some SEO practitioners say that the best way to implement hreflang tags is by creating a sitemap. I prefer using HTML hreflang link elements in the <head> section.
Let's see how it's done.
How to Add Hreflang Tags in WordPress?
As I have mentioned, I always add hreflang tags in my WordPress websites by using HTML hreflang link elements in your <head>.
To do so, login into your websites' WordPress backend, on the left side locate Appearance -> Theme Options.
In your theme settings, locate "General Settings."
Usually, there are settings for adding Header, Body, and Footer code, such as GSC, Google Analytics, Tracking codes, and so on.
The area should look like something similar:
So, when you locate this area, add your hreflang tags. Click save and delete all cache. You are done.
In case you can't locate this area in your WordPress theme, then there is an alternative option.
You can use a plugin called "AddFunc Head & Footer Code."
Install it, activate it, go to the plugin settings and put your hreflang tags in the Site-wide Head Code section, don't forget to save the changes.
The benefit of implementing hreflang tags through Site-wide Head Code (in both examples) is that the hreflang tags will appear on every page for which you have created an hreflang tag.
It is important to note that all tags should exist on every page for which you have created hreflang tag code.
This means that the return tags (when testing any page to see if tags are implemented correctly) should always return the same number.
I'll show you how to do it below.
The downside of implementing hreflang tags through Site-wide Head Code is when you have pages on which you don't want the hreflang tags installed.
In this case, you will have to use AddFunc Head & Footer Code plugin and install the hreflang attributes for each page separately.
Once you install the plugin, click on "edit page/post" and scroll down, you will find a box called "Head & Footer Code."
If you often delete pages or change the URL structure, the best way to implement hreflang tags is by using a sitemap.
How Can You Determine which ISO Language and Region Codes to Use?
Google uses the ISO 639-1 format for language codes and the ISO 3166-1 Alpha 2 format for countries.
Don't forget to include a general hreflang attribute without the region code.
Following our previous examples with Russia and Kazakhstan.
<link rel="alternate" href="https://example.com/ru-kz/" hreflang="ru-kz" />
<link rel="alternate" href="https://example.com/ru-ru/" hreflang="ru-ru" />
To catch Russian speaking searchers in Ukraine or other areas of the world that you want traffic from, add a general hreflang attribute without the region code:
<link rel="alternate" href="http://example.com/ru-ru/" hreflang="ru" />
In this case, you need to choose only one of the pages and add the general hreflang attribute without the region code to it.
I will show you how you can do everything I've described so far with only three tools.
Add General Targeting with X-default
I usually have one page which will have the hreflang="x-default" on it.
It indicates that the page isn't targeting a specific country or language.
This is the landing page where users will be sent (if search engines decide so) if their location and language don't match any country-specific page on our multilingual website.
And this is how the hreflang tag looks like:
<link rel="alternate" href="https://example.com/" hreflang="x-default" />
I usually set that page to be my home page.
Use Hreflang and rel=canonical Together
Hreflang and rel=canonical should be used together.
This means that every language page should have a rel=canonical link pointing to itself.
For example, if you are on the Russian page, you will add the following tag.
<link rel="canonical" href="http://example.com/ru-ru/">
The canonical link should be added only to the specific page, not through the Site-wide Head Code.
Are There Hreflang Tags Generator Tools?
Yes, there are hreflang tags generator tools that save up a lot of time and help you figure out if there are issues with your hreflang tag implementation.
- If you want to use XML Sitemap to implement hreflang tags, you can use this tool.
- To generate hreflang tags, use this hreflang tag generator.
- To test if your hreflang tags are implemented correctly, use the hreflang tags testing tool.
How Can I Check Hreflang Return Tags?
To check hreflang return tags, use the hreflang Tags Testing Tool, created by one of my favorite technical SEO blogs https://technicalseo.com/.
Once you open the tool, plug in your website address and choose User-Agent.
Once you run the tool, you will see the hreflang return tags for your website.
Here is an example from one of my multilingual websites.
In this case, you can see that there aren't any errors with the hreflang return tags.
That's because I've spent 5 hours the day before to figure out the many problems I had.
I will show you three of the most common errors you may receive when implementing hreflang tags in WordPress or in any other content management platform.
3 Common Errors Related to Hreflang Tags Implementation and How to Fix Them
Error 1: Missing region-independent link for that language
In the example below, we have two errors.
The first one is with the Brazilian version of the landing page.
The error is "Missing region-independent link for that language (pt)."
We have missed adding a general hreflang attribute without the region code (see the "ru" above ru-KZ and ru-RU, if I remove the hreflang tag for "ru," we will receive the same error for ru-RU and ru-KZ).
To fix the problem, we will add the following hreflang tag.
<link rel="alternate" hreflang="pt" href="example.com/pt-br/"/>
Error 2: Detected language does not match specified language
The second error we see is on our Israeli version of the landing page.
The error we see is "Detected language does not match specified language - Incorrect language code."
One of the best features of this tool is detecting the language used on the given landing page.
In this case, "en-IL" implies that the content on that landing page is written in English.
In reality, the language is Hebrew.
And the tool successfully detects that there is inconsistency with reality and the hreflang tag for that page.
To fix the problem, I need to change my hreflang tag from "en-IL" to "he-IL."
Error 3: Return links are missing for the pages declared in hreflang annotations
The third error, which is very common, is when confirmation (return) links are missing for the pages declared in hreflang annotations.
If page Y links to page Z in hreflang annotations, page Z must link to page Y in return.
To fix the issue, make sure all the page versions translated or targeted to users in a particular region have the same set of hreflang annotations, including URLs to all the page versions.
This will always provide return links between the alternate pages.
To Summarize: How to Add Hreflang Tags in WordPress
- The proper implementation of hreflang tags on your multilingual website could significantly decrease customers' bounce rate while serving the best landing pages for the searchers' intent.
- Hreflang tags' primary purpose is to show which of the different but often similar landing pages should show up in a search, depending on the searcher's language preferences and location.
If you have multilingual pages on your website, don't miss the opportunity to add hreflang tags.
It takes little time, but the positive impact is significant.
