International SEO: What's the Hreflang Attribute All About?

Are you thinking of how to expand your business globally?

For established businesses looking to grow their business overseas, international SEO can be tricky. Your current SEO practices might be doing well domestically, but does using the same techniques translate into international success?

As noted by Forbes, SEO takes time, and most SEO firms will quote between 4-6 months before the results “start” showing.

Therefore, although your business’s website might have high domain authority within your own country, it may take longer for the same results to appear for the international version.

This is where the hreflang attribute comes into play, a vital technical SEO component, that will increase your chances of success when launching into new countries.

The following guide will you an overall idea as to what the hreflang attribute is and why it matters – followed by common mistakes and hreflang best practices.

What Is Hreflang?

“Hreflang is an HTML attribute (a snippet of code) that’s added to a webpage’s HTML document.” It tells Google the regional targeting and language of a webpage or URL so that Google can display the correct webpage in the search results for the user.

• First Example: A website might have two versions – a US version and a Spain version. Adding the hreflang attribute recommends Google to display the US version to US-based users, and the Spain website to users based in Spain.
• Second Example: A company that values the power of multicultural markets and provides localized options for the user of a country. A US company targeting the Chinese and Hispanic markets within the US.
• Third Example: For legal reasons like Canadian companies with offices in Quebec, they must offer their Quebec users a French experience in addition to English for the rest of Canada. 

Where Else Can You Put an Hreflang Attribute?

There are three ways to implement the hreflang attribute:

1. In an HTML Document – As briefly mentioned above, the hreflang attribute is added within the <head> tag of an HTML document. This is the easiest option, but may not be suitable for larger websites, often resulting in slower loading times. This method can also be slightly more involved when it comes to page maintenance – pages that are added or removed will require updating of the hreflang tags.
2. Within the HTTP header – Primarily used to documents such as PDFs, as there is no HTML. “This method is similar to the HTML document, and can severely impact the loading speed of larger websites.”
3. Your website’s XML sitemap – If you do have a sitemap on your website, then this method is the most efficient way to implement the hreflang tag. Since it’s just one file, making changes are typically easier than having to do this on multiple HTML documents, as would be the case with the previous two methods.

Note that only one of the above methods above should be used when implementing the hreflang attribute.

What Does the Hreflang Attribute Look Like in an HTML Document?

The structure of the hreflang attribute should appear as below:

<link rel=”alternate” hreflang=”lang-code” href=”https://examplewebsite.com” />

The “lang-code” is where you would input the language and country code i.e. for the US this would be “en-us”, and the link would be changed to the corresponding URL.

<link rel=”alternate” hreflang=”en-us” href=”https://us-examplewebsite.com” />

It’s a simple bit of code, however, when implementing the hreflang syntax across multiple pages on large websites, it gets complicated and messy, fast.

Keep in mind that not all search engines accept the hreflang attribute. The hreflang attribute works with Google, Yahoo, and Yandex but not with Bing or Baidu. So this should also be something to consider when thinking about your target market. Whilst Google might be the most popular search engine in the US, Baidu is the top choice in China.

Examples of When to Use the Hreflang Attribute:

According to Google, here are examples of when indicating page variations is recommended:

• Your website is translated into multiple languages

• Your website has regional differences in one language, but with content that is nearly identical i.e. English language content that’s targeting users in the US, Canada, GB, and Ireland – prevents Google from flagging up your website for duplicate content

• The main content of your website is in one language, but the site’s template is translated i.e. the navigation and footer.

Why Does It Matter for Companies Targeting Markets in Different Countries?

According to a survey, around “72.4% of consumers said they would be more likely to buy a product with information in their own language”. That’s a huge factor if you want to succeed in expanding your business on a global scale.

Language and conversions are important reasons for prioritizing hreflang, however, it’s not the only way to indicate the language and geo-targeting of a webpage.

So, what’s the big deal?

What sets the hreflang attribute apart is that helps search engines to understand the relationship between different language alternatives of a page. To put it in different terms is a way to create a powerful link that transcends language and location. In order to be able to create that correlation between languages, web pages must be cross-referenced. This means that pages must point to each other.

Going back to the example of the website that has both a US English version and a Spain Spanish version: If the hreflang attribute is put on the US page pointing to the Spanish version of the page, then this must be reciprocated on the Spanish page. This means that the Spanish version of the webpage must also have an hreflang attribute pointing back to the US English page. You can’t just have the hreflang attribute pointing from one page only.

How Does This Affect your website’s SEO?

Suppose you have a webpage in English that ranks highly on Google SERPs in the US, and the same webpage in Spanish but without the hreflang.

You might think that since the English version of your page ranks highly, the Spanish page would also do well on Spanish Google SERPs. Unfortunately, this may not be the case, and that is when using the hreflang attribute becomes useful.

Using the hreflang attribute tells Google that the two pages are in fact similar, resulting in shared ranking signals. So if a user were to search for a term that results with a high-ranking English page, and then later on a Spain user searches for the same term – Google could promote the Spanish language version considering the ranking signals from the English version of the page.

In essence, hreflang recommends Google that since they already understand and know this page consider its value for the specific market on the attribute.

What Are the Most Common Mistakes and Best Practices When Deploying the Hreflang Attribute?

What makes implementing the hreflang attribute so difficult? The larger the website the more complex implementation becomes, prompting the need to calculate a link graph in order to keep track of everything.

The most common mistake is related to people forgetting to cross-reference – in other words missing the return links. This results in Google completely ignoring the linked pages.

Another common problem is using the wrong language and region codes (the region is optional). The language code should be in “ISO 639-1 format” and the region code should be in “ISO 3166-1 Alpha 2 format“. For example, the official country code for the UK is “GB” and not “UK”.

Incorrect syntax when writing the hreflang attribute is another issue that tends to appear from time to time. To avoid this:

• Always put the language code first, such as “en-us” and not “us-en”

• Only use a hyphen (no underscores or other symbols) to separate the language and country code

• And finally, language codes can be used on their own, but country codes can’t i.e. “en” is allowed, but “us” isn’t allowed

How to Debug Hreflang Errors (Google)

For general problems, using Google’s International Targeting report is an easy way to debug. Be aware, that you may need to give Google enough time to crawl your pages. You should be able to view any errors on the report generated, which can be accessed on the “Language” tab within your Google console.

Now that you’ve had a taste of what the hreflang attribute is capable of, it all depends on the capacity of your dev team and where your marketing team’s strengths lie. Traditional SEO has evolved and become increasingly technical in order to keep up with search engine requirements.

And with international SEO added into the mix, educating and getting up to speed will take much time and resources.

So What Steps Should You Take Next?

Opportunities disappear quickly within a globalized economy, and to win you need to act fast. Although expanding your business overseas is an exciting opportunity, new territory comes with new challenges.

Do you still have questions about the hreflang attribute? Let’s chat, I’m a senior international SEO consultant and have dealt with many of the intricacies of implementing the hreflang attribute?