Put simply, hreflang is a bit of HTML code which helps you to ensure that if you have more than one version of a page in different languages, users will be shown the most relevant version to them based on the language they speak.
Hreflang can also help you to tell search engines the most relevant country audience for your web pages, which helps the search engine to show your site to the right people.
This hreflang guide will explain hreflang in more detail, talk you through common issues faced when using the hreflang tag and what you can do to resolve them, and show you examples to further your understanding. We’ll also share some of our hreflang top tips with you!
As we covered, the hreflang code allows you to specify the language and/or region of your site’s pages. By doing this, you help the search engine to show the most appropriate version of your page to different users. But what does the hreflang tag look like? And how do you use it?
For the purposes of giving an example, we’re going to use the well-known international watch brand, Rolex, to demonstrate how hreflang looks and how it’s implemented.
On a basic level, the hreflang tag on Rolex’s main landing page looks like this in the HTML:
Here’s a breakdown of what each section of this code means:
Below, you can see how a few of the hreflang attributes are assigned to Rolex’s main landing page appear in the code (we haven’t included them all - there’s lots of them!). As shown there are different languages specified so that Rolex can appeal to users in these markets in their language and boost their international SEO targeting efforts. You don’t need to know all of the hreflang attributes for different languages, if in doubt just Google it! However, later in this blog, we cover where to find the language and country codes that should be used in hreflang tags.
You might notice that the third and fourth lines of code here target a locale (i.e. they also specify a region). Not only have Rolex specified the language to be English, but they have also specified that these pages should be shown in the US (“en-us”) and Canada (“en-ca”). You don’t have to target a locale, this is optional and usually only used when targeting specific language speakers in a specific region.
Everyone makes mistakes, and they’re easy to make when you’re working in HTML and/or other coding languages. Just one slip of a finger to the wrong letter can make everything break…we know the struggle.
But rest assured, this isn’t the case with hreflang tags. If you make a mistake in your hreflang your site isn’t going to break, and your SEO rankings won’t be affected. Worst case scenario is that the search engine will ignore your hreflang tag if it is incorrect, or your user will be sent to the wrong page.
Here are three common mistakes to be aware of:
This mistake is quite common, so you’re not alone if you do this! However, it can cause your site to have a high bounce rate if users who weren’t the intended audience find their way to your site. To avoid this, you should familiarise yourself with, and check your href tags against, the ISO 639-1 language codes and the ISO 3166-1 Alpha 2 region/country codes to ensure you correctly include the language/region you intend to use.
Countries that tend to be incorrectly used the most frequently are the United Kingdom where “uk” is commonly used instead of the correct “gb”, and “de” for Denmark instead of “dk” (“de” is the code for Germany).
Search engines, like Google, make use of “x-default” hreflang tagged pages when there are no other pages on your site that target specific languages or locales. Without an “x-default” hreflang, the search engine doesn’t know where to send users who don’t fall into the categories of your specified hreflangs.
For example, the Rolex site has hreflang tags for English, French and Italian but none for Spanish, so their Spanish users will likely be sent to the “x-default” page because there isn’t another page that’s as relevant for users in Spain. As per the name, “x-default” is the tag you should assign to the default page that users with language/country combinations which haven’t been specified in any hreflang will be directed to.
It’s always best practice to include your “x-default” hreflang tag before you begin adding hreflangs that specify languages and regions. By making it a habit to do this at the start, you’re less likely to forget your default. You can see on the example that Rolex has included their hreflang=”x-default” first before continuing to specify languages/regions.
Put simply, this mistake is caused by not having identical hreflang tags on each of your web pages on your site. To fix this issue you can access Google Search Console and navigate to the International Targeting report. Here you’ll find the “Language” tab option where you can see if any return tag issues are flagged for any specific pages so that you know where to head to fix the problem.
We believe short and sweet can be the best way of learning new things without having information overload! So here are a few of our top tips for using hreflang like a pro:
So we’ve covered the basics such as what hreflang is and what a hreflang attribute looks like so that you know where to start with constructing your own. We’ve also given you recommendations for specific resources that you can use to level up your hreflang game like hreflang.ninja. Crucially, we’ve also covered the three key mistakes made by many when implementing hreflang to their sites:
Looking to move your SEO game on with some expert help? Get in touch, it would be great to hear from you!
It’s time to move the game on.
To find out how we can help you take your business to the next level, contact our friendly and expert team today.
1 trees planted... so far