Learn what hreflang is, how it helps Google understand your site, and how to add it to your multilingual WordPress website.
What is hreflang?
Hreflang tags are HTML attributes that indicate the language and region a page is intended for. In a multilingual website, hreflang tags tell search engines the intended audience for each version of a page.
For example, the following hreflang indicates a homepage has a version for Spanish users, on the specified URL:
So, when a user in Spain searches for this homepage, Google shows its Spanish version.
Google showing Spanish version of a page in Spain
In addition to Spanish, the homepage also has a version in English. So, when a user in the US searches for it, Google shows its English version.
Google showing English version of a page in the US
Hreflang is an essential component for helping search engines understand your multilingual website. But first, when do you need to implement hreflang tags?
When Do You Need to Use Hreflang?
There are four cases in which you need to add hreflang tags on your website:
When your website has multiple languages
When you want to target specific geographic regions
When your content has small regional variations (US vs UK English)
When your topic is the same, but content is different (best beaches in US, best beaches in Autralia)
As a rule of thumb – if your website has variations of a page, and they’re intended for different audiences, you need to add hreflang tags to these pages.
What happens if you don’t add hreflang?
Hreflang tags have two main roles: tell Google for which audience is a page intended for, and indicate the page is a variation of the original content.
Since Google can’t tell if a page is a variation of another, without clear hreflang tags, Google may assume your variations are duplicate content, and penalize your pages.
How do hreflang Tags Work?
Hreflang tags appear in the <head> section and point to alternate versions of a page.
Hreflang tags contain three pieces of information:
rel=”alternate” – indicates that this is an alternate version of the original page
href=URL – indicates the alternate page’s URL
hreflang=LANG – indicates the alternate page’s language
If we were to put the above example into words, it would read:
The current page has an alternate version in Spanish on the URL http://www.domain.com/es and an alternate version in German on the URL http://www.domain.com/de.
As you can see, hreflang tags use a two-letter code when referring to languages. In this example, es stands for Spanish (Español). For the full list of abbreviations, visit the language code standards – ISO 639-1.
To indicate a language and target region, like Spanish-Mexico, you add the country code to the end of the hreflang component, like this:
hreflang="es-mx"
In this example, es stands for Spanish, and mx for Mexico. Country codes follow a similar two-letter abbreviation to language codes, based on the ISO 3166-1 alpha-2 standard.
When adding hreflang tags to your website, it’s important to follow Google’s recommended hreflang guidelines outlined below.
Point Alternate Pages to One Another
Make sure every version of your page contains an hreflang tag referencing all other versions. This helps Google understand the complete set of your alternate pages, and how they relate to each other.
For example, if you have a page in English and Spanish, the English version should contain an hreflang tag pointing to the Spanish version. And likewise, the Spanish version should contain an hreflang pointing to the English version.
Pages in English and Italian pointing hreflang tags to one another
Include a Self-referencing Hreflang
On each version, include an hreflang that points back to itself.
For example, if you have 2 versions – English and Spanish, in addition to having pages point to one another, each version should have an additional hreflang that points to the page it’s located on.
Here’s what this will look like on the Spanish version:
For example, a website in English and Spanish won’t have an appropriate page for a French user. In this case, Google will try to serve the page it thinks is best. However, to control which page Google should serve, you can include an x-default hreflang with the URL you prefer as a fallback.
Here’s what this will look like on the English page, if we want our English homepage to be the fallback:
You can easily add hreflang tags to your WordPress website with a multilingual plugin. There are a few benefits of using a plugin, instead of manually doing it yourself:
Automatic placement – hreflang tags are automatically placed into the HTML header of your pages. No need to access your code source and manually add tags.
Automatic organization – hreflang tags are automatically created and updated whenever you create and update your content.
If you’re looking for a multilingual plugin that offers all the above (and more), you can use WPML, the most popular multilingual WordPress plugin.
Automatically Add hreflang Tags to Your Website with WPML
With WPML, you don’t need to worry about hreflang tags.
As you add new languages and translate content, WPML automatically inserts and updates hreflang tags on your original, and translated pages.
All WPML plans include automatic hreflang management for your website. To learn more about our plans, visit the pricing page.
Add Regional Targeting with WPML (optional)
By default, languages you add in WPML are not tied to countries. If you want to add regional targeting, you need to add custom languages.
Custom languages let you create an hreflang value with a language and country attribute of your choice. For example, if you want to target French-Canadian readers, you can create a custom language with hreflang=”fr-ca”.
Adding regional targeting to hreflang in the Custom Languages dashboard
To add a custom language, go to WPML → Languages and under Site Languages, click on the Edit Languages link. Then, click the Add Language button at the bottom.
For more information on setting up custom languages, read our step-by-step tutorial on adding custom languages.
Make sure your hreflang values are valid
WPML attempts to adjust hreflang values to the right format. However, it’s not able to warn you if you’re using an invalid format. To make sure your values are correct, follow the language and country code standards.
