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 correcte pour chaque langue ou région.

Échec de l'audit hreflang de Lighthouse

Lighthouse indique des liens hreflang incorrects:

Audit du phare présentant des liens hreflang incorrects

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

Lighthouse recherche ensuite les codes de langue valides dans les liens hreflang. Lighthouse signale des 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 disposez de trois versions d'une page:

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

Trois méthodes permettent d'indiquer aux moteurs de recherche que ces pages sont équivalentes. Choisissez la méthode qui convient le mieux à 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 être liée à toutes les autres versions, y compris la page elle-même. Sinon, les moteurs de recherche risquent d'ignorer les liens hreflang ou de les interpréter de manière incorrecte.

Pour les pages permettant 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 les informations de version linguistique à 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 pour 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 correspond aux hispanophones au Mexique, tandis que es-cl concerne les hispanophones au Chili.
  • Le code régional doit respecter le format ISO 3166-1 alpha-2.

Ressources