How to Add hreflang Tags in WordPress
Are you building a website that supports multiple languages and regions? A multilingual site can expand your potential audience exponentially, but can also seem difficult to manage.
The good news is that adding hreflang tags can improve your site’s Search Engine Optimization (SEO) and User Experience (UX). It’s not that hard to accomplish, and you can start benefiting from increased traffic and engagement quickly.
In this article, we’ll look at what hreflang tags are, and some of the best practices for using them. We’ll then reveal the methods you can use to implement these tags on your WordPress website. Let’s get to work!
What is the hreflang tag in WordPress?
The hreflang tag is HTML code that tells Google which version of a web page to display for certain languages and regions. Here’s an example of what that code can look like:
<link rel="alternate" href="example.com" hreflang="en-us" />
<link rel="alternate" href="example.com/fr/" hreflang="fr-fr" />
Each tag includes a combination of language and location details, such as “en-us” for English and the United States, or “fr-fr” for French and France.
While Google can detect the language of a web page, not having hreflang tags can still harm your search rankings. That’s because without these tags, your pages in different languages can end up competing against each other for top placements. While hreflang tags are not ranking factors on their own, they do help Google serve the right pages to users.
hreflang and your multilingual site: Best practices
You can reach a wider audience with a WordPress multilingual website, but you need to implement certain best practices in order to get results. One of the best practices for this kind of website is to use hreflang tags, but there are other smart techniques as well.
For the best user experience, it’s smart to use content written by native speakers, and not machine-translated text. Another best practice is to use the optional x-default tag for unmatched languages. This should be used on home pages, where users can select the location and language they want.
If your website uses canonical tags, you’ll also need to be careful when adding hreflang tags. These two types of tags can conflict, sending mixed signals to Google about which page it should display. While you can leave the hreflang tags off pages that have canonical tags, it is better to simply add the language tags carefully.
hreflang tags are invaluable on WordPress websites, but only when implemented correctly. There are three methods you can use to add these tags to your website. Plugins are the easiest and most common method. However, you can also update your website’s header, or edit its XML sitemap. Let’s look at all three techniques.
hreflang WordPress plugins
The easiest method of hreflang implementation is to use a WordPress plugin. Plugins like MultilingualPress add hreflang tags for you automatically, and shouldn’t cause any performance problems:
MultilingualPress also has a translation feature, which can be found in the post editor. When you accept a translation, the plugin adds the appropriate hreflang tags to your site’s header. The translation feature is not limited to posts, and works on tags and categories while also syncing up well with plugins like Yoast and WooCommerce.
Another plugin option for hreflang implementation is Polylang:
Polylang is a popular free tool that helps you manage WordPress websites in multiple languages. You can create content as usual, and then assign a language to it. After that, Polylang will take care of the hreflang tags for you.
Add hreflang to <head>
You can add hreflang tags to your WordPress website without a plugin, by updating your header.php file. To access this file, you’ll need to navigate to Appearance > Theme Editor, or use File Transfer Protocol (FTP).
After opening the file, you’ll want to look for the <head> opener and paste in this code:
<link rel="canonical" href="http://example.com/content"/>
<link rel="alternate" hreflang="x-default" href="http://example.com/content"/>
<link rel="alternate" hreflang="en-us" href="http://example.com/content"/>
<link rel="alternate" hreflang="es-es" href="http://example.com/es/content"/>
<link rel="alternate" hreflang="fr-fr" href="http://example.com/fr/content"/>
In this example, the tags need to be added to the English language content. The x-default and English hreflang tags also point to the English content page.
On the other hand, the Spanish and French hreflang tags redirect to the correct language versions of the page. Of course, you can add more hreflang tags for any other languages used on your website.
Add hreflang to your WordPress XML sitemap
If you don’t want to edit your header.php file, you can update your site’s XML sitemap instead. Using this method ensures that Google will find your alternate-language pages and index them properly. Updating your sitemap also reduces the size of your web pages, for faster loading times.
The hreflang tags for your XML sitemap are slightly different:
<url>
<loc>http://www.example.com/content</loc>
<xhtml:link rel="alternate" hreflang="es-es" href="http//www.example.com/es/content"/>
<xhtml:link rel="alternate" hreflang="fr-fr" href="http//www.example.com/fr/content"/>
</url>
<url>
<loc>http://www.example.com/es/content</loc>
<xhtml:link rel="alternate" hreflang="en-us" href="http//www.example.com/content"/>
<xhtml:link rel="alternate" hreflang="fr-fr" href="http//www.example.com/fr/content"/>
</url>
While editing your XML sitemap helps with indexing, it can also become complicated. If you have a large website, the sitemap may become bloated. Adding hreflang tags to the sitemap can also take longer than using other methods described above.
How to validate hreflang in WordPress
Even when they’re included, hreflang tags are often implemented incorrectly on multilingual websites. Validating your hreflang tags can help you determine if you have added them correctly.
To validate the tags, you can use various online tools. These tools offer similar information, but present it in different ways. Sitrix’s hreflang tag testing tool displays the tags on your website, and lets you know if there are any errors:
Merke’s hreflang tags testing tool also provides a breakdown of the tags and errors on your website:
If you only want to see errors, however, SALT.agency’s hreflang tag testing tool is another option.
Keep learning with WP Engine
If you have a website with content in multiple languages, hreflang tags will help Google deliver the right pages to the right visitors. Fortunately, there are several ways to add hreflang tags to your website, with the easiest option being to install a dedicated plugin.
If you are struggling with any other aspect of running your multilingual website, WP Engine is dedicated to helping you find the resources you need. Learn more about our industry-leading hosting for WordPress sites and check out our plans today!
