Hreflang HTML

What is it, importance and examples

Table of contents

What the HTML Hreflang of a Web Page is

The HTML hreflang attribute (also called rel=”alternate” hreflang=”x”) tells Google which language is being used on a specific page so that the search engine can deliver that result to users searching in that language. 

Why it is important

The hreflang attribute is used to create a better user experience for visitors searching in a specific language and country. By using it, we help Google to serve the specific page in the most appropriate language and country.

For SEOs, the hreflang tag ensures that the search result is provided in the native or preferred language and not in a different one.

How to create the hreflang for your web page

How to Implement the hreflang tag on your page

Google allows up to three different methods to implement the hreflang tag. It is very important that we choose only one:

  1. As a link in the HTML header of the page
  2. In the HTTP header (for non-HTML files such as PDFs)
  3. In the XML sitemap

Here you will find an extensive article from Google’s engineers with detailed instructions on the three methods of implementation: Localized versions of your pages. 

How to identify the Hreflang tag

The hreflang attribute specifies the language of the document in the link:

Hreflang tags are easy to understand if we break them into three simple parts:

  • link rel=”alternate”: Tells Google that the link in this tag is an alternate version.
  • hreflang=”x”: Specifies the language and the difference with the original version. The “x” is replaced by the language code of the country.
  • href=”https://example.com/alternate-page”: The alternate site is located at this URL.
 				 					<link rel="alternate" hreflang="es" href="https://www.isocialweb.agency" />  <link rel="alternate" hreflang="en" href="https://www.isocialweb.agency/en/" />  <link rel="alternate" hreflang="x-default" href="https://www.isocialweb.agency" />

ISSO Language and Region Codes

The ISO 639-1 format is used by Google to encode language on a web page, although it can be used in combination with the ISO 3166-1 format to specify specific regions.

If you have doubts about how to generate the hreflang code, we recommend you use an automatic generator like this one:

You can also check if the code of your pages is well constructed by using this Google Chrome extension or by using this hreflang tag validation tool:

The only drawback is that you have to go URL by URL checking that it is well implemented.

“x-default” attribute for unspecified languages

If your web page offers content in multiple languages or simply allows users to select the desired language, you can use the “x-default” value to indicate that the page is not targeted specifically for a particular language.

This can be done using the following HTML tag:

 				 					<link rel="alternate" href="https://www.isocialweb.agency/" hreflang="x-default" />

Common hreflang mistakes to avoid

There are some technical errors that can trip some webmasters up if they are not careful.

When implementing the hreflang be sure to:

  • Include a self-referential hreflang, i.e., one that points to itself so that search engines understand what language the page is written in.
  • Have all page variations included in the hreflang to ensure that no other language versions are lost and that they are bidirectional (each points to the other).
  • Use the hreflang x-default tags to tell Google which language a page is in when no other language variant is appropriate.
  • Remember to always canonically tag the page to itself.
  • Use correct Language Codes using the ISO 639-1 format and optionally the region in ISO 3166-1 Alpha 2 format of the alternative URLs. It is not possible to specify only the region.

Not following the above steps can derail your international SEO efforts.

So take them very seriously.

In conclusion:

The hreflang tags are a very effective tool to tell Google which language versions to serve depending on the location the search is coming from. Understanding and implementing them in the right way is essential to ensure that all SEO efforts of a multi-language project are put to good use.

Important: hreflang tags are a signal to search engines, but they are not directive, so Google may not use them if it deems them inaccurate. As an SEO, you need to make sure that you are sending the right signals and helping Google understand your site when indexing and ranking your pages.

Tools and recommended readings:

Frequently Asked Questions

HTML hreflang tags on a web page are essential for Google to better understand our multi-language projects. If your web project uses different languages, learning how to implement them on your website is essential to ensure a good international SEO.

The easiest way to ensure that hreflang tags are well implemented is to use an automated tool. In our article, you will find several tools that can serve you in this purpose.

[kkstarratings force]