Find out what is the Hreflang tag and how it affects international SEO
Tabla de contenidos
What is the hreflang tag?
The hreflang tag is an HTML attribute used to specify the language and region of a webpage. This tag is essential for multilingual websites, as it allows search engines to understand which version of a page to show users based on their language and geographical location. Proper implementation of hreflang can significantly improve user experience and international SEO positioning of a website.
What is its main function?
The main function of the hreflang tag is to indicate to search engines which versions of a webpage are available for different languages and regions. This helps to:
- Show the correct version of a page to users: Search engines can present the most relevant version of a page according to the user’s language and region.
- Avoid duplicate content: By clearly differentiating between versions of a page, duplicate content that negatively affects SEO is avoided.
- Improve user experience: Users are automatically directed to the version of the page in their preferred language, enhancing their site experience.
Detailed explanation of hreflang composition:
Example of hreflang tag:
Breakdown of the hreflang tag:
- <link> Tag:
- This HTML tag is used to define the relationship between the current document and an external resource.
rel="alternate"Attribute:- Indicates that the URL specified in the
hrefattribute is an alternative version of the current page.
- Indicates that the URL specified in the
hreflang="es-ES"Attribute:hreflang: Specifies the language and, optionally, the region of the alternative URL.es-ES: Is a language and region code that follows the ISO format. In this case:es: ISO 639-1 code for the Spanish language.ES: ISO 3166-1 Alpha 2 code for the Spain region.
href="https://www.example.com/es/"Attribute:- Specifies the URL of the alternative version of the page.
https://: Indicates the protocol used (in this case, HTTPS).www.example.com: Is the domain of the website./es/: Is the subdirectory or path indicating the Spanish version of the content for Spain.
How can I implement it on my website?
When working with WordPress, most language plugins already implement hreflang correctly. However, it’s important to understand how they implement it so you can detect and correct any possible errors.
If you want to implement it manually:
In HTML
The hreflang tag can be directly added to the HTML of each page by including links in the <head> section of the HTML. For example:
<link rel="alternate" href="https://www.example.com/es/" hreflang="es" /><link rel="alternate" href="https://www.example.com/en/" hreflang="en" />
In HTTP Headers
Another option is to include the hreflang tag in the HTTP headers of server responses. This method is useful for dynamic content or for sites where it is not practical to edit the HTML of each page.
Link: <https://www.example.com/es/>; rel="alternate"; hreflang="es"Link: <https://www.example.com/en/>; rel="alternate"; hreflang="en"
In the XML Sitemap
Including hreflang in the XML sitemap is an efficient option for large sites with many pages. This allows managing all page versions in a single file. An example entry in an XML sitemap would be:
<url>
<loc>https://www.example.com/es/</loc>
<xhtml:link rel="alternate" hreflang="es" href="https://www.example.com/es/" />
<xhtml:link rel="alternate" hreflang="en" href="https://www.example.com/en/" />
</url>* Remember that links need to be bidirectional, meaning if you point to a URL with hreflang, that URL needs to have a hreflang back.
The x-default Value
The x-default value is a special option in the hreflang tag used to indicate the default version of a webpage. This version is shown to users whose language or region is not specifically covered by other hreflang tags. It is especially useful for directing traffic to a generic version of the page when a specific language or region cannot be determined.
Practical example of x-default implementation
Suppose you have a website with English versions for the United Kingdom and Spanish for Spain. You also have a general version of the page for all other users. The hreflang configuration would look like this:
<link rel="alternate" hreflang="en-GB" href="https://www.example.com/en-gb/" /><link rel="alternate" hreflang="es-ES" href="https://www.example.com/es-es/" /><link rel="alternate" hreflang="x-default" href="https://www.example.com/" />
In this example:
- Users in the United Kingdom will see the English version (
en-GB). - Users in Spain will see the Spanish version (
es-ES). - Users from any other region will see the default version (
x-default).
Plugins for implementing hreflang
There are several plugins that facilitate the implementation of hreflang, especially for WordPress users. Some of the most popular plugins are:
- Polylang: Allows creating a multilingual website and managing hreflang tags easily.
- WPML (WordPress Multilingual Plugin): Another very popular plugin that offers full support for hreflang and many other features for multilingual sites.
- Yoast SEO: This SEO plugin includes functionality to manage hreflang tags efficiently.
These plugins simplify the implementation process by automating most tasks and providing user-friendly interfaces.
When is it necessary to implement hreflang?
Hreflang implementation is necessary in the following cases:
- Multilingual sites: If your website has content in several languages, it is crucial to implement hreflang to ensure search engines show the correct version to users.
- Regional variations: If you have site versions specific to different regions (e.g., English for the U.S. and the U.K.), hreflang helps direct users to the correct version.
- International e-commerce: Online stores operating in multiple markets benefit greatly from hreflang to show relevant products and prices for each region.
- Duplicate content in different languages: If you have similar content in multiple languages, hreflang is essential to avoid duplication issues and improve your SEO.
Validating that hreflang is correctly added
There are specific online tools to validate hreflang. These tools allow you to enter a URL and check if the hreflang tags are correctly implemented. Some options are:
- Hreflang.org: A simple and free tool to validate your hreflang tags.
- Merkle’s Hreflang Tag Testing Tool: This tool allows analyzing individual pages or a set of URLs to verify hreflang.
Common Errors
Missing reciprocal links
If page X includes a link to page Y, page Y must have a link back to page X. If this condition is not met for all pages using hreflang annotations, these annotations may be ignored or misinterpreted. For example, if https://de.example.com/index.html includes this link:
<link rel="alternate" hreflang="en-gb" href="https://en-gb.example.com/index.html" />You must also include a hreflang link on https://en-gb.example.com/index.html pointing back to the German version of the content:
<link rel="alternate" hreflang="de" href="https://de.example.com/index.html" />Incorrect language codes
Make sure the language codes you use identify the language in ISO 639-1 format and, optionally, the region in ISO 3166-1 Alpha 2 format for alternative URLs. The region cannot be specified alone.
Conclusion
The hreflang tag is vital for improving the SEO of multilingual websites by indicating the language and region of each page to search engines. This ensures that users see the correct version of the page according to their location and language preferences. Proper implementation, whether in HTML, HTTP headers, or XML sitemaps, avoids duplicate content and enhances user experience. WordPress tools and plugins can facilitate this task, ensuring your site is optimized for a global audience.
