What is Hreflang Tag Attributes & How to Use Them

by Jay | Updated on January 3rd, 2023

If you’re a web developer, you’ve probably heard of HTML attributes. But did you know that HTML also includes hreflang attributes?

These special attributes can help enhance your website’s SEO and make it easier for search engines to index your content. In this post, we’ll explain everything you need to know about hreflang attributes.

What is hreflang?

Hreflang is an HTML attribute that helps search engines understand which language a webpage is written in. It provides the search engine with information about which version of the webpage to show to a user based on their geographic location and language settings.

When used correctly, hreflang attributes can help ensure that the right version of a website is being shown to the right person. This is especially important for websites that are targeting multiple languages and regions.

Why is hreflang important?

Hreflang tags are an essential SEO requirement for multilingual and multi-regional websites. By including hreflang tags, you can tell search engines which language and region a page is targeting. This will help ensure that users from different countries and languages are directed to the correct version of the page.

Hreflang tags can also help you rank for the correct language or region, as search engines will be able to more accurately determine the target audience of your page.

Additionally, hreflang tags can help to ensure that the right pages are being indexed and that users don’t end up on a version of the page they can’t understand.

How to use hreflang?

Hreflang tags are used to indicate to search engines which language and region a page is targeting. This helps search engines to serve the correct webpage to users searching in that language or region. It’s important to note that hreflang tags do not directly influence the ranking of a website.

Hreflang tags should be implemented in either the HTML link tag or the HTTP header of a page. The language and region are specified by using ISO 639-1 and ISO 3166-1 Alpha 2 codes. The x-default hreflang attribute value can be used to specify a default page for any language or region that is not specified in the tags.

Here is an example of what the hreflang link elements might look like in the head section of a page:

<link rel="alternate" href="http://example.com" hreflang="en-us">
<link rel="alternate" href="http://example.com/de" hreflang="de-de">
<link rel="alternate" href="http://example.com/jp" hreflang="ja-jp">

This will indicate to search engines that the page at http://example.com is targeted toward users in the United States (en-us), and that there are alternate versions of the page available for users in Germany (de-de) and Japan (ja-jp).

The first portion en specifies the language in ISO 639-1 format
The second portion is optional and specifies the country using the ISO 2 letter country code

Alternatively, you can also specify the hreflang values in the HTTP header of each page. To do this, you will need to add an “Alternate-Language” HTTP header field to each page, with the hreflang values separated by commas.

For example:

Alternate-Language: en-us, de-de, ja-jp

It’s also important to ensure that the hreflang tags are correctly implemented and that they point to the correct URLs. It’s best practice to validate the hreflang tags using a specialized tool or service. If your website is multilingual or multi-regional, then implementing hreflang tags is an essential SEO requirement.

Hreflang for language targeting

Understanding hreflang tag attributes are essential for multilingual websites. When targeting languages, the hreflang attribute should be used to specify the language of a page so that the search engine can serve the page to users searching in that language. This attribute should be present on all pages that have the same content translated into multiple languages.

An example of a hreflang attribute for language targeting would look like this:

<link rel="alternate" href="http://example.com" hreflang="en-US">

This tells search engines that the page linked to is in English (en) and, specifically, in the US (us). This hreflang tag attribute should be included on all pages that are in the same language, including the homepage. For example, if the homepage is in French, each page in French should include the hreflang attribute with a value of “fr”.

<link rel="alternate" href="http://example.com" hreflang="fr">

Hreflang for country targeting

Having a website with international reach is a great goal to strive for. However, it’s important to remember that different countries have different language and cultural norms. This is why the hreflang attribute is so important.

Hreflang is an HTML attribute that tells search engines what language is being used on a given page. This allows search engines to serve up the right page to users searching in that language.

For example, if you have a page written in Spanish and a page written in French, you can use hreflang to tell search engines which page to serve to users searching in Spanish and which page to serve to users searching in French.

This is an important tool for country targeting, as it lets you ensure that the right content is being served to the right audience.

<link rel="alternate" href="http://example.com" hreflang="fr-es">

Additionally, using hreflang for country targeting allows you to reach users in different countries without having to duplicate content. For example, you can have a single page in English but with different hreflang tags for different countries. This ensures that users in different countries are served the correct version of the page.

In summary, a hreflang attribute is a powerful tool for country-targeting your website. It allows you to target different countries with the same content while ensuring that users in those countries are served up the right page.

Hreflang for regional targeting

Regional targeting is a great way to target different countries with similar regional language variations. The hreflang attribute can be used to specify the region of the page to ensure that the correct language version is served to the correct region.

For example, you could use hreflang to specify the region of the US, UK, Canada, or Australia. It is important to note, however, that this should only be done if the content of the page is actually tailored to the region. If the content is not tailored to the region, then it is likely better to use the language targeting option instead.

<link rel="alternate" href="http://example.com/en-us" hreflang="en-us">
<link rel="alternate" href="http://example.com/en-ca" hreflang="en-ca">
<link rel="alternate" href="http://example.com/en-gb" hreflang="en-gb">
<link rel="alternate" href="http://example.com/en-gb" hreflang="en-au">

Multi-regional websites

A multi-regional site that targets different countries.

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

Multilingual sites

A multi-lingual site that targets different languages.

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

Multi-regional & multilingual sites

Some websites incorporate both regional and language variants.

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

Hreflang for alternate URLs

Hreflang attributes are also used to point search engines to alternate URLs of the same content. For example, you may have a page that is accessible with different URLs, such as example.com/page and example.com/page-2.

<link rel="alternate" href="http://example.com/en-us" hreflang="en-US">
<link rel="alternate" href="http://example.com/de-de" hreflang="de-DE">
<link rel="alternate" href="http://example.com/ja-jp" hreflang="ja-JP">

For a website with multiple language versions, you can use the hreflang tag to specify the language of each of these URLs. This way, search engines will know that the same content is available in different languages and will be able to serve the right version to the right user.

Hreflang attributes are not limited to language but can also be used to indicate regional or other variations of the same content. By using hreflang tags, you can make sure that the right version of the page is served to the right user.

It is important to note that the hreflang attribute should only be used to specify language and regional targeting and should not be used for any other purpose (such as specifying the content of the page).

What is x default in hreflang

The X-Default hreflang attribute value signals to search algorithms that a webpage does not target any specific language or locale and is the default page when no other page is better suited. It is often used when URLs have one or more hreflang tags, but are missing an x-default hreflang tag.

By using the hreflang attribute, webmasters can tell Google which language and country-version to surface as the default page. A typical use-case of X-default hreflang is on a website that has multiple versions for different regions, languages, and countries.

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

In this example, there are three language versions of the website available: English, Spanish, and the default language. The hreflang attribute is used to specify the language of each version and the x-default value is used to indicate the default language version.

Note that the x-default value should only be used in the hreflang attribute and not as a language code. Language codes are typically two-letter codes that are based on ISO 639-1.

How to implement hreflang tags?

If you want to maximize the performance of your website in international markets, the first step is to implement hreflang tags. Hreflang tags are HTML attributes that tell search engines which language a page is using, and they should be added to the section of each page.

The implementation of hreflang tags follows a simple syntax. Each tag should include the language code, country code (if applicable), and the URL of the page.

You do not need to use country code, if your focus is purely English for all countries, you can use this:

<link rel="alternate" href="http://www.example.com/" hreflang="en">

If, for example, a page is in English and is intended for readers in the United States, the tag should look like this: 

<link rel="alternate" href="http://www.example.com/" hreflang="en-us">

If, for example, a page is in English and is intended for readers in Australia, the tag should look like this: 

<link rel="alternate" href="http://www.example.com/" hreflang="en-au">

The language code and country code can be found in the ISO 639-1 and ISO 3166-1 Alpha 2 lists. It is important to note that, for hreflang tags to work correctly, you must provide a tag for each page in each language and country.

For example, if you have a page in Spanish for Spain, you must also include a tag for that page in Spanish for other Spanish-speaking countries, such as Mexico and Argentina.

For Spain:

<link rel="alternate" href="http://www.example.com/es" hreflang="es-es">

For Mexico:

<link rel="alternate" href="http://www.example.com/es" hreflang="es-mx">

For Argentina:

<link rel="alternate" href="http://www.example.com/es" hreflang="es-ar">

In addition, you should also include a self-referencing tag for every page. This tells search engines that the page is not intended for any other language or region. For example, if you have a page in Spanish for Spain, you should include this tag: 

<link rel="alternate" href="http://www.example.com/es" hreflang="es-es">

Testing hreflang tags is important to ensure that search engines are correctly identifying the language and country of the page. It ensures that the correct pages are served to the correct users in their native language.

To test your hreflang tags, you can use tools like Screaming Frog SEO Spider or any other SEO audit tool. These tools will allow you to check if there are any errors in the hreflang tags and make sure that the tags are working correctly.

Hreflang Tag Language Codes

Hreflang Country Codes

Common mistakes with hreflang attributes

Using hreflang tags correctly is an important part of any multilingual or multi-regional website’s SEO strategy. But it’s also important to understand that mistakes can be made with hreflang tags. Here are some of the most common mistakes that can be made with hreflang attributes:

• Not including hreflang tags on all pages: If a website has alternate language pages, it’s important to ensure that all of them have hreflang tags. This will ensure that search engines are accurately serving the right pages to the right users.
• Not creating a self-referencing hreflang tag: A self-referencing hreflang tag is one where the URL in the hreflang attribute points to the page the hreflang tag is on. This is important for search engines to accurately understand which language each page is in.
• Not using the correct language codes: It’s important to use the correct language codes when specifying hreflang tags. For languages, use ISO 639-1 codes and for countries, use ISO 3166-1 Alpha 2 codes.
• Not specifying country codes: If you are targeting a specific country, make sure to specify the correct country code in the hreflang tags. Not doing so could result in the wrong page being served in that country. Using country code only: language code is mandatory, country code is optional
• Adding country code before language code: The proper hreflang tag should be language first and then the country code
• Using a dash (–) instead of a hyphen (-)
• Using wrong quotation marks (“ ”) instead of (” “)
• Hreflang and Canonical tags in conflict: Hreflang and Canonicals are not supposed to be combined

These are some of the most common mistakes made with hreflang tags. By avoiding them and using hreflang tags correctly, you can ensure that search engines are accurately serving the right pages to the right users.

Jay

I've worked for WooRank, SEOptimer, and working on a cool SEO audit tool called SiteGuru.co. Now I have build Linkilo and SEO RANK SERP WordPress theme. I've been in the SEO industry for more than 5 years, learning from the ground up. I've worked on many startups, but also have my own affiliate sites.

TRY OUR FULLY SEO-OPTIMIZED WORDPRESS THEME FOR AFFILIATE MARKETERS!

No need to hire SEO experts anymore to fix your site technical SEO issues

IMPROVE YOUR SITES RANKING TODAY