What is Hreflang?

Hreflang tags help sites with similar content in multiple languages serve the correct version of the web page to a user based on language and region.

A Guide to Hreflang Tags

If you wish to expand your business internationally, you’ll want to produce content in multiple languages to satisfy global users. However, how do you make sure that your international customers are being served the appropriate content?  Hreflang tags are a method to mark pages that are similar in content, but are targeted toward an audience in a different region or that speak a different language. 

For example, a business might sell the same products in both the United States and Japan. In this example, if a user were Japanese, but the English page was ranking for their query, the business would want the search engine to point them toward the Japanese version instead. That is where hreflang tags come in. These tags help point users to the most appropriate version of the content, filtered by language or region. 

What Is Hreflang?

Hreflang is an HTML attribute that is used to specify language and location of web pages. If you have many lingual versions of the same page, these attributes can ensure that the user is being served the correct web pages from the search engines. By using the hreflang tags, you're telling search engines like Google about the variations in the pages. 

Every country and language has its own hreflang attribute, which can be helpful when you have content aimed at different locations with the same language. For example, if you have pages that are targeting English speakers in the U.S., the U.K., and Australia, your code would look like this, respectively:

  • En-us targeting English speakers in the U.S.;
  • En-gb targeting English speakers in the U.K.;
  • En-au targeting English speakers in Australia. 

However, there could be some English speakers that are not targeted by these codes. In that case, using just the language attribute would suffice. That way, every user searching in English would have access to the web page.

Hreflang Tags and SEO

There are a few ways that hreflang tags help search engine optimization (SEO) strategies:

  • User Experience: If users don’t see content in their preferred language, they won’t have a good experience on a site. By using these tags, you ensure that the user has a better experience on your site, which could result in a lower bounce rate. This means you could ultimately rank higher in the search engine results page while increasing lead generation.
  • Duplicate Content: Search engines tend not to look favorably at duplicate content. These tags can make it clear that having multiple copies of important pages isn’t actually duplicating the original, but is supporting different languages or other regional elements. For instance, the U.S. and the U.K. have a very similar language structure, so the only difference between two product pages might be the currency displayed for the prices. Search engines might miss the differentiating factor and mark it as duplicate content. When you add the hreflang tags, it tells the search engines that the URLs are in fact different. 
  • Rankings: Besides ranking higher from user experience, pages that are connected by hreflang tags can also piggyback off each other’s rankings. This way, your content marketing strategy benefits your site and users regardless of the region.

Translating web pages for your different audiences can take time and you’ll want to make sure that your audiences are getting the right content. Hreflang tags help search engines understand which content should go to which user as well as the relationship between the translated pages.

How to Use Hreflang Tags

To properly utilize the hreflang tag, it’s important to know how to construct one and which rules to follow. Otherwise, the search engines could disregard your tags and you could miss out on delivering the correct content to your audience.

Find the Correct Attribute

Each attribute is two-part: 

The end result should look like this:

  • Da-gb, which targets Welsh speakers in the U.K. 

While the search engines can normally understand small mistakes with the attributes, it’s important to ensure you are using the right one just in case. 

Add a Return Link

Hreflang tags are a two-way street, meaning that each URL needs two tags — one to point to the other language and one to point to itself. This helps prove to search engines that you have control over both pages and that they are related to each other. It also establishes that there is a single original version of the page. So, if you have a page with a hreflang tag that points to a Japanese page, the Japanese page must point back to the English page.

Use Self-Referencing Attributes

According to Google Support, each language version must list itself as well as all other language versions. Basically, every page must point back toward itself using the hreflang tag. Self-referencing attributes look like this:

  • <link rel="alternate" href="http://example.com/en-gb/" hreflang="en-gb" />
  • <link rel="alternate" href="http://example.com/" hreflang="en" />
Want to learn more?
Visit our blog to learn more about search and search engine optimization.
TO THE BLOG
SEO Keyword Research

SEO Keyword Research

Read our comprehensive SEO keyword research guide to learn how you can get your web pages to show up higher in the SERPs.

 Link Building Guide

Link Building Guide

Check out our ultimate link building guide to learn how to earn powerful backlinks to empower your web content in search.

How to Add Hreflang Tags

Before adding hreflang tags to your site, you’ll want to think about how and where they should go. Placing them strategically can make a big impact on how users interact with your site. It’s important to note that you only need to pick one of these methods. 

HTML Link Elements

If you do not have a site map, one way to add these tags is to put them in the <head> section of every page, which looks like this:

  • <link rel="alternate" hreflang="lang_code" href=”url_of_page”/>

Each page variation must include the link elements in the <head> including itself. So, if you have 80 pages with different languages, that means you’ll have to add 80 link elements to every page. Larger sites could experience a longer load time. 

HTTP Headers

Some pages won’t allow for HTML link elements, like PDFs. However, they are implemented similarly to the link elements. A standard hreflang tag in a PDF looks like this:

  • <http://es.example.com/document.pdf>; rel="alternate"; hreflang="es"

This method works on any non-HTML content, not just PDFs. However, you could run into the same problem in the previous method, as all headers need the same tags, which could slow down the load time for the page.

Hreflang Tags in a Sitemap

The last method consists of using hreflang tags in XML sitemaps. By using the xhtml:link attribute, you can add an annotation to every URL. There are two benefits to using this method:

  • Users won’t be affected by a sitemap;
  • A sitemap is simpler to change than various pages. 

The downside to using hreflang tags in a sitemap is that it’s time consuming. A markup for one URL with two languages looks like this:

<url>

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

<xhtml:link rel="alternate" hreflang="en" 

href="http://www.example.com/" /> 

<xhtml:link rel="alternate" hreflang="en-au" 

href="http://www.example.com/au/" /> 

Considering each URL needs the hreflang tag, imagine the above block doubling in size. Though there would be more output needed for this method, from a user standpoint, it seems more beneficial.

Hreflang Tag Best Practices

To make the most out of hreflang tags, there are some best practices to consider. 

X-Default

This is an hreflang attribute that specifies a certain page as the “default page.” This happens when a user does not fall under any language category you’ve tagged, so they are directed to the default. The x-default attribute looks like this:

  • <link rel="alternate" href="http://example.com/" hreflang="x-default" />

Even though the default attribute would direct users to the webpage with the main language, it’s good practice to have both tags so the code is easier to read. For example:

  • <link rel="alternate" hreflang="en-gb" href="https://example.com" />
  • <link rel="alternate" hreflang="en-it" href="https://example.com" />
  • <link rel="alternate" href="http://example.com/" hreflang="x-default" />

This shows that you have one page targeted toward English speakers in the U.K. and one page targeted toward English speakers in Italy. If there are users that are searching for the same query, but do not speak English, they would be directed to the default version, which is the English U.K. page.

Other Considerations

Other considerations when using hreflang tags are:

  • Alternate URLs must be fully qualified, meaning the link element needs to include https;
  • It’s strategic to include a catchall URL for an unspecified area that uses the same language;
  • Alternate URLs do not need to be in the same domain;
  • If two pages don’t point to each other, the tags will be ignored. 

Expanding your business internationally is a big step, and hreflang tags can help direct users to the correct content on your site. Though hreflang tags sound easy, they can become complicated based on how many pages you need to target. By using the correct attributes and implementing best practices, you can avoid any issues with hreflang tags and successfully reach your audience with the correct content.