HTML hreflang Attribute
Description
The hreflang
attribute in HTML is used to indicate the language and optional geographical targeting of a linked document. This attribute is placed within a <link>
element inside the <head>
section of an HTML document. It serves as a signal to search engines about the language and potential regional targeting of the content at the end of the link, which can be crucial for serving the right content to users based on their language preferences or geographic location.
The hreflang
attribute is especially important for websites that have content available in multiple languages or variations of a language tailored to different regions. For instance, English content may be available in variants for the United States, the United Kingdom, and Australia, each with slight differences in spelling and cultural references. By using the hreflang
attribute, webmasters can help search engines understand these nuances and direct users to the most appropriate version of the content.
The value of the hreflang
attribute is composed of a language code and optionally a country code, separated by a dash. The language code is a two-letter code defined by ISO 639-1, and the country code is a two-letter code defined by ISO 3166-1 Alpha-2. For example, en
for English, es
for Spanish, en-GB
for English as used in the United Kingdom, and es-MX
for Spanish as used in Mexico.
In practice, the hreflang
attribute looks like this within a link element:
<link rel="alternate" href="http://example.com" hreflang="en-us" />
This indicates that the linked document is an English-language version targeted at the United States audience. When properly used, the hreflang
attribute can improve SEO (Search Engine Optimization) by helping to prevent duplicate content issues in multilingual websites and ensuring that users find the content in the language that best suits them.
Syntax
<tagname href="URL" hreflang="language-code-country-code" />
Values
- language-code-country-codeThe first 2 characters represent the language code of the linked page or resource. The last 2 characters represent the country code (optional).
Applies To
The hreflang
attribute can be used on the following html elements.
Example
<head><br>
<link rel="alternate" hreflang="en-us" href="/products/widget" /><br>
<link rel="alternate" hreflang="es-es" href="/productos/artilugio" /><br>
</head>
Browser Support
The following table will show you the current browser support for the HTML hreflang
Attribute.
Desktop | |||||
Yes | Yes | Yes | Yes | Yes |
Tablets / Mobile | |||||
Yes | Yes | Yes | Yes | Yes | Yes |
Last updated by CSSPortal on: 29th March 2024