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

HTML

&lt;head&gt;<br>

  &lt;link rel="alternate" hreflang="en-us" href="/products/widget" /&gt;<br>

  &lt;link rel="alternate" hreflang="es-es" href="/productos/artilugio" /&gt;<br>

&lt;/head&gt;

Result

Editor