The Ultimate Guide To Hreflang Tags: What It Is & How to Implement It?

Have you heard of Hreflang tags? 

Maybe you have, maybe you haven’t. Either way, they’re something that’s becoming more and more important on the web these days. 

Hreflang tags allow search engines to show your content in a native language, depending on the visitor’s location. 

Let’s dive in and find out in this blog by expert website developer on what Hreflang tags truly are and the practical ways you can use them.

So let’s get started.

 

What are hreflang tags?

Hreflang tags are a way for search engines to understand the relationship between pages in different languages or regions.

Hreflang tags should be used if your website has multiple language versions that are targeted at specific countries or regions. For example, if you have an English version of your site and a French version, you would use hreflang tags to tell Google which pages to show when someone searches for “red shoes” in France. Similarly, experts at a website development company will tell you that if you have a UK version of your site but want people in Australia to see it when they search for “red shoes”, then you would use hreflang tags to do this too.

 

SEO benefits from hreflang tags?

So why are we even talking about hreflang? I’ll tell you. There are two key reasons you should use it from an SEO standpoint.

First of all, if you have a version of a page that contains locale-specific information, you want users to arrive on that version of the page. Because providing the correct language and location-dependent information improves a user experience and thus leads to fewer people bouncing back to the search results. Higher ranks are achieved when fewer people return to the search results.

The second reason is that hreflang allows you to avoid duplicate content. If your site has the same content in English on different URLs aimed at the UK, the US, and Australia, but with only small differences like price and currency, Google may misinterpret your intent and flag it as duplicate content. With hreflang, though, you make it very clear to the search engine that there is only one page with translated content for a particular language or region.

 

When should you use self-referencing hreflang?

As with all things, SEO, understanding the rules and best practices for using hreflang is essential. For example, if you have a single page that needs to target multiple languages, you should use self-referencing hreflang.

This means that instead of having multiple pages targeting different languages – one page for English speakers, one page for French speakers and so on – you have one page with multiple sitemaps targeting different countries within each language group. This allows Google to determine which version of your site is best for each user based on their location.

 

Should you use the hreflang attribute?

If you’re running a multi-language website, you need to make sure that search engines can crawl and index all of your content.

One way to do that is by using the hreflang attribute in your code.

The hreflang attribute tells search engines which language a page or piece of content is written in.

As experts at web development company will tell you that this is especially important if you have similar pages but are based in different languages or countries. For example, if you have an English version of your site and a German version, it’s important that each has its own URL and gets indexed separately by Google so they don’t interfere.

 

Technical implementation – the basics

Regardless of which type of implementation you choose, three basic rules apply.

 

• Valid hreflang attributes

The hreflang attribute is an HTML element which allows you to specify the language and region of your content so that search engines can serve it correctly to users. The value can be an ISO 639-1 code (e.g., “en”, “fr”, “de”), or a language code with an optional language-region combination separated by hyphens (e.g., “en-US”).

A page can contain multiple hreflang attributes. There are also other ways to specify the language and region for your content, such as using HTTP headers or meta tags; however, these methods are not as widely supported by search engines as the hreflang attribute.

 

• Return links

The second basic rule is about return links. For each URL, you need to provide return links to all other URLs, and these links should point to the canonical versions of those pages; more on that below. If you have 80 languages, that means you’ll need hreflang links for 80 URLs — there’s no getting around it.

 

• hreflang link to self

Another important rule is about self-links. They may feel weird at first, just as those return links might feel weird, but they are essential, and your implementation will not work without them.

 

Implementation choices

There are three ways to implement hreflang:

• using link elements in the <head>
• using HTTP headers
• or using an XML sitemap.

Each has a purpose, so we’ll go over them and decide which one to use. 

• HTML hreflang link elements in your <head>

The first way to implement hreflang annotations is with HTML link elements. You’ll add code like this to the <head> section of every page:

<link rel=“alternate” href=“https://www.example.com/” hreflang=“en” />

<link rel=“alternate” href=“https://www.example.com/en-gb/” hreflang=“en-gb” />

<link rel=“alternate” href=“https://www.example.com/en-au/” hreflang=“en-au” />

 

As every language on your site needs links to every other language, these implementations can become quite extensive and slow down your site. If you have twenty languages, adding twenty link elements would mean 1.5KB on every page load that no user will ever use but still needs to be downloaded. On top of that, your CMS has to do multiple database calls to generate all these links. This markup is only for search engines. I wouldn’t recommend doing this for larger sites as it adds far too much overhead.

 

• hreflang HTTP headers

A second method of implementing hreflang is via HTTP headers—information that is sent from a server to a browser and cannot be seen by humans. HTTP headers are for all non-HTML content you want to optimize; link elements work well for HTML documents but not for other types of content because they can’t be included. Here are some examples of HTTP headers using the same language as above:

 

Link: <https://es.example.com/document.pdf>; rel=”alternate”; hreflang=”es”,

      <https://en.example.com/document.pdf>; rel=”alternate”; hreflang=”en”,

      <https://de.example.com/document.pdf>; rel=”alternate”; hreflang=”de”

 

The number of HTTP headers in a request is similar to the number of link elements in your <head>: it can slow down the page load speed.

 

• An XML sitemap hreflang implementation

The third option for implementing hreflang is to use the xhtml:link elements in an XML sitemap. This uses the xhtml:link attribute in XML sitemaps to add the annotation to every URL. The markup is much longer than you would use on a page’s <head> with <link> elements. For example, this markup is needed for just one URL with two other languages:

 

<url>

  <loc>https://www.example.com/uk/</loc> 

  <xhtml:link rel=“alternate” hreflang=“en” href=“https://www.example.com/” /> 

  <xhtml:link rel=“alternate” hreflang=“en-au” href=“https://www.example.com/au/” /> 

  <xhtml:link rel=“alternate” hreflang=“en-gb” href=“https://www.example.com/uk/” />

</url>

 

It has a self-referencing URL as the third URL, specifying that this specific URL is meant for English speakers in Great Britain, and it defines two other languages. Both different URLs must now be included in the sitemap, which looks like this:  

 

<url>

  <loc>https://www.example.com/</loc> 

  <xhtml:link rel=“alternate” hreflang=“en” href=“https://www.example.com/” /> 

  <xhtml:link rel=“alternate” hreflang=“en-au” href=“https://www.example.com/au/” /> 

  <xhtml:link rel=“alternate” hreflang=“en-gb” href=“https://www.example.com/uk/” />

</url>

<url>

  <loc>https://www.example.com/au/</loc> 

  <xhtml:link rel=“alternate” hreflang=“en” href=“https://www.example.com/” /> 

  <xhtml:link rel=“alternate” hreflang=“en-au” href=“https://www.example.com/au/” /> 

  <xhtml:link rel=“alternate” hreflang=“en-gb” href=“https://www.example.com/uk/” />

</url>

 

As you can see, we’re only changing the URLs in the <loc> element because everything else should be the same. Each URL has a self-referencing hreflang attribute and returns links to other URLs with this method.

XML sitemap markup such as this can be verbose: it takes a lot of output to do this for many URLs. An XML sitemap implementation benefits in that it doesn’t burden your regular users with this markup. You don’t add extra page weight, and you don’t have to generate the markup on each request.

An expert at leading website developers in Mumbai will tell you that the other benefit of adding hreflang tags via an XML sitemap is that it’s a lot easier to change them than all the pages on your site. This way, you don’t need to go through large approval processes, and maybe you can even get direct access to the XML sitemap file.

 

Testing your hreflang setup

The best way to test your hreflang is to use the Google Search Console. This tool gives you access to all of Google’s data on the pages and domains you’ve submitted.

If you’ve set up your hreflang tags correctly, it should show a green checkmark next to each URL. If not, then you’ll see an error message explaining what needs to be fixed.

You also want to make sure that all of your URLs are tagged with hreflang and that they’re pointing to the right languages and countries as specified in your webmaster tools account.

 

What are x-defaults?

X-defaults are a way to specify the language of a document that does not include the lang attribute. This is useful for documents that may be accessed by users who don’t have JavaScript enabled or by search engines that don’t support lang attributes in HTML. They can also be used when you’re using rel= “alternate” hreflang annotations but don’t want to use any specific language code.

In most cases, you’ll want to use hreflang=” x-” rather than x-defaults because it’s more descriptive and gives you more control over what your site says. However, if you just need to indicate that your content has alternative versions in different languages (without specifying which one), then x-defaults could be useful.

 

How to Test Your Website for hreflang Issues 

Even if you do your best to keep up with hreflang attributes, some mistakes will probably slip through the cracks. For that reason, it’s important to regularly audit your website for hreflang issues and fix them as soon as possible.

The simplest way to do this is to use Ahrefs’ Site Audit tool to crawl your website. 

Site Audit is a cloud-based crawler that crawls all the pages and URLs on your site, checking for hundreds of SEO-related issues, including those related to hreflang.

 

Here are the nine hreflang errors Site Audit may find and how to fix them:

• Self-reference hreflang annotation missing

This warning is triggered when one or more pages do not contain a self-referencing hreflang tag.

As Google states, “each language version must list itself as well as all other language versions,” so you should use a self-referencing hreflang tag whenever you add a hreflang tag to your site.

Review the affected pages, then add self-referencing hreflang tags using your chosen method.

 

• Hreflang annotation invalid

This warning is triggered when one or more URLs are flagged as having invalid language or locale codes in their hreflang tags.

Search engines ignore the hreflang tags if the tags are not valid, which means that they may not show search engines the most appropriate version of your page. This is bad for SEO because it means that users might see pages from a different country instead of yours.

Review the affected page and check the “Is valid hreflang” column to see which language or language-location codes are invalid. These should be replaced with hreflang tags that use valid language or language-location code formats.

 

• A page is referenced for more than one language in hreflang. 

 This warning occurs when one or more URLs are referenced in hreflang annotations that have multiple languages listed.

<link rel=”alternate” hreflang=”en” href=”http://example.com/page.html” />

<link rel=”alternate” hreflang=”de” href=”http://example.com/page.html” />

Each piece of content should only be set to serve one language or language-location. Having two or more hreflang attributes will confuse search engines, and they may end up ignoring both of your references.

Check the affected pages, then inspect the URLs that reference the page in their hreflang attributes to see if they contain errors. If you find an error, remove the incorrect hreflang attribute to leave only one correct attribute per language.

 

• Missing a return tag in the hreflang attribute

This issue occurs when the website is missing return links for pages declared in hreflang annotations.

Hreflang tags are bidirectional (i.e., if page A links to page B in hreflang annotations, the link from page B to page A must appear as well).

Review the pages that were affected by the change. Add bidirectional hreflang tags if necessary.

 

• Hreflang to non-canonical

This issue occurs when one or more pages on your site reference a non-canonical URL in their hreflang tags.

You can use the rel= “alternate” hreflang= “x” attribute to instruct search engines to show the translated (localized) version of a page while using the rel= “canonical” attribute to flag that this is not the authoritative (canonical) version. These two attributes contradict one another and confuse search engines. 

Examine the affected pages to ensure that the canonical URLs are correct when hreflang annotations are present.

Alternatively, if you discover a rogue canonical tag on a page, remove it to ensure that the hreflang attribute is properly understood and followed by search engines. 

  

• Hreflang and HTML lang mismatch

This issue is triggered when there’s a discrepancy between the hreflang attribute and the HTML language attribute for one or more URLs.

Google doesn’t use the HTML attribute language, but other search engines and browsers do. It is critical to keep these two characteristics consistent with one another.

Review the affected pages, ensuring the language is consistent with the declared hreflang attribute.

 

• Hreflang to the broken page

This issue happens when one or more of your pages have broken URLs in their hreflang annotations.

Google and other search engines cannot show their users content that doesn’t exist. Consequently, hreflang attributes pointing to dead pages are unlikely to be noticed by Google and other search engines.

Review your hreflang annotations. Make sure that they all link to working pages.

 

• Missing hreflang annotation on the X-default.

This issue arises when no x-default hreflang annotation exists on the page.

Although the x-default hreflang attributes are optional, Google suggests using them to “control the page when no languages match.”

Use x-default tags for all hreflang annotations and use them consistently across your site as an SEO best practice. 

 Review the pages that are using the hreflang attribute. Make sure each one has a non-specific URL for its “x-default” hreflang attribute and points to a page not specific to one language or region.

 

Conclusion

As you can see, there are many things to remember when adding hreflang tags. These will help you implement hreflang on your site. It’s not a simple thing, but if you do it right, it will benefit your SEO campaign and increase customer loyalty. Remember that implementing hreflang is only half the battle, as you’ll also have to test it and make changes as needed.

The point is that hreflang allows you to reach people in the way that best suits them, no matter the language they speak or where they live in the world! Now to make people’s use experience and increase your search engine ranking you also need to take care of broken links, to know more about it check out our blog broken links: how to find & fix them? 2022 descriptive guide.