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.

Cómo falla la auditoría de hreflang de Lighthouse

Lighthouse indica los vínculos hreflang incorrectos:

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

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

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

Lighthouse no verifica los códigos regionales ni tu mapa del sitio.

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

Supongamos que tienes tres versiones de una página:

  • Versión en inglés en https://example.com
  • 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 te resulte más sencillo según la situación.

Opción 1: Agrega vínculos de hreflang a los <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 versiones, incluida la página misma. De lo contrario, es posible que los motores de búsqueda ignoren los vínculos de hreflang o los interpreten de forma incorrecta.

En el caso de las páginas que permitan a los usuarios seleccionar 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 de idioma al 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 de México, mientras que es-cl es para hablantes de español en Chile.
  • El código de región debe seguir el formato ISO 3166-1 alfa-2.

Recursos