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:
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 quees-cl
es para hablantes de español en Chile. - El código de región debe seguir el formato ISO 3166-1 alfa-2.