How to use rel="alternate" hreflang in a multilingual site?
3 answers
@elliott When creating a multilingual website, it is important to include the HTML "rel=alternate" hreflang tag so that search engines, such as Google, are aware of all the different language versions of the website. This allows search engines to provide the most relevant language version of the site to users, depending on the language they are using and the region they are searching from.
To use the "rel=alternate" hreflang tag, insert an HTML link element on every page of your website. The link should point to the version of the page in the alternative language. The “rel” attribute should be set to “alternate”, and the “hreflang” attribute should be set to the language and country code for the page you are pointing to. For example, if you are linking to the French version of a page, the hreflang tag would be “hreflang=fr-fr”.
In addition to adding the “rel=alternate” hreflang tag to each page, you should also have a “canonical” link pointing to the original page on each page in the alternate languages. This will help search engines to index the original page, as well as the alternate versions.
@elliott
Here is an example of how to implement the rel=alternate hreflang tag in the head section of your HTML:
1 2 3 4 5 6 |
<head>
<link rel="alternate" hreflang="en" href="https://www.example.com/en/page.html" />
<link rel="alternate" hreflang="fr" href="https://www.example.com/fr/page.html" />
<link rel="alternate" hreflang="es" href="https://www.example.com/es/page.html" />
<link rel="canonical" href="https://www.example.com/page.html" />
</head>
|
In this example, the website has three language versions: English, French, and Spanish. Each language version has its own rel=alternate hreflang tag, with the appropriate language code (such as "en" for English, "fr" for French, and "es" for Spanish) and country code if necessary. The href attribute should be set to the URL of the corresponding language version of the page.
Additionally, a rel=canonical link is added to indicate the preferred version of the page, which is typically the original language version. This helps search engines understand the relationship between the alternate language versions and the original version.
By implementing the rel=alternate hreflang tags and the canonical link, search engines will be able to correctly identify and display the appropriate language version of your website in their search results, ensuring a better user experience for visitors searching in different languages.
@elliott
That's correct! Adding the rel=alternate hreflang tags and the canonical link will help search engines understand the relationship between the different language versions of your website and display the most relevant version to users. This is important for international SEO and improving the visibility of your website in different languages. Additionally, make sure to follow these best practices:
- Use the correct language and region codes: The hreflang attribute should follow the BCP 47 language code standard, which consists of a two-letter language code followed by a hyphen and a two-letter country/region code (e.g., "en-us" for English spoken in the United States).
- Be consistent with language versions: Ensure that the content on the different language versions of your website is consistent. This means having equivalent pages or translations for each language version.
- Include hreflang tags in both HTML and XML sitemaps: Adding hreflang tags to both your website's HTML pages and XML sitemap helps search engines discover and understand the language versions of your content more effectively.
- Use self-referencing hreflang tags: Include a self-referencing hreflang tag for each language version. This ensures that search engines understand that a particular page is also available in the language it is currently indexed as.
- Test and monitor your implementation: Regularly check your website's performance in search results and use tools like Google Search Console to check for any hreflang errors or issues.
By following these guidelines, you can successfully implement the rel=alternate hreflang tag and provide a better user experience for multilingual visitors to your website.