Story Based Question
Imagine you run an online learning platform that offers courses in multiple languages—English, Spanish, and French. As you expand globally, you notice a recurring problem: French users from France often land on the English site, and Spanish-speaking users in Mexico are seeing the Spanish content meant for Spain. This mismatch confuses users and leads to high bounce rates. You wonder, “How can I ensure the correct version of my site appears for each audience?”
The solution is implementing hreflang tags.
Exact Answer
To implement hreflang tags on a multilingual website, you specify alternate versions of your pages in the HTML <head> section, in HTTP headers, or via XML sitemaps. Each tag must include the rel="alternate" attribute, the language and region code (hreflang), and the URL of the corresponding page.
Explanation
Hreflang tags are essential for serving the right content to users based on their language and region. Here’s a step-by-step guide to implementing them:
- Decide Your Implementation Method
You can implement hreflang tags using any of these three methods:
1. HTML<head>tags: Embed tags in the<head>section of each page.
2. HTTP headers: Use for non-HTML resources like PDFs.
3. XML sitemaps: Ideal for large websites with multiple language versions.
Example using HTML tags:
<link rel=”alternate” hreflang=”en-us” href=”https://example.com/us/” />
<link rel=”alternate” hreflang=”fr-fr” href=”https://example.com/fr/” />
<link rel=”alternate” hreflang=”es-mx” href=”https://example.com/mx/” />
- Define Language and Region Codes
- Use standard ISO 639-1 codes for languages (e.g.,
enfor English,frfor French). - Use ISO 3166-1 alpha-2 codes for regions (e.g.,
usfor the United States,frfor France).
- Use standard ISO 639-1 codes for languages (e.g.,
If targeting only a language, omit the region code (e.g., hreflang="fr" for French speakers globally).
- Ensure Bidirectional Tagging
Each page must reference itself and all alternate versions. For instance, if you have English, French, and Spanish pages, the hreflang tags on the English page should look like this:
<link rel=”alternate” hreflang=”en-us” href=”https://example.com/us/” />
<link rel=”alternate” hreflang=”fr-fr” href=”https://example.com/fr/” />
<link rel=”alternate” hreflang=”es-mx” href=”https://example.com/mx/” />
Similarly, the French page must include hreflang tags pointing back to English and Spanish versions.
- Include an x-default Tag
Add a fallbackx-defaulttag for users who don’t match any specific language or region. This is especially useful for a global homepage.
<link rel=”alternate” hreflang=”x-default” href=”https://example.com/” />
- Test Your Implementation
- Use Hreflang Testing Tool to verify proper setup.
- Check Google Search Console for indexing issues.
Example
Let’s revisit the online learning platform:
You have three versions of a page:
- English for US:
https://example.com/us/ - Spanish for Mexico:
https://example.com/mx/ - French for France:
https://example.com/fr/
On the English page, you add:
<link rel=”alternate” hreflang=”en-us” href=”https://example.com/us/” />
<link rel=”alternate” hreflang=”fr-fr” href=”https://example.com/fr/” />
<link rel=”alternate” hreflang=”es-mx” href=”https://example.com/mx/” />
<link rel=”alternate” hreflang=”x-default” href=”https://example.com/” />
On the French page, you add:
<link rel=”alternate” hreflang=”fr-fr” href=”https://example.com/fr/” />
<link rel=”alternate” hreflang=”en-us” href=”https://example.com/us/” />
<link rel=”alternate” hreflang=”es-mx” href=”https://example.com/mx/” />
<link rel=”alternate” hreflang=”x-default” href=”https://example.com/” />
This setup ensures users see the correct version of the page based on their preferences, reducing bounce rates and improving user experience.