International SEO: How to Use the Hreflang Attribute

The hreflang attribute is important for managing different language versions of multilingual websites. With Ryte, you can easily check your implementation of hreflang tags, and detect errors.

Why is the Hreflang Attribute Important?

Google introduced the hreflang attribute in 2011, as an increasing number of websites were operating internationally and offering their services and products globally. Ideally, the content of a website should be provided according to the user’s location, and displayed in the respective language of the browser. This is important for two reasons:

Usability is improved, because the user sees the content in the correct language.
Search engines know which versions of the website to display in the SERPs of each country.

Benefits for SEO

Using hreflang is not a ranking factor, but use of the hreflang attribute can indirectly contribute to SEO. Hreflang means the content displayed is properly targeted to the user. Regional differences such as currencies, spelling, and delivery costs are shown correctly to the user, leading to a reduced bounce rate, increased time on page, and increased conversion rate. This in turn provides positive user signals to search engines.

Internationally oriented websites with different languages strengthen their usability and relevance of the page for users by using hreflang. The hreflang tag is also beneficial to SEO, as it can also help avoid issues with duplicate content, as it indicates to search engines what is the relevant content for different countries.

When do you use hreflang?

If you can answer the following questions with “Yes,” you should use hreflang notations according to Google’s recommendations.

Are the websites’ content identical or nearly identical?
Was the website’s template translated?
Was the website fully translated?
Is there a main site for all visitors?

When using hreflang notation, it is essential to consider bi-directional linking. All equivalent content must be linked, and in both directions.

You can create the hreflang markup with the help of a hreflang generator tool – for example Aleyda Solis’s hreflang generator tool.

How is the Hreflang Attribute implemented?

it is either declared in the <head> section (as mentioned above): <link rel=”alternate” hreflang=”en” href=”http://en.example.com/” />

To clarify between different countries for a website with the same language, you can add, for example -us or -uk: <link rel=”alternate” hreflang=”en-us” href=”http://en.example.com/” />. (It is not compulsory to add the country though.)

It can be in the Response Header:
Link: http://en.example.com/; rel=”alternate”; hreflang=”es”
It can be in the sitemap.xml. More information about this can be found in this guide from search engine land:

Common mistakes with hreflang

Websites should use the ‘hreflang’ declaration to properly identify their various local sites and ensure Google can serve the most relevant language / local version to users searching in that language or from that location. Webmasters need to place the hreflang declaration in a header tag, in the HTTP headers, or within the XML sitemap. When in doubt, refer to the official Google hreflang guidance here.

The setup can be confusing. These are some of the most common errors:

Missing out a reference to the default site – often a webmaster will create a list of hreflang tags that are then applied to the various languages and countries, yet they then forget to add their original language page to the list.
Missing return links – webmasters often leave out the reciprocal link back when setting up hreflang tags. For example, if page A is linking to page B, then page B also needs to link back to page A. If the reciprocal annotation is missing, Google will signal the error in Webmaster Console and may completely ignore the annotation for both pages.
Linking back to the main site’s homepage instead of the direct equivalent page – specific links should point back to the exact equivalent page in the various languages / local versions, but some webmasters botch this and simply link everything back to the homepage. This doesn’t help Google, it fails the requirements laid out for hreflang, and isn’t helpful for users. Although specific hreflang link-backs take time to set up, they are needed. When creating any new content developers and marketing teams need to make sure there is a centralized system all local teams can refer to, and the person creating a new page knows which URL should be referred to in the hreflang. If everybody sticks to this process, chances are mistakes will be avoided.
Linking to non-existent pages – we often see this where web developers set up code that automates the creation of the hreflang tags. The tags may end up referring to non-existent pages, either because the local team hasn’t set up an equivalent page, or they localized the page URL to make it search engine friendly. Teams should either establish a fixed URL format or ensure due diligence is carried out and hreflang errors audited regularly.

Even retail giants like IKEA and Marks & Spencer failed to implement hreflang correctly (or at all!). For example, M&S only link to two local sites from their main homepage, and then they don’t link back from the local site back to the main homepage. Moreover, the UK retail giant has several other local sites, many of which are also in English but are left out from the hreflang declaration altogether. While Google does try to show the appropriate local version, using hreflang correctly would make a big difference to M&S’ organic search presence.

The good news is that some brands do get hreflang right, and reap rich rewards. Look at cloud-based accounting software brand Xero. They have the correct hreflang setup for all their key service pages with one-to-one correspondence and even an x-default tag defined correctly.

How to Check if Hreflang Tags are implemented correctly

If your hreflang tags are not implemented correctly, this can negatively affect SEO, as it is not clear to Google which URL should be shown in each country. A correct hreflang set up is important for an international website. With Ryte, you can easily check your implementation of the hreflang tag. You can find the language report in Website Success under “multilingual settings”. There are three categories:

Languages
Status Codes
Translation Counts

Languages

This category shows all of your analyzed URLs, and to which documents they are referring to. The column “Translations” shows you which translations the HTML document is referring to. For example, the URL https://de.ryte.com/magazine has hreflang tags referring to the English, French and Spanish translations, as well as to the German page itself.

Figure 1: Incoming translations

In the column “Incoming Translations”, you can see which other HTML documents refer to this page as its translation. In this case, there is a mistake in the incoming translations column. As the URL in the list is the English version of the website, all other URLs referring to this document should consequently note this in the language code. If this was the case, the language “English” would be listed in the incoming translation list. However, in this case, the incoming translation to has “German” marked in the language code, which is why it is marked with a red exclamation mark.

How to find missing translations

To find missing translations, click on the most left hand bar “None”. Then you can filter according to the OPR (OnPage Rank) – this is an indicator of the popularity and importance of the page, so if you have any pages with a high OPR and no translation, these should probably be translated.

Translation Counts

The report translation counts shows you the number of translations and incoming translations a particular URL has. Ideally, the number of translations should be identical to the number of incoming translations. If this is not the case, you should dig a little deeper. Sometimes, soft 404 pages account for a wrong number of Incoming translations, or the hreflang tag has been set incorrectly and all sites reference the same URL as their translation.

Tip: Sort the number of Incoming Translations in descending order. This way, you can easily tell if there are any major deviations between both columns. To find more information about each URL, click on the magnifying class to load the inspector.

Status Codes

Similar to the Status Code report of the link targets, this category reviews the Status Codes of the Translations. This report helps you to detect typos or mistakes in the hreflang tag so that you can correct them as quickly as possible to avoid 404 Status Codes.

Figure 2: Status codes

Hreflang filters

As well as the report specific for multilingual settings, you can also analyze the hreflang attribute within the links report. If you click on “Links”, “Overview”, “hreflang attribute”, you are able to see the hreflang language and country for every link of your website. You can then filter according to hreflang attributes that are either “not set,” are “ok”, or have a conflicting country or language.

Figure 3: Hreflang filters

Conclusion

The hreflang attribute is an important part of maintaining an international strategy. It means that users are shown the correct version of your website according to the country they are living in, improving usability. It also helps Google understand your website structure better, therefore helping the search engine optimization of your website. With Ryte, you can find potential mistakes in your hreflang tags, and work out which pages might require translation, helping to improve your website for the better.

Ryte users gain +93% clicks after 1 year. Learn how!

Book a demo

Published on Nov 5, 2018 by Olivia Willson

Olivia Willson

After studying at King’s College London, Olivia moved to Munich, where she joined the Ryte team till 2021. She was previously in charge of product marketing and CRO, and also helped out with SEO and content marketing. When she's not working, you can usually find her outside, either running around a track, or hiking up a mountain.