Each page on a website includes different signals that search engines use to understand and classify the content of that URL in relation to the rest of the site. hreflang is one of those signals.
Contents
What is the Hreflang tag?
The hreflang tag is used to tell search engines about the language and, when relevant, the regional targeting of alternate versions of a page. Google uses hreflang to understand that these pages are localized variations of the same content.
This annotation helps search engines show the right URL in search results when the query is made in a specific language or from a specific region.
Once implemented, the hreflang tag looks like this:
<link rel="alternate" href="https://www.example.com/es/" hreflang="es">When should you use hreflang?
If your website is available in only one language, there is usually no need to tell Google which language the page uses. If, on top of that, you use a country-code top-level domain, such as .es, search engines can already understand that the intended audience is in Spain.
If you want to serve a page in different languages or locations, using hreflang becomes necessary. There are several common situations.
Different language and different country
This is the most common case for websites that have different versions of their pages in different languages.
If your business has an international focus, you will need to differentiate your content depending on the language of the audience you want to reach. In this case, hreflang helps search engines show the page in the right language and country.
<link rel="alternate" href="https://www.example.com/" hreflang="en">
<link rel="alternate" href="https://www.example.com/es/" hreflang="es">In this example, www.example.com would contain content in English and would therefore be intended for an English-speaking audience, while www.example.com/es/ would be the Spanish version.
Same language, different country
If your website has different versions for countries where the same language is spoken, hreflang is used to tell Google which version should be shown in each market.
For example, you may have two versions of a page for Spanish-speaking users in Spain and Mexico. In that case, hreflang helps Google understand which URL is intended for each country thanks to the country code added after the language code.
<link rel="alternate" href="https://www.example.com/es/" hreflang="es-es">
<link rel="alternate" href="https://www.example.com/mx/" hreflang="es-mx">In this case, www.example.com/es/ is intended for users in Spain, while www.example.com/mx/ is intended for users in Mexico.
It is also useful to include a generic language tag to indicate which version should be shown to the rest of Spanish-speaking users who are not in either of those countries. In that case, you would add a third tag:
<link rel="alternate" href="https://www.example.com/es/" hreflang="es-es">
<link rel="alternate" href="https://www.example.com/mx/" hreflang="es-mx">
<link rel="alternate" href="https://www.example.com/es/" hreflang="es">This tells search engines that www.example.com/es/ is the version that should be shown in the rest of the Spanish-speaking countries when the search is made in Spanish.
Same country, different language
If more than one language is spoken in the same country, it can be useful to tell search engines which version of the site should be shown depending on the language used in the search.
A common example is Canada, where both English and French are widely spoken. If your website offers content in both languages, hreflang helps Google understand which URL to show.
<link rel="alternate" href="https://www.example.ca/en/" hreflang="en-ca">
<link rel="alternate" href="https://www.example.ca/fr/" hreflang="fr-ca">Automatic redirection
The last case applies when you have a language selector page or an automatic redirection based on the user’s IP address, device language, or a previous choice stored in cookies. In that situation, the tag used is x-default. Google defines x-default as a version that is not targeted to any specific language or region.
<link rel="alternate" href="https://www.example.com/" hreflang="x-default">This can point to a language selector, a default version of the content, or the page you want to show when no localized version is available.
How can hreflang be implemented?
There are three ways to implement hreflang on a website: as an HTML element in the page header, through the XML sitemap, or through the HTTP header. The best option depends on the project and on how easy each method is to implement in that particular setup. Google supports all three methods.
HTML tags
The HTML implementation goes inside the section of the page. There, you specify the URL of every available version, including the version currently being viewed. Google recommends that each language version lists itself and all the other versions.
<head>
...
<link rel="alternate" href="https://www.example.com/" hreflang="en">
<link rel="alternate" href="https://www.example.com/es/" hreflang="es">
<link rel="alternate" href="https://www.example.com/fr/" hreflang="fr">
<link rel="alternate" href="https://www.example.com/mx/" hreflang="es-mx">
...
</head>XML sitemap
hreflang can also be implemented in the XML sitemap. This is often a good option for large multilingual sites, or for projects where editing the content of every page is less practical.
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://www.example.com/es/</loc>
<xhtml:link rel="alternate" hreflang="en" href="https://www.example.com/"/>
<xhtml:link rel="alternate" hreflang="es" href="https://www.example.com/es/"/>
<xhtml:link rel="alternate" hreflang="fr" href="https://www.example.com/fr/"/>
<xhtml:link rel="alternate" hreflang="es-mx" href="https://www.example.com/mx/"/>
</url>
</urlset>HTTP header
The HTTP header method is used to indicate the language or region when the published file is not HTML. A very common example is a PDF file.
Link: <https://www.example.com/es/documento.pdf>; rel="alternate"; hreflang="es-es"In this case, you would be telling Google that document.pdf is in Spanish and is intended for users in Spain.
In short, the hreflang tag is useful when your site has different versions of the same content for different languages or regions. Its goal is to help search engines understand those alternate versions and show the most appropriate URL to users in search results.
