Do you have web pages that consistently receive traffic from users who speak a totally different language than the one the page is written in? Are you working to target an audience in another country, but don’t know how to make sure they receive a customized experience?
Hreflang is the solution you need. Don’t worry, it’s not as complicated as it sounds—here, we’ll make it easy for even total beginners to learn about hreflang and implement it like a pro.
- What Is Hreflang, Anyway?
- Does Hreflang Matter for SEO?
- How to Create a Hreflang Tag
- Hreflang Best Practices
- How to Add Hreflang to Your Site
- How to Check Your Hreflang
What Is Hreflang, Anyway?
To understand what hreflang is, it helps to first understand what href is. Per W3Schools, href is an HTML attribute that specifies a link’s destination. In other words, whenever you see a hyperlink on a website, the href attribute is responsible for telling it what page to go to when you click it.
When paired with the link tag, <a>, the href attribute looks like this:
<a href=”URL”>
Add some anchor text into the mix and it will look like this:
<a href=”URL”>anchor text here</a>
So where does hreflang come in? As W3Schools explains, it serves to specify the language of the page being linked to. Here’s what it looks like in action—in this example, it’s saying that the language of the URL it’s pointing to is English:
<a href=”URL” hreflang=”en”>anchor text here</a>
When embedded into a page’s HTML code, however, a hreflang tag uses this syntax instead:
<link rel=”alternate” hreflang=”en” href=”https://example.com/alternate-en-page” />
If you look closely, you can see that the two-letter combination of en is what indicates the English language. That’s what’s known as a language code, which is determined by ISO 639-1. There, you can find a two-letter code for just about every language in existence, from Abkhazian to Zulu:
So with the hreflang tag and an accurate language code, any href attribute (i.e. hyperlink) can have its exact language specified before a user even clicks it.
Does Hreflang Matter for SEO?
If you’re anything like us, then just knowing what hreflang is simply isn’t enough. There’s still one question burning in the back of your mind: “Does hreflang matter for SEO?
As is the case with so many other things like this, the answer is “yes and no” (go ahead and get your heavy sighs out of the way here). Let us explain:
First, it’s important to note that the hreflang tag itself is not a ranking factor, as John Mueller confirmed in March 2022:
No. Hreflang does not change ranking.
— 🐐 John 🐐 (@JohnMu) March 10, 2022
However, hreflang does have an indirect impact on SEO in the sense that it improves a user’s experience to see a page displayed in their language, and a better user experience tends to equal better rankings.
Think of it like this: If you’re a native English speaker and you click on a link only for the page to be displayed in German, then you probably won’t spend much time on the page, let alone interact with it or click the purchase button. But if the page is displayed in English, you’ll be able to understand everything the site has to offer and will be much more likely to stick around and possibly even convert (i.e. take an action such as making a purchase or signing up for an email list).
And in light of Google’s page experience update and other user-focused efforts, any SEO pro with their ear to the ground knows how crucial it is to improve the user experience in every possible way.
How to Create a Hreflang Tag
HTML rookies, rejoice: creating a hreflang tag is just about as easy as it gets. To do so, you simply have to insert the correct language code into the hreflang format we showed you above.
For instance, here’s what it would look like if you were using the language code ko to specify that a page should be displayed in Korean:
<a href=”URL” hreflang=”ko”>anchor text here</a>
That’s it! As long as you can copy+paste then you’re already good to go.
Wondering what to do if you need to specify not only the language of the page you’re linking to, but also the particular region that speaks it? That’s easy too.
For example, let’s say you need to specify that a linked page should be displayed in British English rather than American English. Then, you’d simply attach a country code (an ISO 3166-1 alpha-2 code, to be exact) to your chosen language code using a hyphen. In this case, the country code gb can be used to specify Great Britain like so:
<a href=”URL” hreflang=”en-gb”>anchor text here</a>
Conversely, you could use the country code us to specify the United States.
Hreflang Best Practices
Now you know what hreflang is and how to create a hreflang tag, but how can you be sure that you’re using hreflang correctly? The wisest course of action is to follow the best practices laid out by Google and its team members.
Don’t Go Overboard
When considering all the many possibilities that hreflang introduces, it’s easy to get carried away. After all, what if someone from Zimbabwe wants to visit your site?
But the truth is that unless your site offers something of value to people who speak different languages and hail from different countries, they likely aren’t going to bother visiting it. So if your site is centered around an American restaurant, for instance, then we’re betting that few to no Zimbabweans are interested in it. Thus, there’s no need to create alternate versions of your pages in their native language.
John Mueller summed this principle up nicely when offering advice to a Reddit user:
It’s easy to dig into endless pits of complexity with hreflang. “Let’s create all languages! Let’s make pages for all countries! What if someone in Japan wants to read it in Swahili? Let’s make even more pages!” My guess is most of these “pages created because you can” get very little traffic, add very little value, and they add a significant overhead (crawling, indexing, canonicalization, ranking, maintenance, hreflang, structured data, etc.).
As such, John said that:
My recommendation would be…to limit the number of pages you create to those that are absolutely critical & valuable.
Simply put, don’t create pages in other languages just because you can. Instead, only do so when you truly need to. If you’re not seeing lots of traffic from queries made in other languages, then you probably don’t need to.
Hreflang Tags Must Point to Each Other
Google’s hreflang guidelines couldn’t make it much clearer: “If two pages don’t both point to each other, the tags will be ignored.” They explain that they’ve designed it this way “so that someone on another site can’t arbitrarily create a tag naming itself as an alternative version of one of your pages.”
In other words, your pages’ hreflang tags need to perform a handshake of sorts—if the Spanish page has a hreflang tag linking to the Greek page, then the Greek page must return the favor. This proves to Google that you own both pages.
If you fail to make your pages’ hreflang tags point to each other, Google will simply ignore the tags altogether.
Pages with Hreflang Tags Should Self-Reference
Google’s guidelines once again come in handy, this time with the statement that “each language version must list itself as well as all other language versions.”
Put differently, pages with hreflang tags need to be self-referential. So if you have a Chinese version of a page, it shouldn’t only use hreflang tags to link to pages in languages other than Chinese—it also needs to link to itself.
This helps Google confirm the language, purpose, and location of each page, so it knows it’s in the right place and can display the correct page to users.
Include Backups
Let’s say that a visitor to your site speaks English, but Google can’t detect which English-speaking country they’re located in—it could be anywhere from Australia to the United Kingdom to North America. Which version of a page should be shown to them?
With the help of a catchall URL for all English speakers, you can ensure that they’re at least shown a page in their own language.
Similarly, Google recommends using the x-default value to specify a backup that should be used when no language or region can be found that matches the user’s browser settings.
How to Add Hreflang to Your Site
If you’ve been unfamiliar with hreflang until now, then you’re probably wondering how you should go about actually implementing it to your site.
As it turns out, there are three valid places you can add hreflang tags—which one you use is up to you.
Those places are your site’s:
- HTML;
- HTTP headers; and
- sitemap.
Let’s go over how to add hreflang tags to each one.
HTML
Access the page’s HTML source code using your preferred method (such as WordPress). Navigate to the header, and add hreflang tags like so:
<link rel=”alternate” hreflang=”es” href=”https://example.com/es-page” />
Remember to link to the same page you’re editing, as well as to all other versions of the page.
HTTP Headers
If you need to add hreflang tags to a non-HTML file (such as a PDF), you can do so via the file’s HTTP header.
Go into your site’s server settings and modify the appropriate HTTP header to include hreflang tags using the following format:
<https://example.com/document.pdf>; rel=”alternate”; hreflang=”nl”
Sitemap
If you want to use one central location to tell search engines about each language version of each page, adding hreflang tags to your sitemap might be the ideal solution.
To start, Google instructs you to “add a <loc> element specifying a single URL.” Then, add “child <xhtml:link> entries” for every language and location of the page (including itself, of course).
Check Google’s full list of sitemap rules for more information.
Between those three methods, you’re sure to find one that’s convenient for you and aligns with your goals.
How to Check Your Hreflang
So, you’ve added hreflang tags to your site—wonderful! But now, how can you go about checking to make sure that they’re doing what they’re supposed to?
Fortunately, there’s a bevy of free hreflang tools designed to help you check your tags for accuracy and keep them in working order.
We recommend checking out these options:
- Merkle’s hreflang Tags Testing Tool;
- SISTRIX’ hreflang validator;
- Weglot’s Hreflang Checker; and
- Google Search Console’s international targeting report.
And if you’d like help creating flawless hreflang tags from the get-go, there are free tools for that too. These include:
- Aleyda Solis’ hreflang Tags Generator Tool;
- SISTRIX’ hreflang-generator; and
- Geo Targetly’s hreflang tag generator tool.
If You Have a Multilingual Audience, You Need Hreflang
Make no mistake, hreflang tags aren’t for everyone. As John Mueller has expressed before, if you don’t actually need to provide different versions of your pages in different languages, then it will probably end up being more trouble than it’s worth.
But if there is a sizable portion of your audience that speaks another language or resides in another region, hreflang can enhance the user experience in a way that benefits both your visitors and your rankings.
Image credits
Screenshots by author / March 2022
