What is Hreflang?

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! 

Hreflang explained further!

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:

  • link rel= “alternate” means that you’re stating there’s an alternative version of the particular page
  • hreflang=”X-Default” means that this particular page does not specifically target a language or location. If Rolex were targeting French users, “X-Default” would be replaced with “fr”. 
  • href= “https://www.rolex.com” specifies which URL you’re indicating the language/region for

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.
 

3 common Hreflang mistakes and how to resolve them

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:

#1 Incorrectly specifying languages and/or countries

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). 

#2 Not including an "x-default" Hreflang tag

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. 

#3 Not including return tags

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. 

3 quick Hreflang top tips

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:

  1. Hreflang tags can be put in one of three places: HTML tags, your Sitemap, or your HTTP headers but this is less common as it’s mainly used for non-HTML content such as PDFs. 
  2. There are tools online where you can double-check that your hreflang tags are correct! We recommend hreflang.ninja because it’s simple and quick to use. 
  3. You can use more than one hreflang on a page if you’re trying to tell Google that it’s for users speaking more than one language and/or in more than one location. 

Key takeaways 

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:

  1. Not specifying language and/or country specifically in the hreflang attribute.
  2. Not including an “x-default” hreflang tag. 
  3. Not including return tags. 

Looking to move your SEO game on with some expert help? Get in touch, it would be great to hear from you!

MEET THE AUTHOR.

blog-post-detail_lucymae

MEET THE AUTHOR.

LUCY MAE ANDERSON

Lucy’s varied role as a Digital Marketing Executive makes her excited to come to work in the morning. She loves using her knowledge of Digital theory and putting it into practice to deliver her work and experiment with new ideas along the way.

Particular areas of interest for Lucy are user experience (UX), social media marketing, and researching the psychology behind buyer behaviour. 

More about Lucy
Square Pink

Let’s talk.

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.

TRUSTED.

googlepartner-2022-footer
bima-2022
the_drum_logo
iso_logo

RECOGNISED.

chipshop-finalists-2022-footer
drum-search-winners-22-footer-1
culture-shortlist-2022
paid-media-shortlist-2022
footer-european-search-finalists-2022
footer-drum-search-finalists-2022
kicc-winner-2021
award_logo_uksa_winner2020_footer
award_logo_drumsa_finalist_2020_footer
wirehivebuos_footer
award_logo_uksa_winner2019_footer

GREEN.

1 trees planted... so far