Hreflang : l’attribut HTML pour des sites multilingues

Si vous souhaitez internationaliser votre présence sur le Web et proposer votre site en plusieurs langues, plusieurs tâches vous attendent : vous devez, par exemple, traduire tous les contenus correspondants et adapter l’offre à chaque marché, trouver une solution (éventuellement selon le pays) appropriée aux différents domaines individuels et extensions de domaines ou bien mettre en place les structures de serveur appropriées pour un temps de chargement constant du site Web. De plus, l’optimisation des moteurs de recherche des différentes versions linguistiques s’avère être un domaine d’activité délicat mais nécessaire. Ce n’est que sur la base de mesures de référencement spécifiques à une langue ou à un pays qu’il est possible pour les moteurs de recherche de catégoriser correctement les différentes versions linguistiques du site Web et les présenter plus tard au public approprié. Un des moyens les plus efficaces dont dispose le SEO à cette fin est le lien attribut hreflang.

Qu’est-ce que le hreflang ?

En décembre 2011, Google présente le « hreflang » comme une solution simple et efficace pour informer les moteurs de recherche sur les relations des variantes alternatives de sites Web. L’attribut signale au crawler de l’application de recherche que le contenu de la page actuelle est disponible en plusieurs versions multilingues. Dans cette optique, un élément de lien est placé dans le document HTML, incluant les abréviations linguistiques respectives. Si l’on souhaite attribuer une telle abréviation à une page en langue espagnole par exemple, il faut implémenter le hreflang avec l’abréviation du pays, soit « es ». L’élément complet ressemble donc à ceci :

<link rel="alternate" hreflang="es" href="URL del sito web" />

Si cet élément est par exemple intégré dans une page française, le moteur de recherche renvoie automatiquement les utilisateurs avec des adresses IP indiquant un arrière-plan espagnol à leur homologue espagnol.

Hreflang peut être aussi utilisé afin de distinguer les variantes d’une seule langue. Dans ce cas, l’attribut est simplement étendu afin d’inclure la région cible. Pour la version espagnole déjà mentionnée par exemple, on peut faire une division entre les utilisateurs en Espagne ("hreflang="es-ES") et les utilisateurs au Mexique ("hreflang="es-MX"). Les codes de langue et de pays possibles sont définis dans les normes ISO 639 et ISO 3166.

Hreflang n’est en aucune manière assimilé à une redirection et peut ainsi être supplanté par d’autres métadonnées. Afin que la mauvaise version linguistique n’apparaisse pas dans les résultats de recherche des utilisateurs, malgré l’attribut implémenté, les autres domaines du référencement international devraient également être suffisamment couverts.

Structure de l’élément du lien avec l’attribut hreflang

Le lien hreflang peut être implémenté de trois manières : le plus souvent, cela se fait par l’intégration dans la zone d’en-tête du document HTML correspondant. Pour les documents, qui ne sont pas en format HTML (par exemple un fichier PDF), l’alternative est d’inclure l’élément dans l’en-tête HTTP. Enfin, il existe aussi la possibilité d’inclure l’attribut spécifique à la langue ou au pays dans le plan du site. La structure de l’élément du lien qui est essentiellement utilisée pour marquer les structures relationnelles, a déjà été brièvement présentée dans l’exemple ci-dessus pour une version espagnole.

Afin d’expliquer la structure générale, nous vous présentons une nouvelle forme non spécifique du code :

<link rel="alternate" hreflang="Code langue-Code pays" href="URL du " />

L’élément de lien <link /> est un élément vide uniquement présent dans le but d’implémenter les attributs correspondants. Il ne peut être utilisé que dans la zone d’en-tête mais aussi souvent que souhaité. Pour lier les différentes versions linguistiques avec hreflang, les deux attributs rel et href sont nécessaires, en plus de l’attribut hreflang. Les trois différents composants ont la fonction suivante :

  • rel : il s’agit d’un attribut obligatoire qui spécifie les relations entre le document sous-jacent et le document lié. La valeur « alternate » indique au moteur de recherche que le document externe contient une version alternative du site Web.
  • hreflang : hreflang lui-même décrit dans quelle langue est écrit le document lié et peut éventuellement indiquer pour quel pays il est particulièrement le plus pertinent. Comme valeurs, les régions et abréviations de langue sont ici indiquées selon les normes ISO 639-1 et ISO 3166-1. Lorsque les deux indications sont effectuées, elles doivent être séparées par un trait d’union. Une liste claire de toutes les combinaisons possibles se trouve sur lingoes.net.
  • href : l’attribut href indique où se trouve les alternatives linguistiques et par défaut l’URL absolue du document externe.
Remarque

la plupart du temps, l’option de l’abréviation régionale est indiquée en lettres capitales. Google accepte cependant aussi les minuscules, de sorte que vous n’êtes pas lié à une orthographe explicite.

Que se cache-t-il derrière hreflang="x-default" ?

Le but de l’utilisation de hreflang est de guider les utilisateurs d’une manière ciblée vers le site Web approprié d’un point de vue linguistique. Cependant, naturellement, il arrive aussi que les utilisateurs ne puissent être affectés à l’une des variantes disponibles sur la base de la langue du code du pays. Si ces utilisateurs trouvent votre site Web par l’intermédiaire d’un moteur de recherche, le classement (ranking) décide quelle est la variante de langue affichée. En conséquence, vous pouvez perdre des lecteurs potentiels après seulement quelques secondes parce qu’ils se retrouvent dans la mauvaise version linguistique. Cependant, avec « x-default », Google propose une option avec laquelle vous pouvez désamorcer cette situation.

La valeur que vous pouvez définir comme alternative aux codes ISO signale au moteur de recherche que l’URL liée est la solution par défaut pour tous les utilisateurs pour lesquels il n’existe pas de version linguistique explicitement identifiée. Sur cette page standard, par exemple, vous pouvez présenter une vue d’ensemble des langues avec une option de sélection, afin que la décision pour une variante soit entre les mains des visiteurs concernés. La ligne de code appropriée que vous devez ajouter à l’en-tête de chaque version alternative ressemble à ceci :

<link rel="alternate" hreflang="x-default" href="URL de la page „Default“" />

Comment fonctionne l’implémentation de hreflang ?

Pour comprendre le fonctionnement de hreflang, une propriété de l’attribut est d’une importance élémentaire : elle relie deux ou plusieurs documents de manière bidirectionnelle et non, comme dans le cas d’une redirection, unidirectionnelle. Il ne suffit donc pas que le site français contienne un lien hreflang vers la version espagnole, sans renvoyer à la version française. C’est seulement si la note HTML hreflang est placée dans tous les documents dans toutes les directions existantes (versions linguistiques) que le moteur de recherche pourra reconnaître la structure de votre projet Web et ajuster les résultats de recherche des utilisateurs en conséquence.

Le code d’exemple hreflang suivant, pour le site Web fictif exempledomaine.fr avec les versions linguistiques allemandes, italiennes, espagnoles et anglaises, devrait être entré dans les en-têtes des quatre documents HTML :

<link rel="alternate" href="http://exempledomaine.fr/" hreflang="de" />
<link rel="alternate" href="http://exempledomaine.fr/it/" hreflang="it" />
<link rel="alternate" href="http://exempledomaine.fr/es/" hreflang="es" />
<link rel="alternate" href="http://exempledomaine.fr/en/" hreflang="en" />

L’intégration dans un en-tête HTTP fonctionne en principe selon le même modèle, car toutes les versions linguistiques existantes doivent également y être référencées. Seule la syntaxe présente quelques différences mineures. Par exemple, si vous vouliez offrir des manuels en formats PDF pour les quatre exemples de langue précédents et le signaler aux moteurs de recherche, le code ressemblerait à ceci :

Link: <http://exempledomaine.fr/downloads/manuals.pdf/>; rel="alternate"; hreflang="de"
Link: <http://exempledomaine.fr/it/downloads/manuals.pdf/>; rel="alternate"; hreflang="it"
Link: <http://exempledomaine.fr/es/downloads/manuals.pdf/>; rel="alternate"; hreflang="es"
Link: <http://exempledomaine.fr/en/downloads/manuals.pdf/>; rel="alternate"; hreflang="en"

Marquer l’attribut hreflang dans un plan du site XML représente une alternative particulièrement judicieuse au simple marquage dans les pages individuelles, surtout si vous exécutez un grand projet Web international. Si vous proposez du contenu multilingue à grande échelle, l’effort nécessaire pour l’implémentation HTML habituelle sera relativement élevé. Toutes les versions linguistiques doivent être listées individuellement dans le plan du site, en spécifiant chaque URL correspondante. De plus, chaque URL est spécifiée via un élément xhtml:link qui fait référence aux autres variantes disponibles.

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
  xmlns:xhtml="http://www.w3.org/1999/xhtml">
  <url>
    <loc>http://exempledomaine.fr/</loc>
    <xhtml:link 
      rel="alternate"
      hreflang="de"
      href="http://exempledomaine.fr/"
    />
    <xhtml:link 
      rel="alternate"
      hreflang="it"
      href="http://exempledomaine.fr/it/"
    />
    <xhtml:link 
      rel="alternate"
      hreflang="es"
      href="http://exempledomaine.fr/es/"
    />
    <xhtml:link 
      rel="alternate"
      hreflang="en"
      href="http://exempledomaine.fr/en/"
    />
  </url>
  <url>
    <loc>http://exempledomaine.fr/it/</loc>
    <xhtml:link 
      rel="alternate"
      hreflang="it"
      href="http://exempledomaine.fr/it/"
    />
    <xhtml:link 
      rel="alternate"
      hreflang="de"
      href="http://exempledomaine.fr/"
    />
    <xhtml:link 
      rel="alternate"
      hreflang="es"
      href="http://exempledomaine.fr/es/"
    />
    <xhtml:link 
      rel="alternate"
      hreflang="en"
      href="http://exempledomaine.fr/en/"
    />
  </url>
  <url>
    <loc>http://exempledomaine.fr/es/</loc>
    <xhtml:link 
      rel="alternate"
      hreflang="es"
      href="http://exempledomaine.fr/es/"
    />
    <xhtml:link 
      rel="alternate"
      hreflang="de"
      href="http://exempledomaine.fr/"
    />
    <xhtml:link 
      rel="alternate"
      hreflang="it"
      href="http://exempledomaine.fr/it/"
    />
    <xhtml:link 
      rel="alternate"
      hreflang="en"
      href="http://exempledomaine.fr/en/"
    />
  </url>
  <url>
    <loc>http://exempledomaine.fr/en/</loc>
    <xhtml:link 
      rel="alternate"
      hreflang="en"
      href="http://exempledomaine.fr/en/"
    />
    <xhtml:link 
      rel="alternate"
      hreflang="de"
      href="http://exempledomaine.fr/"
    />
    <xhtml:link 
      rel="alternate"
      hreflang="es"
      href="http://exempledomaine.fr/es/"
    />
    <xhtml:link 
      rel="alternate"
      hreflang="it"
      href="http://exempledomaine.fr/it/"
    />
  </url>
</urlset>

Erreurs fréquentes lors de l’implémentation de la balise hreflang

Les exemples hreflang listés pour HTML et autres montrent que l’implémentation de l’affectation pratique et automatique des utilisateurs pour les pages Web multilingues n’est en aucun cas sorcier. Cependant, ils mettent aussi en évidence l’effort qu’il ne faut pas sous-estimer et le potentiel d’erreur qui va de pair avec les nombreuses références réciproques. Il en résulte des erreurs mineures ou majeures, qui n’affectent parfois que des pages individuelles, mais qui mettent aussi parfois en danger la fonctionnalité de hreflang pour l’ensemble du projet Web. Pour cette raison, nous avons résumé ci-dessous certaines des sources d’erreurs les plus fréquentes :

Hreflang n’est pas implémenté au niveau de l’URL

Puisque la balise hreflang est toujours liée à une URL concrète, elle doit toujours être exécutée à ce niveau. En d’autres termes : si vous marquez l’URL source de vos différentes versions linguistiques avec l’attribut, l’affectation automatique des utilisateurs ne s’applique qu’à ces pages d’accueil et pas uniquement au projet Web complet. C’est donc de votre ressort d’implémenter de manière individuelle l’élément de lien pour les différentes pages multilingues ou alternativement pour travailler avec la variante du plan de site mentionnée.

Une ou plusieurs versions linguistiques ne se réfèrent pas à elles-mêmes

Beaucoup d’opérateurs de sites Web commettent l’erreur et marquent correctement les URL des autres versions linguistiques avec l’attribut hreflang, mais oublient que la page correspondante doit aussi se référer à elle-même. Dans ce cas, la structure du lien est incomplète et ne peut pas être interprétée par Google et d’autres moteurs de recherche.

Codes ISO incorrects

Lorsqu’il s’agit de codes pays ou de langue, beaucoup de référencements tendent rapidement à devenir créatif. Cela ne fonctionne cependant pas toujours et mène souvent à des erreurs au sein du code hreflang implémenté. Ainsi, la combinaison « en-uk » représente certes un choix possible lorsque le contenu de la page s’adresse explicitement à un public de Grande-Bretagne, mais l’indication correcte serait « en-gb ». L’indication « dk-DK » semble évidente lorsqu’il s’agit de s’adresser à des utilisateurs danois. Toutefois, alors que le code pays ISO pour le Danemark est dans les faits « DK », le code langue pour la langue danoise défini dans la norme ISO Standard 639-1 est « da » ; le code hreflang correct est par conséquent « da-DK ».

Renonciation au hreflang x-default

Peu importe que vous travaillez avec le menu de sélection de la langue sur la page d’accueil, les redirections basées sur les adresses IP ou bien les redirections automatiques basées sur la langue du navigateur. Il n’y a, en principe, aucune raison de renoncer à une page par défaut. En tant que quasi remplaçant, hreflang x-default vous aidera à créer un site performant, séduisant les utilisateurs dont la langue ou le pays ne sont pas représentés sur votre site Web. Google recommande également l’utilisation de cette version d’affichage.

Référence d’URL ancienne ou n’existant plus

Une erreur que l’on retrouve fréquemment dans les balises hreflang défectueuses est l’utilisation d’URL qui n’existent pas ou plus. Cela se produit en premier lieu lorsque les désignations sont automatiquement incluses dans toutes les sous-pages, mais toutes ces pages ne sont pas disponibles dans toutes les variantes linguistiques proposées. Souvent, les Webmasters oublient d’implémenter une logique correspondante afin que seules les URL existantes soient marquées comme cibles alternatives. Les URL obsolètes apparaissent logiquement toujours lorsque vous apportez des modifications à la structure de l’URL et ne transférez pas ces changements aux éléments de lien.

Utilisation contradictoire des balises Canonical et hreflang

Beaucoup de fournisseurs internationaux de sites Web ont recours à la balise Canonical, afin que les crawlers n’indexent pas deux fois les pages au même contenu. Cette procédure est une option de première classe pour éviter le problème du duplicate content (contenu dupliqué), mais elle n’est toutefois pas compatible avec l’utilisation de l’attribut hreflang. Si une page contient deux balises, les moteurs de recherche reçoivent les informations contradictoires suivantes :

  • Ignorer cette page et rendez-vous à la place à la page suivante (balise Canonical).
  • En plus de cette page, il existe d’autres pages qui peuvent être plus adaptées à l’utilisateur. Cette page doit cependant être répertoriée et indexée comme une option possible. (balise hreflang).

D’une part, une telle URL se réfère à elle-même, mais d’autre part à une autre URL qui contient à son tour un backlink. En conséquence, le moteur de recherche ignore les deux signaux et essaye de comprendre la structure d’une autre manière. La balise hreflang doit être seulement utilisée pour des pages qui ne renvoient pas à une autre page via l’attribut Canonical.

Les paramètres des outils Google Webmaster envoient des signaux contradictoires

Si vous enregistrez votre site Web dans les outils Google Webmaster (Search Console), une extension internationale d’un domaine ou d’une l’URL peut être définie à condition d’utiliser des domaines génériques de premier niveau. Pour les extensions de domaine spécifique à chaque pays, Google se charge lui-même de cette mission. Il ne fait aucun doute qu’en tant qu’exploitant de site Web, vous bénéficiez de cette fonction : Google utilise ces informations pour catégoriser vos pages de manière optimale. Cependant, vous ne devriez jamais oublier de prendre en compte ces paramètres dans vos mesures SEO. Si vous marquez également les pages avec l’attribut hreflang, il ne devrait pas y avoir de contradiction. Par exemple, cela peut rapidement arriver qu’une page soit marquée avec un seul code de langue et sans spécification régionale, alors qu’un pays spécifique est attribué simultanément dans les outils Webmaster.

Outils hreflang utiles

Il est évident que l’intégration de la balise hreflang au sein de toutes les pages HTML pertinentes demande un certain effort et beaucoup de code. Plus le site multilingue est complexe, plus il est probable qu’une erreur survienne lors de l’implémentation, même lorsque vous connaissez les sources d’erreur potentielles et les gardez en tête. Pour cette raison, il est conseillé d’utiliser des outils afin de créer des balises et vérifier leur fonctionnalité à intervalles réguliers. Quelques fournisseurs intéressants peuvent être trouvés dans la liste suivante :

  • SISTRIX hreflang Generator : avec le générateur gratuit hreflang de SISTRIX, vous pouvez créer sans problème des éléments de lien avec l’attribut hreflang pour l’en-tête HTML de votre contenu multilingue. Pour ce faire, vous entrez simplement les URL pertinentes ainsi que les abréviations de langue et pays souhaitées, puis générer le code en cliquant sur « Créer le code ». Il est également possible de définir une page par défaut.
     
  • SISTRIX hreflang Validator : si vous avez implémenté des références pour diverses versions linguistiques dans votre projet Web, vous pouvez faire usage du validateur hreflang de SISTRIX. Le service Web gratuit vérifie que les balises hreflang d’une URL donnée sont correctes.
     
  • flang : l’entreprise marketing Dejan SEO met à votre disposition avec flang une possibilité gratuite de vérifier vos éléments hreflang. Après un court laps de temps, vous recevrez les langues et régions cibles définies pour toutes les alternatives saisies et, en cas de problème, des suggestions d’optimisation pour l’URL souhaitée.
     
  • Google Search Console: l’inscription auprès de Google facilite non seulement la compréhension de votre site par le moteur de recherche mais vous permet aussi d’avoir accès à divers outils d’analyse pour optimiser votre projet Web. Sous la rubrique « Ciblage internationale », le tableau de bord vous fournit également des informations sur les balises hreflang utilisées, y compris une liste des backlinks manquants.

Pourquoi est-ce intéressant d’utiliser hreflang ?

La raison principale liée à l’utilisation d’attributs comme Canonical ou hreflang est que les contenus dupliqués de projets Web multilingues doivent être évitées. Souvent, plusieurs marchés doivent être servis sans que les contenus, avec une exception pour la traduction, se différencient. Pour les pays dans lesquels la même langue est utilisée, la situation est différente et même encore plus compliquée. Quelques petites modifications en raison de différences culturelles ou régionales (vocabulaire, devise, informations de contact etc.) s’opposent en grande partie aux contenus identiques. Puisque, en règle générale, le même domaine est utilisé, il est important d’envoyer un signal clair aux moteurs de recherche, afin d’éviter un classement négatif.

Alors que l’attribut Canonical déclare qu’une URL est la variante dominante et exclut toutes les versions alternatives de l’indexation, l’attribut hreflang signale quelle version d’un certain groupe cible (langue et/ou pays) doit être présentée dans le moteur de recherche. Pour cette raison, la balise HTML est toujours appropriée si vous voulez rencontrer un bon site à l’international et disposez du contenu multilingue correspondant. Même si l’attribut n’a pas d’influence directe sur le classement dans les moteurs de recherche, l’utilisation correcte sera payante à long terme car les crawlers et les utilisateurs des différents pays peuvent mieux capturer votre site Web.

Remarque

attention ! Ce ne sont pas tous les moteurs de recherche qui utilisent l’attribut hreflang. Bing capture par exemple la version linguistique d’une page en utilisant les attributs de langue de contenu dans les balises méta.