El documento no tiene un atributo hreflang válido.

Muchos sitios proporcionan diferentes versiones de una página según el idioma o la región del usuario. Los vínculos hreflang indican a los motores de búsqueda las URLs de todas las versiones de una página para que puedan mostrar la versión correcta para cada idioma o región.

Por qué falla la auditoría de hreflang de Lighthouse

Lighthouse marca los vínculos hreflang incorrectos:

Auditoría de Lighthouse que muestra vínculos hreflang incorrectos

Lighthouse busca vínculos hreflang en el head de la página y en sus encabezados de respuesta.

Luego, Lighthouse busca códigos de idioma válidos dentro de los vínculos hreflang. Lighthouse informa los vínculos hreflang con códigos de idioma no válidos.

Lighthouse no verifica los códigos de región ni tu mapa del sitio.

Cómo definir un vínculo hreflang para cada versión de una página

Supongamos que tienes tres versiones de una página:

  • Una versión en inglés en https://example.com
  • Una versión en español en https://es.example.com
  • Una versión en alemán en https://de.example.com

Existen tres maneras de indicarles a los motores de búsqueda que estas páginas son equivalentes. Elige el método que sea más fácil para tu situación.

Opción 1: Agrega vínculos hreflang al <head> de cada página:

<link rel="alternate" hreflang="en" href="https://example.com" />
<link rel="alternate" hreflang="es" href="https://es.example.com" />
<link rel="alternate" hreflang="de" href="https://de.example.com" />

Cada versión de una página debe vincularse a todas las demás, incluida la propia página. De lo contrario, los motores de búsqueda pueden ignorar los vínculos hreflang o interpretarlos de forma incorrecta.

En el caso de las páginas que permiten que los usuarios seleccionen su idioma, usa la palabra clave x-default:

<link rel="alternate" href="https://example.com" hreflang="x-default" />

Opción 2: Agrega encabezados Link a tu respuesta HTTP:

Link: <https://example.com>; rel="alternate"; hreflang="en", <https://es.example.com>;
rel="alternate"; hreflang="es", <https://de.example.com>; rel="alternate"; hreflang="de"

Opción 3: Agrega información de la versión en varios idiomas a tu mapa del sitio.

<url>
<loc>https://example.com</loc>

<xhtml:link rel="alternate" hreflang="es"
href="https://es.example.com"/>

<xhtml:link rel="alternate" hreflang="de"
href="https://es.example.com"/>

</url>

Lineamientos para los valores de hreflang

  • El valor hreflang siempre debe especificar un código de idioma.
  • El código de idioma debe seguir el formato ISO 639-1.
  • El valor hreflang también puede incluir un código regional opcional. Por ejemplo, es-mx es para hispanohablantes en México, mientras que es-cl es para hispanohablantes en Chile.
  • El código de región debe seguir el formato ISO 3166-1 alpha-2.

Recursos