What Are Hreflang Attributes & How to Implement Them

Ad - Web Hosting from SiteGround - Crafted for easy site management. Click to learn more.

Written by –

What Is the Hreflang Attribute?

Hreflang is an HTML attribute that communicates the language and targeted region of a webpage. It allows search engines to serve the most appropriate version of that page based on the searcher’s country and language preferences. 

Hreflang is an important international SEO concept. It helps ensure that the right audience sees the right webpage.

For example, instead of having the same page compete for users in Spain and Mexico, you can have alternate pages optimized for that country’s language, currency, and more. 

Here’s what it looks like in practice. 

Say you Google “semrush blog” in the US. This is the first result:

Google search first result

Whereas if you’re in Spain, this is what you’ll see:

google search in different locations

What Does an Hreflang Tag Look Like?

Hreflang follows a consistent and straightforward structure. Usually, it looks like this:

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

And here’s what the syntax (computer language) means:

  • link rel=“alternate” means the link in this tag is an alternate version of this page
  • href=“url_of_page” is where you can find the alternate page
  • hreflang=“lang_code” is what the alternate language is

Note: The hreflang tag is a signal, not a directive.Google and Yandex use hreflang attributes. Baidu and Bing don’t. They rely on the content-language HTML attribute

How to Build an Hreflang Tag

To create an hreflang tag, you need to first find the language and country codes you need. And then fill in the blanks. 

Hreflang supports two-letter ISO 639-1 language codes and ISO 3166-1 alpha-2 country and region codes

(You won’t always need the country or region code. But it can come in handy.) 

Let’s say your English blog has been translated into Spanish and Portuguese. The hreflang attribute for an article should look like this:

<link rel="alternate" href="https://example.com" hreflang="en" />
<link rel="alternate" href="https://example.com/es/" hreflang="es" />
<link rel="alternate" href="https://example.com/pt/" hreflang="pt" />

The hreflang attribute on each webpage should include a reference to all the pages that serve as alternates. 

Including a reference to itself. Google recommends self-referencing hreflang in its guidelines

If your hreflang attributes don’t reference all the relevant alternate pages, search engines may ignore or misinterpret your hreflang tags.

Which means:

The reference links in the code snippet for the English article above should appear on your Spanish and Portuguese pages.

But what if you targeted an additional country that also speaks Portuguese? Like Brazil.

(You might want to do that if you’re selling a product in different currencies, for example.) 

In that case, you’d also need to add the country code. 

So, that would look like this, with “pt” being the two-letter country code for Portugal and “br” for Brazil:

Portuguese in Portugal:

<link rel="alternate" href="https://example.com/pt/" hreflang="pt-pt" />

Portuguese in Brazil

<link rel="alternate" href="https://example.com/br/" hreflang="pt-br" />

The syntax here is a bit different. It’s hreflang=“language-country” instead of just hreflang=“language.”

And that’s all you need to do. 

Pro tip: It’s also important to setx-default tags. They indicate the fallback page for users when no other localized version is appropriate. 

X-default tags aren’t mandatory, but they are recommended. 

To implement an x-default tag, add an annotation and set the “href” attribute to the URL where you’d want users to land if your site doesn’t support their language. 

Like this (shown last):

<link rel="alternate" href="https://example.com" hreflang="en-us" />
<link rel="alternate" href="https://example.com/es/" hreflang="es-es" />
<link rel="alternate" href="https://example.com/pt/" hreflang="pt-pt" />
<link rel="alternate" href="https://example.com/pt/" hreflang="pt-br" />
<link rel="alternate" href="https://example.com" hreflang="x-default" />

Where Does an Hreflang Tag Go?

There are three ways to implement hreflang attributes: 

  1. In the HTML head of the page
  2. In the HTTP header (for non-HTML files like PDFs)
  3. In the XML sitemap

1. In the HTML

The most basic way to indicate your alternate pages is in the page’s HTML code. 

Simply add all the relevant hreflang attributes in the <head> portion of the page. 

Remember—each language version of an article must reference itself. As well as all other language versions.

Here’s what the syntax looks like again for each element: 

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

The only real issue with this method is it can be messy and time-consuming. 

For example, every time you translate an article into another language, you have to go back and add another hreflang tag to all versions of it. 

Note: For a large number of hreflang entries, you probably want to indicate your alternate pages via your sitemap. We’ll get to how you can do that in a bit. 

To create or modify hreflang tags in HTML, try using an hreflang tool. 

For this example, we’ll use Aleyda Solis’ hreflang generator tool

Just enter the URL, language, and country for every version of the article you’re working on. 

Select “Tags to include in the head area of the pages HTML” and click on “GENERATE THE HREFLANG TAGS FOR THESE URLS.”

how to use Aleyda Solis’ hreflang generator tool

Then, copy the code and paste it into each page’s <head> tag. 

Aleyda Solis’ hreflang generator tool

HTTP headers are great for implementing hreflang attributes for non-HTML content on your website. 

Like PDFs, for example. 

HTTP header codes transfer data between a server and a client. This code contains information about the date of the request, the referrer, preferred language, etc. 

Note: You can use this method for HTML content, too. But it can add a lot of burden in terms of server requests. So, you’re better off only using it only when strictly necessary. 

The format of the header in HTTP looks like this:

Link: <url 1>; rel="alternate"; hreflang="language code 1", 
<url 2>; rel="alternate"; hreflang="language code 2", …

Here’s what the syntax means:

  • <url x> is the URL of the alternate page related to the locale assigned to the hreflang attribute. It must include surrounding < and > marks.
  • Language code x is the language (or region) code targeted by this page

You must indicate a set of <url>, rel=”alternate,” and hreflang values for every version of the page, including itself, separated by a comma. 

Say you create a PDF document in three versions—one in English, one in Spanish, and one in Portuguese.

Your HTTP header should look like this (for each file): 

Link: <https://example.com/doc.pdf>; rel="alternate"; hreflang="en", 
<https://example.com/es/doc.pdf>; rel="alternate"; hreflang="es", 
<https://example.com/pt/doc.pdf>; rel="alternate"; hreflang="pt" 

3. On the XML Sitemap

The third hreflang implementation method is through your XML sitemap

An XML sitemap is a file that provides search engines with information about the pages on your site. 

So it’s a great way to let Google know of all the language and region variants of each URL. 

It also has one major benefit:

The XML sitemap allows you to make any changes to your hreflang attributes all in one place. 

With the HTML and HTTP header hreflang methods, you have to go in and update multiple files every time you get a blog or document translated to another language. It gets messy. 

To get started, you need to add a <loc> element for each URL. With <xhtml:link> entries for every language and region version of the page. 

Including itself. 

Which means:

If you have three versions of a page, your sitemap will have three entries. One for each URL. And each of those entries will have three identical listings.

If we run with our original example of the English, Spanish, and Portuguese blog, this is what the portion of the sitemap for this blog post will look like:

 <xhtml:link rel="alternate" hreflang="en-us" 
href="https://https://example.com" />
 <xhtml:link rel="alternate" hreflang="es-es" 
href="https://example.com/es/" />
 <xhtml:link rel="alternate" hreflang="pt-br" 
href="https://example.com/pt/" />
 <xhtml:link rel="alternate" hreflang="en-us" 
href="https://https://example.com" />
 <xhtml:link rel="alternate" hreflang="es-es" 
href="https://example.com/es/" />
 <xhtml:link rel="alternate" hreflang="pt-br" 
href="https://example.com/pt/" />
 <xhtml:link rel="alternate" hreflang="en-us" 
href="https://https://example.com" />
 <xhtml:link rel="alternate" hreflang="es-es" 
href="https://example.com/es/" />
 <xhtml:link rel="alternate" hreflang="pt-br" 
href="https://example.com/pt/" />

You can use the same hreflang generator tool to create or modify hreflang tags in an XML sitemap. 

Start by entering the URL, language, and country for every version. 

Then select “Attributes in an XML Sitemap” and click “GENERATE THE HREFLANG TAGS FOR THESE URLS.”

how to create or modify hreflang tags in an XML sitemap

Then, copy the code and add it into your site’s XML sitemap. 

add hreflang tags in your XML sitemap

How to Find and Fix Hreflang Issues

You can find and fix hreflang issues by regularly auditing your website.

And by using Semrush’s Site Audit tool as an hreflang checker. 

Start by entering your domain and creating a project. 

find and fix hreflangs with Site Audit tool

After the tool crawls your site, head to the “Issues” tab. Then, search for “hreflang” in the search bar. 

Like this:

hreflangs in Site Audit

You’ll see a list of all your hreflang conflicts. Including the type of issue and how to fix it. 

list of hreflang errors

For reference, here are the most common hreflang issues and how to fix them:

Issues With Hreflang Values

This type of warning is triggered when the country or language codes aren’t in the correct format. 

hreflang warning triggers

It’s important to fix this issue because search engines may ignore hreflang tags with incorrect codes. 

And if they ignore the tag, they may show users the wrong version of your page. That’s not good for your SEO. 

Fix this issue by reviewing the hreflang tags in each affected URL. 

Make sure the syntax in each attribute follows the correct codes. Two-letter ISO 639-1 for languages and ISO 3166-1 alpha-2 for countries and regions. 

You can always use an hreflang generator tool to verify or create your tags. 

No Self-Referencing Hreflang

The hreflang attribute on each page should include a reference to all the pages that serve as alternates. Including a reference to itself. 

hreflang references

If hreflang attributes don’t self-reference, search engines can ignore or misinterpret them. 

Fix this issue by reviewing each affected URL and adding a self-referencing hreflang tag to the set of hreflang attributes. 

This type of warning triggers when there is an issue with the link in the hreflang attribute. 

For example, the link might point to a page that is broken or has been redirected. 

incorrect hreflang links

If this happens, search engines may ignore your hreflang attributes. 

Fix this issue by reviewing each affected URL and changing the annotation to make sure it points to a working page. 

Conflicting Hreflang and Rel=Canonical URLs

This type of warning happens when an hreflang tag references a non-canonical URL.

non-canonical URL

A canonical tag is an HTML attribute that indicates the main version of a page when you have duplicate (or near-duplicate) pages. It tells search engines which version of a page is most authoritative and should appear in search results.

So, what if your hreflang attributes reference a non-canonical version of a particular page? 

The two tags contradict each other:

  • The hreflang attribute says the non-canonical page should appear in search results for users who speak particular languages
  • The canonical tag says a different version of that page should appear in search results

To put it simply: It’s going to confuse search engines. And they’ll probably ignore the hreflang, canonical, or both.

Fix this issue by going to each affected URL and changing the hreflang annotations to point to canonical URLs. 

Automate Your Hreflang Tag Audits 

After you learn how to implement hreflang tags and fix related issues, take things a step further by automating your hreflang audits. 

That way, you’ll be notified of any issues before they become bigger problems. 

To automate your hreflang audits, set up a recurring report in Site Audit

In the top right corner of your dashboard, click on the gear “settings” symbol. 

Then, scroll down and find “Schedule.”

schedule site audit

You’ll then see a pop-up where you can choose how often you want to run your audit. 

Set it to your preferred day. Then, tick the “Send an email” option. 

And click “Save.” 

receive email updates

New issues will show in your dashboard’s “International SEO” box after each crawl. So, make sure to check it regularly. 

where you will find new reports

Now you’re set to fix any hreflang implementation issues that pop up and keep your SEO efforts running smoothly.

Source link