HTML Link hreflang Property: Link Href Language
The HTML hreflang attribute specifies the language of the linked resource. This is primarily used for link elements, especially those that define alternate stylesheets or translations of the current document. It helps search engines and browsers provide users with the most appropriate version of a resource based on their language preferences.
Purpose of the hreflang Attribute
The primary purposes of the hreflang attribute are:
- SEO (Search Engine Optimization): Helps search engines understand the language of the linked resource, improving search rankings for specific language queries.
- Accessibility: Assists browsers in selecting the correct language version of a resource for users with specific language preferences.
- User Experience: Ensures that users are directed to content in their preferred language.
Syntax
The hreflang attribute is used within the <link> tag. The value should be a valid ISO language code.
<link rel="alternate" href="example.com/es/" hreflang="es" />
Possible Values
The value of the hreflang attribute must be a valid ISO 639-1 language code (two letters) or a language tag consisting of a language code and a region code (e.g., en-US for English as used in the United States).
Here are a few examples:
en: Englishes: Spanishfr: Frenchde: Germanja: Japaneseen-US: English (United States)en-GB: English (United Kingdom)es-MX: Spanish (Mexico)
| Value | Description |
|---|---|
| `en` | Specifies that the linked document is in English. |
| `es` | Specifies that the linked document is in Spanish. |
| `fr` | Specifies that the linked document is in French. |
| `de` | Specifies that the linked document is in German. |
| `en-US` | Specifies that the linked document is in English as used in the United States. |
| `en-GB` | Specifies that the linked document is in English as used in the United Kingdom. |
| `x-default` | Specifies the default or fallback language when no other language preference matches. |
Examples
Here are several practical examples demonstrating how to use the hreflang attribute.
Basic Example
Specifying the language of an alternate stylesheet:
<link rel="stylesheet" href="styles.css" type="text/css" />
<link
rel="alternate stylesheet"
href="styles-fr.css"
type="text/css"
title="French Style"
hreflang="fr"
/>
In this example, styles-fr.css is specified as an alternate stylesheet in French.
Linking to Translated Pages
Linking to different language versions of the same page:
<link rel="alternate" href="example.com/en/" hreflang="en" />
<link rel="alternate" href="example.com/es/" hreflang="es" />
<link rel="alternate" href="example.com/fr/" hreflang="fr" />
This example shows how to link to English, Spanish, and French versions of a page.
Using x-default
Specifying a default language:
<link rel="alternate" href="example.com/" hreflang="x-default" />
The x-default value indicates that example.com/ serves as the default or fallback page when no specific language matches the user’s preference.
Combining with rel="alternate"
Combining hreflang with rel="alternate" is a common practice for SEO:
<link rel="alternate" href="example.com/en-us/" hreflang="en-US" />
<link rel="alternate" href="example.com/en-gb/" hreflang="en-GB" />
This setup tells search engines that there are two different English versions of the page, one for US users and one for UK users.
Real-World Example: Multilingual Website
Consider a website that offers content in English, Spanish, and German. The HTML might look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Multilingual Website</title>
<link rel="alternate" href="example.com/en/" hreflang="en" />
<link rel="alternate" href="example.com/es/" hreflang="es" />
<link rel="alternate" href="example.com/de/" hreflang="de" />
<link rel="alternate" href="example.com/" hreflang="x-default" />
</head>
<body>
<h1>Welcome to our English Website!</h1>
<p>This is the English version of our content.</p>
</body>
</html>
In this setup:
example.com/en/is the English version.example.com/es/(not shown) would be the Spanish version.example.com/de/(not shown) would be the German version.example.com/is the default version, which could redirect to a language selection page or serve content in a commonly understood language.
Example with different language and location
<link rel="alternate" href="https://example.com/en-ca/" hreflang="en-CA" />
<link rel="alternate" href="https://example.com/fr-ca/" hreflang="fr-CA" />
In this setup:
example.com/en-ca/is the English Canada version.example.com/fr-ca/is the French Canada version.
Best Practices and Considerations
- Consistency: Ensure that the
hreflangvalues are consistent across all linked resources. - Return Links: Each language version should link back to all other language versions, including itself.
- Correct Codes: Use valid ISO 639-1 language codes and, when necessary, region codes.
x-default: Always include anx-defaultlink to specify the default version of your page.- Avoid Duplication: Don’t use the same
hreflangvalue for multiple links on the same page. - Testing: Validate your
hreflangimplementation using tools like Google Search Console or other SEO analysis tools.
SEO Benefits
Using the hreflang attribute correctly can significantly improve your website’s SEO:
- Targeted Traffic: Helps search engines direct users to the most appropriate language version of your content, increasing relevant traffic.
- Reduced Bounce Rate: By serving content in the user’s preferred language, you can reduce bounce rates and improve user engagement.
- Global Reach: Improves your website’s visibility in international search results, expanding your global reach.
Accessibility Considerations
The hreflang attribute also plays a role in web accessibility:
- Language Switching: Helps browsers provide users with options to switch to different language versions of a page.
- Assistive Technologies: Can assist screen readers and other assistive technologies in correctly interpreting and presenting content in the appropriate language.
Conclusion
The hreflang attribute is a valuable tool for creating multilingual websites that are both SEO-friendly and accessible. By correctly implementing hreflang, you can ensure that users are directed to the most appropriate language version of your content, improving their experience and your website’s search engine performance. 🌍🗣️
