We know – the word looks and sounds like gibberish, but its actually a very powerful attribute for websites that have content in multiple languages and cater to different parts of the world.
Although hreflang is a simple concept to understand, there is a contrast between knowing what it is versus making it work best for your site.
Most webmasters struggle with hreflang implementation and often more than not, focus on implementing Hreflang where it’s not needed most.
Don’t be put off by the intimidating name, hreflang is used by millions of websites to great success and by the end of this guide, you’ll no longer be scratching your head in confusion.
Here’s what you’ll learn in this Endpoint Digital post:
Contents
What Is Hreflang?
Without getting too technical, hreflang is a simple HTML attribute that allows you to specify the language and the relevant geographical location for a page.
To help with understanding, we’ll break down an entire hreflang tag and explain each part.
<link rel="alternate" href="https://example.com/alternate-page" hreflang="x" />
- link rel = ”alternate”. This is referring to the page being an alternative of the canonical (main) version.
- href = ”https://example.com/alternate-page”. The alternate page’s URL and where it can be found.
- hreflang = ”x”. This would be the language specified, so you would have ”en-au” or ”en-gb” for different spelling variations.
If you’re wondering why I specified ”en-gb”, it’s because the language attribute needs to be in ISO 639-1 format.
Having this meta tag is incredibly vital if you have multiple versions of the same page in different languages as Google won’t know how to accurately serve the most relevant page for the user without hreflang being specified.
As we’ll mention several times throughout this post, user experience is a core part of why hreflang is so important.
When we google ‘playstation website” from Australia, we’re presented with the English page specified for our location.
Alternatively, when we google the same query from The Netherlands, we’re presented with the Dutch variation.
The concept is very easy to understand. You specify the content on your website in a certain language for a particular geographical location using a hreflang tag and voila, you’re now helping users get access to content in their native tongue.
If you’re still confused, don’t worry. Google Webmasters released a helpful video that may simplify the process for you.
Why Hreflang Is Important
Generally, the most renowned answer for hreflang’s use is to improve user experience.
When hreflang is implemented correctly, it tells Google bots scanning the page where to find the most relevant page for a users location and language setting.
Although hreflang is there to help improve user experience, it also helps Google’s understanding of your web pages in a more consistently.
If you’re showing Google what the most appropriate page for that user is, you’re taking the hard work out of the equation. Allowing Google to best decide the correct page for the user is a vital step forward for more consistent search results, as well as a better user experience and lower bounce rate.
There’s also another valuable reason why using hreflang attributes important and it’s to ensure duplicate content issues don’t arise.
Generally, Google doesn’t care about duplicate content despite the enormous amount of speculation surrounding the topic. However, if you have two versions of the same page targeting two different geographical locations, in two different languages, it could confuse Google and they may list it as duplicate content.
This means that Google may only choose to index one version of these pages despite both of them being important and serving an important role for the users who may view them.
For Google to understand a full hreflang implementation, it goes through a three-step process.
- Google determines where it wants to rank a URL
- It will check whether or not the page has a hreflang attribute
- It will provide the user with the most appropriate page (URL) for their location.
Google decides this based on their location and language settings. If you’re bilingual, the order for which language appears first is determined by your language settings.
How Hreflang Impacts Your SEO
If we’ve got this far and the message of user experience isn’t apparent, then we’ll continue to explore this trend.
Almost every Google algorithm change (big or small), or feature release is always to benefit the user’s experience. Using hreflang also helps webmasters clean up their translated pages, but ultimately having these alternate pages served to relevant users is an indirect SEO signal – whether or not you agree is up to you to decide.
We’ve touched on the importance of user experience so many times over the year it’s now ingrained in our minds, but choosing to ignore using hreflang isn’t a good SEO move.
Going through the effort to create translated pages without hreflang, can result in Google showing American content for British users. This is a one-way ticket to bounce city and although bounce rate isn’t a ranking factor, seeing that variable through Google Analytics won’t be a great feeling.
As a side note, you should be tracking the most important metrics in Google Analytics to make sure all aspects of your marketing strategy are being monitored.
We also mentioned the possibility of duplicate content errors. For transparency, it’s not the duplicate content that is the issue – it’s the fact that Google could potentially serve the wrong version of the page to a user and negatively affect their experience.
This is where a basic hreflang attribute solves the problem. Duplicate content isn’t bad and Google doesn’t necessarily care about it, but neglecting to use hreflang and risking a negative user experience is absolutely a cause for concern.
There is a saving grace for users who match for a language that you may not have a page translated for, and that’s x-default as your hreflang specifier.
If you refer to our earlier example of breaking down a hreflang tag: hreflang=”x”, you can see that ”x” is the language specifier, so setting one of your translated pages to x-default makes it the default page for those users.
This becomes your international landing page in which you can ask users to specify their preferred language and location
Here’s an example for good measure.
<link rel="alternate" href="https://example.com/alternate-page" hreflang="x"-default />
Implementing hreflang for several different languages can be a long and tedious process, which we won’t bother to explain. We’ll instead you refer you to a great piece of advice Ahrefs wrote on semi-automating hreflang and simplifying its lengthy process.
When It’s Appropriate To Use Hreflang
A vast majority of webmasters who implement hreflang usually do it wrong for several reasons. Using hreflang should be a proactive approach, not a ‘future preparation’.
Google’s John Mueller recommendation puts into perspective how and when you should use hreflang.
My recommendation would be first to limit the number of pages you create to those that are absolutely critical & valuable — maybe that already cuts the pages you’re thinking about. Think big here; if you’re talking about individual pages within a medium-sized site, it’s probably a non-issue. On the other hand, if you’re considering copying your whole site into 20 languages x 10 countries, that’s something else.
John Mueller. Source.
It’s the kind of approach that is more user-friendly and saves you from wasting valuable time. Creating pages in languages that will likely receive little to no traffic, add no real value and add ‘significant overhead’ is not worth it in the grand scheme of things.
For real-life examples of when to use hreflang, there are several situations where it might apply.
- Forum boards that rely on user-generated content (UGC). The main content of the page is not translated, since real users will write it, but getting to the right version of the forum board would be equally as important.
- If you have translated your entire website into several languages, you need to add hreflang tags specifying the different versions.
- If you have pages in the same language (English) but they are targeting different regions. A lot of countries speak English, so if you have separate versions targeting the US, Australia, Canada and the UK, you need to specify hreflang attributes.
- If you run an eCommerce store and you’re selling products to a wide variety of countries, creating translated pages with different currency conversions for pricing is a good use of hreflang tags.
Using hreflang might not apply in every situation, and creating pages specifically for the intent of hreflang isn’t always a viable option as John Mueller has mentioned.
How To Set Up Hreflang
Setting up hreflang isn’t an overly complicated process, but if you’re not familiar with SEO terminology it can be a little daunting.
You have three options to choose from when deciding how to implement hreflang attributes.
HTML Tags
For HTML based pages (essentially every web page), you’re able to add hreflang tags to the <head> tag of your page. Keep in mind that you’d need to do this to every page.
As we’ll discuss in our next sub-section, each variation of your hreflang page needs to link, or cross annotate to each version.
When you’re adding this HTML tag to each individual page, for which you may have 10-15 variations of, it does slow down backend database calls.
It’s recommended to avoid this hreflang implementation for large websites.
HTTP Headers
This hreflang implementation is generally used for non-HTML content, such as PDFs you may want to translate to other languages.
Link: <http://en.example.com/document.pdf>; rel="alternate"; hreflang="en"
Using HTTP headers to include hreflang tags also brings the same issue – there’s loading overhead that the user will have to endure given each variation of the document has to link back to each other.
It does work relatively normal with webpages but is more commonly used for PDF files and non-HTML content.
XML Sitemap
If you don’t have any experience with an XML sitemap, it’s essentially a reference of all of your webpages for Google crawlers to understand and index to their database.
Using XML sitemap markup to implement hreflang tags works similarly to including hreflang attributes in your <head> tag.
The beauty behind using the xhtml:link attribute is so you don’t need to edit multiple HTML documents each time you make a change, or delete a page. The sitemap will automatically weed them out.
Another benefit is there is no loading overhead for users, so pages don’t suffer speed consequences as a result of this hreflang implementation.
An example of using an XML sitemap hreflang so you don’t pull your hair out with information overload.
For example sake, all of the information is just using ‘example.com’ and if we were implementing hreflang for one page.
<url> <loc>https://example.com.au/blog/alternate-page/</loc> (This is the page in question, let's say it's a blog post.) <xhtml:link rel="alternate" hreflang="x-default" (x-default being the default page for users with no specified language) <xhtml:link rel="alternate" hreflang="en" href=href=//https://example.com.au/blog/alternate-page/ (The same as the default page, but also shown to users with English as their first preference) <xhtml:link rel="alternate" hreflang="es" href=href=//https://example.com.au/blog/pagina-alternativa/ (The page that would be shown to Spanish users, noting that the URL slug is also translated for them to understand) <xhtml:link rel="alternate" hreflang="nl" href=href=//https://example.com.au/blog/alternatieve-pagina/ (The page that would be shown to Dutch-speaking users, noting that the URL slug is also translated for them to understand)
Avoiding Simple Hreflang Errors
There are several errors we’ll discuss to help ensure you don’t fall into the trap of committing the same errors.
Lack Of Hreflang Cross-Annotation
The most common hreflang implementation error is failing to cross-annotate your pages.
Google needs to understand that you have control over both pages and that they directly correlate with each other appropriately.
Self-referential tags are great (listing the original page in the attribute) so you must establish a hreflang link between each version of your translated pages.
Google’s Gary Illyes, in the past, has commented on this being the most common hreflang error by websites with multiple language versions of pages.
Tagging must be reciprocal to enter the hreflang cluster and if it’s not done correctly, Google has stated they will ignore it.
Not Using The Correct Country Code
As we touched on earlier in the article, the values for languages and countries must conform to the ISO 639-1 format for languages and the ISO 3166-1 Alpha 2 format for countries.
It’s understandable in some regards to see this being a very common error, as you would assume your hreflang tag would be hreflang=”en-uk” as opposed to ”en-gb”
This is bad for SEO, as mistyping an ISO code be the difference of whether or not you show French (fr) content to Finnish (fi) speakers or being ignored by Google completely.
Sometimes Google can work it out, but it’s better to be safe than sorry.
Invalid Hreflang Annotation
Hreflang tags aren’t pretty and they’re very tedious to get right, so you need to pay close attention.
Several annotation errors could be down to:
- Putting the ISO country code before the language, as in ”gb-en” instead of ”en-gb”.
It must be language, then country. It’s a simple mistake to make, but one you shouldn’t make or Google will not include it in the hreflang cluster. - Linking to redirected, non-existent or broken pages.
Pages that return errors such as 4xx or 5xx HTTP error codes are bad for your SEO in general, and this extends to hreflang tags.
If you can’t view the page, how can you expect Google to provide the users with the most relevant content to them?
Deciding whether to use a 301 vs 302 redirect depends on the context of why the page has been redirected or removed. - Not using hyphens.
You must distinguish between language and country codes using a hyphen – nothing else. Do not use underscores, full stops, commas, semicolons or any other form of punctuation.
Hreflang Tag Generating Tool
Hreflang is a complicated topic to talk about and some may find it even more confusing to implement.
Rest assured, there’s a few helpful tools out there to help you get started with Hreflang by taking the hard work out of it.
There’s a helpful hreflang tag generator that Aleyda Solis (a very good SEO) has created that allows you to generate hreflang annotations with ease.
The tool will also help you generate the hreflang tags with the correct ISO language and country format.
You have a few options with the tool, you can either have them generated as tags to include in the header of your pages as HTML, or attributes to be used in an XML sitemap you can submit to your Search Console.
Summary
Hreflang is a very powerful tool when used right, and websites catering to different parts of the world can experience real success when implemented properly.
Don’t start creating translated pages that won’t translate to real traffic or be necessarily beneficial for users, the advice we’ll reiterate in the name of John Mueller.
It’s easy to be intimidated by the name but as long as you pay attention and use the best practices, you can’t go wrong.
