Le document ne contient pas d'attribut hreflang valide

De nombreux sites proposent différentes versions d'une page en fonction de la langue ou de la région de l'utilisateur. Les liens hreflang indiquent aux moteurs de recherche les URL de toutes les versions d'une page afin qu'ils puissent afficher la version appropriée pour chaque langue ou région.

Échec de l'audit hreflang Lighthouse

Lighthouse signale les liens hreflang incorrects:

Audit Lighthouse montrant des liens hreflang incorrects

Lighthouse recherche des liens hreflang dans le head de la page et dans ses en-têtes de réponse.

Lighthouse vérifie ensuite la présence de codes de langue valides dans les liens hreflang. Lighthouse signale tous les liens hreflang avec des codes de langue non valides.

Lighthouse ne vérifie pas les codes régionaux ni votre sitemap.

Définir un lien hreflang pour chaque version d'une page

Supposons que vous disposiez de trois versions d'une page:

  • Une version en anglais est disponible sur https://example.com.
  • Une version en espagnol sur https://es.example.com
  • Une version allemande sur https://de.example.com

Il existe trois façons d'indiquer aux moteurs de recherche que ces pages sont équivalentes. Choisissez la méthode la plus simple pour votre situation.

Option 1:Ajoutez des liens hreflang au <head> de chaque page:

<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" />

Chaque version d'une page doit comporter un lien vers toutes les autres versions, y compris la page elle-même. Sinon, les moteurs de recherche peuvent ignorer les liens hreflang ou les interpréter de manière incorrecte.

Pour les pages qui permettent aux utilisateurs de sélectionner leur langue, utilisez le mot clé x-default:

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

Option 2:Ajoutez des en-têtes Link à votre réponse 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"

Option 3:Ajoutez des informations sur les versions linguistiques à votre sitemap.

<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>

Consignes concernant les valeurs hreflang

  • La valeur hreflang doit toujours spécifier un code de langue.
  • Le code de langue doit respecter le format ISO 639-1.
  • La valeur hreflang peut également inclure un code régional facultatif. Par exemple, es-mx est destiné aux hispanophones au Mexique, tandis que es-cl est destiné aux hispanophones au Chili.
  • Le code de région doit respecter le format ISO 3166-1 alpha-2.

Ressources