How to Implement HREFLANG With WordPress

Author Benjamin Denis
|
Posted on
| No Comments on How to Implement HREFLANG With WordPress
How to Implement HREFLANG With WordPress

If you run a multilingual website, you may have been confronted with the problem of the wrong translations showing up in results when you search for important keywords. For example, you search for your brand name in Google.fr (France) and the first results are for English versions of the site, even though a French version of the website also exists.

More subtly, you may have regional versions of a site in the same language. Three sites in English, but for three distinct markets: the US, the UK and Australia. When an Australian googles for your site in Australia, you want a link to the Australian version to show up in search results, but they are seeing the American version instead.

HREFLANG to the rescue

HREFLANG was invented to allow website owners to tell Google (and other search engines) what versions of the site it should be serving to which users (based on their language preferences and geographic location).

Without using HREFLANG, the different translations of your site are competing with each other to rank first in Google. If you have versions of your site for the US, the UK and Australia, you may have 3 very similar home pages on the same domain: mysite.com for the US, mysite.com/uk for the UK and mysite.com/au for Australia. The best one, according to Google’s algorithms, will win the race to the first place in the results. Although Google.com.au (Google Australia) looks for signals that may indicate that a page is more relevant for an Australian audience, these signals may be too weak to allow mysite.com/au to beat the root domain URL mysite.com in ranking.

urls hreflang example
urls hreflang example

Google will display the page you intended for the US in the Australian search results which may cause all sorts of problems for your Australian users.
Thanks to HREFLANG, the US page on mysite.com can send instructions to Google to say “If I am ranking in Australia, I want to give up my place in favor of the Australian home page.” So that even if the wrong page ranks first, Google can swap in the correct Australian page instead.

What does HREFLANG look like?

HREFLANG can be implemented in three ways: through HTLM tags added to webpages, code added to HTTP headers or as an XML site map. The HTML code on our mysite.com example will look something like this:

  • <link rel="alternate" hreflang="en-US" href="https://mysite.com/">
  • <link rel="alternate" hreflang="en-AU" href="https://mysite.com/au/">
  • <link rel="alternate" hreflang="en-GB" href="https://mysite.com/uk/">

This code should be repeated on all versions of a page and it should include the URL of the page it is on. So our example code would be found in the source code of the pages https://mysite.com/, https://mysite.com/au/ and https://mysite.com/uk/. All the home pages link to the other home pages with this code.

links hreflang example
links hreflang example

On an About Us page, the HREFLANG code will link to the different versions of the About Us page and look something like this:

  • <link rel="alternate" hreflang="en-US" href="https://mysite.com/about-us/">
  • <link rel="alternate" hreflang="en-AU" href="https://mysite.com/au/about-us/">
  • <link rel="alternate" hreflang="en-GB" href="https://mysite.com/uk/about-us/">
  • <link rel="alternate" hreflang="x-default" href="https://mysite.com/about-us/">

HREFLANG is an attribute of a LINK tag. It defines the intended audience of a page and existing translations using ISO 639-1 language codes (en, fr, es, etc.) plus optional ISO 3166-1 country codes (US, AU, GB, etc.). You can think of it as a coded version of a language selector.

  • en-US is for an audience using English in the USA
  • en-AU is for an audience using English in Australia
  • en-GB is for an audience using English in Great Britain (be careful, the country code is not “UK”)

The “x-default” value allows you to give a URL for audiences that do not correspond to any of the audiences specified. In the example above, if the searcher is not an English language user in the USA, Australia or Great Britain, Google should favor the https://mysite.com/about-us/ version of the About Us page. This page would be preferred for an English language user in Canada or a German language user in Germany.

HREFLANG can also be configured by language – and this is the most popular implementation for multilingual sites. In this case the HREFLANG values would just be the two-letter country codes:

  • “fr” is for an audience using French (and because no country is defined, it could be from any country in the world including France)
  • “en” is for an audience using English anywhere in the World
  • “de” is for an audience using German anywhere in the World
  • “it” is for an audience using Italian anywhere in the World

In HTML this would look something like this:

  • <link rel="alternate" hreflang="en" href="https://mysite.com/english/about-us/">
  • <link rel="alternate" hreflang="fr" href="https://mysite.com/french/a-propos/">
  • <link rel="alternate" hreflang="de" href="https://mysite.com/german/uber-uns/">
  • <link rel="alternate" hreflang="it" href="https://mysite.com/italian/circa-noi/">

How to set up HREFLANG in WordPress

Handling HREFLANG is an integral part of multilingual plugins for WordPress such as Weglot, WPML and Polylang. If you are managing the multiple versions of your site on one WordPress instance, then you can rely completely on the plugin to generate HREFLANG code based on your language switcher.

However, you need to pay attention to the HREFLANG values that are being used for each of your translations. You may need to create custom languages to handle multiple versions of English such as en-GB, en-US and en-AU. You may need to change the HREFLANG code for an English translation from “en-US” to just plain “en” so that it will be the preferred version for all English-language speakers. None of these plugins seem to offer support for an x-default option for a translation, nor the possibility of assigning a translation to multiple target audiences (for example you may want one English version to serve both Australia and New Zealand).
For more information about how the different tools configure HREFLANG see these guides:

Editing HREFLANG values in WPML
Editing HREFLANG values in WPML

If you are not using a multilingual plugin, you can try a dedicated HREFLANG plugin such as HREFLANG Tags Lite. This adds a HREFLANG tags metabox to different post types and lets you define the translations between pages. It will then add the correct HTML code to pages automatically.

Checking results of HREFLANG implementation

Google provides an International targeting tool that reports on HREFLANG implementation. This was once part of Webmaster Tools but has not migrated to the new Google Search Console. This report will show you if Google has found HREFLANG code on your site and whether it is valid or has errors. Google has admitted that results of this report are confusing because they are not based on a real-time validation of a website, but the versions of the pages it has indexed. It makes debugging errors difficult because you will have to wait until Google has indexed a page before learning if errors have been corrected.

In the document Tell Google about localized versions of your page, Google also recommends using two outside tools to check HREFLANG codes.

Unfortunately, even when HREFLANG is correctly implemented, Google sometimes ignores your directives and continues to show the wrong page in search results. In a future case study, we will discuss other methods to ensure that search engines display the correct page or site for a specific country or language.

By Benjamin Denis

CEO of SEOPress. 12 years of experience with WordPress. Founder of WP Admin UI & WP Cloudy plugins. Co-organizer of WP BootCamp.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.