What are Hreflang Tag Attributes And How To Implement Them

Updated by Chima Mmeje — November 11, 2024.

What are hreflang tag attributes?

The hreflang attribute (also referred to as rel="alternate" hreflang="x" tells Google which language you are using on a specific page, so the search engine can serve that result to users searching in that language. This is particularly important for websites that offer content in multiple languages, as it helps search engines serve the correct language version to users based on their preferences.

By using these tags, you can help search engines understand the relationship between different language versions of your web pages. This ensures that users are directed to the most relevant content based on their language preferences. For instance, if you have an English version and a Spanish version of the same page, hreflang tags will guide search engines to serve the appropriate version to users searching in English or Spanish.

Code sample

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

Benefits of using hreflang tags for international SEO

Implementing hreflang tags can significantly enhance your website’s international SEO performance. Here are some key benefits:

  • Serve the Correct Version: Hreflang tags ensure that search engines serve the correct version of a page to users based on their language preferences. This means that a French-speaking user will see the French version of your page, while an English-speaking user will see the English version.
  • Avoid Duplicate Content Issues: By indicating which version of a page is the original, hreflang tags help avoid duplicate content issues. This is crucial for maintaining the integrity of your site’s SEO.
  • Improve User Experience: Providing language and location-dependent information improves the user experience. Users are more likely to engage with content that is in their preferred language and tailored to their region.
  • Increase Search Engine Rankings: Targeting specific languages and regions can boost your search engine rankings. By catering to the preferences of different user groups, you can improve your site’s visibility and relevance in search results.

What is rel="alternate" hreflang="x"?

Introduced by Google in December 2011, the hreflang attribute allows you to show search engines what the relationship is between web pages in alternate languages. It’s useful when you’ve created content that’s specific to a local audience. Hreflang tags can also be used to specify URLs with similar content in the same language but targeted at different regions, such as differentiating between English content for the US and the UK. The hreflang attribute adds a signal to search engines that a user querying in language “x” will want this result instead of a page with similar content in language “y”.

For example, if you create a Spanish-language version of your English-language homepage, you would tag it as “Español” by using hreflang="es" so that searchers with an IP address that a search engine has reason to believe is in a Spanish-speaking country are served that page in Spanish instead of the English version. This can decrease your bounce rate and increase your conversions by making sure your target audience lands on the version of your page most appropriate for them.

Hreflang can also be used to show that you have content targeted toward variants of a single language. If that’s the case, you can target your pages even more specifically by extending the hreflang attribute with annotations that indicate which region the content is localized for, e.g. Spain hreflang=”es-es” versus Mexico hreflang=”es-mx”. This is particularly useful to geotarget users to control for variations in currency, shipping, seasonality, and culture.

Hreflang is a signal, not a directive. That means that other SEO factors may override the hreflang attribute and cause a different version of your page to rank higher. To give search engines the clearest possible signals about which pages are for users in which language, make sure you’re using other international SEO best practices.

Note that while Google and Yandex currently use the hreflang attribute, Bing uses language meta tags instead.

Implementing hreflang tags

Adding hreflang tags to your HTML

To implement hreflang tags, you can add them to your HTML in several ways:

  • Directly embedding in HTML: Place the hreflang tags in the <head> section of each page’s HTML. This method is straightforward and ensures that the tags are always present when the page is loaded.
  • Adding hreflang annotations in a sitemap: If you prefer not to modify the HTML of each page, you can include hreflang annotations in your XML sitemap. This method is efficient for managing hreflang tags for a large number of pages.
  • Using the HTTP header for non-HTML files: For non-HTML files, such as PDFs, you can use the HTTP header to specify hreflang tags. This ensures that search engines can still understand the language and region targeting of these files.

When adding hreflang tags to your HTML, make sure to include the following elements:

  • rel=”alternate”: Indicates that the linked page is an alternate version of the current page.
  • hreflang=”language_code”: Specifies the language code of the linked page.
  • href=”url_of_page”: Specifies the URL of the linked page.

For example: <link rel="alternate" hreflang="en-us" href="https://example.com/en-us/" /> This code tells search engines that the linked page is an alternate version of the current page, targeted at users in the United States who speak English.

Note: Make sure to use the correct language and region codes, as specified in the ISO 639-1 and ISO 3166-1 Alpha 2 formats. This ensures that your hreflang tags are correctly interpreted by search engines, providing the best possible user experience.

SEO best practices for hreflang

To get the most benefit out of the hreflang attribute, the following tips are important:

Effective hreflang implementation is essential for maintaining optimal international SEO performance and avoiding common pitfalls.

Where the hreflang attribute goes

The hreflang attribute can be placed in the on-page markup, the HTTP header, or the sitemap. Only use one of those locations. If you choose the sitemap, this tool can help you.

Proper hreflang implementation in the correct location is crucial for ensuring that search engines correctly interpret your language and region targeting.

What the hreflang attribute looks like

The hreflang attribute on each page should include a reference to itself as well as to all the pages that serve as alternates for it. If your Spanish website sells Iberian ham to customers in Spain, France, and Portugal only, the hreflang attributes for your homepage might look like this:

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

The same annotations should appear on your French and Portuguese homepages.

It is still possible that Mexican, French Canadian, and Brazilian customers could see your site (remember, hreflang is a signal not a directive), but if you localize other aspects of your content and site (start by indicating what currency you use and showcasing a local address and phone number), you’re less likely to have to deal with pesky American import/export restrictions on your meat products :).

Accurate hreflang implementation ensures that each language version of your page is correctly identified and served to the appropriate audience.

ISO language and region codes

Image from a blog post by Aleyda Solis showing how frequently the wrong hreflang attribute is used.

Google supports the ISO 639-1 format for language codes, and you can get more specific by using the ISO 3166-1 Alpha 2 format to signal which region you’re targeting. Not all of the codes are intuitive (for example, the code for the UK is “gb” not “uk”), so double check before pasting the wrong code all over your site. This hreflang tag generator can help.

Image from Aleyda Solis’s blog post announcing the hreflang tag generator.

You can use multiple hreflangs on one page if you want to show that the page is for users in more than one country or area. For example, if the page targets people who speak Amharic in both Ethiopia and Eritrea, you can indicate that like this:

<link rel="alternate" href="http://example.com" hreflang="am-et" /><link rel="alternate" href="http://example.com" hreflang="am-er" />

Don’t forget to include a general hreflang attribute without the region code to catch Amharic speaking searchers in Djibouti or other areas of the world that you want traffic from:

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

Using the correct ISO codes is essential for hreflang implementation, especially when targeting multiple languages and regions.

General targeting with x-default

If your page serves up content in a variety of languages or just asks a user to select a preferred page, you can use x-default to show that the page is not specifically targeted. That looks like this:

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

Hreflang's effect on rankings

Hreflang attributes may not help you increase traffic; instead, the goal of using them is to serve the right content to the right users. They help search engines swap the correct version of the page into the SERP based on a user’s location and language preferences. For information on how geotargeting can help with rankings, learn about ccTLDs.

Proper hreflang implementation can significantly improve your search engine visibility by ensuring that the right content is served to the right users.

The difference between hreflang and canonicalization

Canonicalization is a tool for showing search engines which version of a URL (each with the same content) is the dominant one to avoid duplicate content issues. Hreflang, on the other hand, is a tool to show which of the different (but often similar) pages (based on language or region) should show up in a search.

Google recommends not using rel="canonical" across country or language versions of your site. But you can use it within a country or language version.

Improve your technical site health with Moz Pro

Keep tabs on critical crawler issues (and tons of other details) with the help of Moz Pro's Site Crawl. Take a 30-day free trial on us and see what you can achieve:

Start my free trial

Keep learning

Can your customers find you online?

Check your listings on Google, Bing, and other local search engines.

Additional Articles on International SEO

International SEO
ccTLDs