hreflang, l’attribut HTML pour les sites multilingues

Celui qui veut internationaliser sa présence sur le Web et la proposer en différentes langues doit faire face à plusieurs tâches, y compris l’optimisation pour les moteurs de recherche des différentes versions linguistiques. Ce n’est que sur la base de mesures SEO spécifiques à la langue ou au pays que les crawlers des moteurs de recherche sont en mesure de classer correctement les différentes versions linguistiques du site Web et de les présenter ultérieurement au public approprié. L’un des moyens les plus efficaces à cet effet est l’attribut de lien 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 du site 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

Pourquoi est-il intéressant d’utiliser hreflang pour le SEO ?

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.

Comment l’attribut hreflang est-il structuré ?

La balise hreflang est basée sur l’élément de lien HTML. L’élément de lien <link /> est un élément vide qui sert uniquement à désigner une URL donnée avec les attributs correspondants. Il ne peut être utilisé que dans la zone d’en-tête, mais aussi souvent que nécessaire. Pour associer les différentes versions linguistiques à hreflang, deux attributs rel et href sont nécessaires en plus de l’attribut hreflang. Les trois différents éléments ont la fonction suivante :

• rel : rel 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 la langue dans laquelle le document lié est rédigé et peut éventuellement indiquer le pays pour lequel il est particulièrement pertinent. Vous trouverez une liste claire de toutes les combinaisons possibles sur lingoes.net.
• href : l’attribut href indique par défaut l’URL de la version linguistique alternative.

Voici un exemple :

<link rel="alternate" hreflang="Code langue-Code Pays" href="URL du site Web" />

Si les utilisateurs ne sont pas affectés à une version linguistique appropriée, c’est le classement qui détermine laquelle des variantes linguistiques doit être affichée. Dans ce cas, vous risquez de perdre des lecteurs potentiels après quelques secondes seulement, car ils se retrouveront sur la mauvaise version linguistique. Google met toutefois à disposition une option avec « x-default » qui vous permet de désamorcer cette situation. Cet élément signale au moteur de recherche que l’URL liée est une solution standard pour tous les utilisateurs pour lesquels il n’existe pas de version linguistique explicitement indiquée. En voici un exemple :

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

Dans la page d’introduction Google de « x-default hreflang » pour les sites Web internationaux, cet élément est abordé plus en détail.

Comment implémenter hreflang ?

Le tag hreflang peut être implémenté de trois manières différentes : le plus souvent, cela se fait en l’intégrant dans la zone Head du document HTML concerné. Pour les documents qui ne sont pas au format HTML (comme un fichier PDF), l’élément peut également être inséré dans l’en-tête HTTP-Header. Enfin, il est aussi possible d’intégrer l’attribut hreflang dans le sitemap.

L’intégration dans un en-tête HTTP fonctionne en principe selon le même modèle, car il s’agit là aussi de référencer toutes les versions linguistiques existantes. Seule la syntaxe présente quelques différences :

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

Le marquage de l’attribut hreflang dans un sitemap XML est une alternative judicieuse au marquage simple dans les différentes pages, notamment si vous gérez un projet Web international. En effet, si vous proposez des contenus multilingues à grande échelle, l’effort à fournir pour l’implémentation HTML habituelle serait relativement élevé. Dans un plan du site, toutes les versions linguistiques doivent également être mentionnées individuellement en indiquant l’URL correspondante. Chaque URL est en outre spécifiée par 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="fr"
            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>
</urlset>

Vous devez ensuite répéter la balise <url> selon le même modèle pour chaque version linguistique de votre article.

Pour comprendre le fonctionnement du tag 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" />

Erreurs fréquentes lors de l’intégration du tag 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 non 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 renvoient 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.

Il ne faut pas non plus renoncer à l’indication d’une page par défaut au moyen de hreflang x-default. Le cas échéant, vous laisseriez ainsi un certain potentiel d’optimisation inexploité.

Codes ISO incorrects

Lorsqu’il s’agit des codes de pays et de langue, on pourrait être tenté d’être créatif. Mais cela n’est pas toujours couronné de succès et conduit souvent à ce que le code hreflang soit erroné. Ainsi, la combinaison "en-uk" semble être un choix pertinent si le contenu de la page s’adresse explicitement au public britannique, mais la combinaison correcte est en fait "en-gb". Vérifiez toujours les codes de pays que vous utilisez à l’aide de la norme ISO 639-1.

Référence à des URL anciennes ou inexistantes

L’utilisation d’URL qui n’existent plus est une cause fréquente d’erreurs dans les tags hreflang. Cela se produit en premier lieu lorsque les balises sont intégrées automatiquement sur toutes les sous-pages, mais que toutes ces pages ne sont pas disponibles dans chaque variante de langue proposée. Les URL obsolètes apparaissent logiquement toujours lorsque vous effectuez des modifications de la structure de l’URL et que vous ne transférez pas ces adaptations dans les éléments de lien.

Utilisation contradictoire de la balise Canonical et de la balise hreflang

De nombreux fournisseurs de sites Web internationaux ont recours à la balise Canonical afin que les robots des moteurs de recherche n’indexent pas deux fois les pages ayant le même contenu. Cette procédure est certes une option de premier ordre pour contourner le problème du duplicate content, mais elle n’est pas compatible avec l’utilisation de l’attribut hreflang. En effet, si une page contient les deux balises, les moteurs de recherche reçoivent des informations contradictoires et ignorent les deux signaux.

Le marquage hreflang ne doit donc être utilisé que pour les pages qui ne renvoient pas à une autre page via l’attribut Canonical.

Les paramètres dans Google Webmaster Tools envoient des signaux contradictoires

Lorsque vous inscrivez votre site Web dans les Google Webmaster Tools (Search Console), vous pouvez définir l’orientation internationale d’un domaine ou d’une URL, si des domaines génériques de premier niveau sont utilisés. Pour les extensions de domaine spécifiques à un pays, Google se charge même de cette attribution. Il ne fait aucun doute qu’en tant que gérant de site Web, vous profitez de cette fonction : Google utilise ces informations pour catégoriser vos pages de manière optimale. Cela vaut donc vraiment la peine d’informer Google des versions localisées de votre site.

L’attribut hreflang impacte le SEO : n’oubliez donc pas d’intégrer ces paramètres dans vos mesures SEO. Ainsi, si vous marquez des pages avec l’attribut hreflang, il ne devrait pas y avoir de contradiction. Il peut par exemple arriver rapidement qu’une page ne soit marquée que par une abréviation de langue et sans spécification régionale, alors qu’un pays spécifique est indiqué dans les outils Webmaster.

Quelques outils hreflang utiles

Il est évident que l’intégration de la balise hreflang dans toutes les pages HTML pertinentes nécessite un certain effort et beaucoup de code. Plus votre site Web multilingue est complexe, plus il est probable que des erreurs se glissent lors de l’implémentation, même si vous connaissez les sources d’erreurs potentielles présentées et que vous les gardez à l’esprit. C’est pourquoi il est recommandé d’utiliser des outils pour créer les balises et pour vérifier leur fonctionnement à intervalles réguliers. Vous trouverez quelques outils intéressants dans la liste suivante :

• SISTRIX hreflang Generator : avec le générateur hreflang gratuit de SISTRIX, vous créez sans problème des éléments de lien avec attribut hreflang pour l’en-tête HTML de vos contenus multilingues. Pour ce faire, il suffit d’indiquer les URL concernées ainsi que les abréviations de pays et de langue souhaitées et de générer ensuite le code en cliquant sur « Créer le code ». Il est aussi possible de définir une page par défaut.
• SISTRIX hreflang Validator : si vous avez implémenté des références pour différentes versions linguistiques dans votre projet Web, vous pouvez faire usage du validateur hreflang également proposé par SISTRIX. Le service Web gratuit vérifie pour une URL donnée si les balises hreflang définies sont correctes.
• Google Search Console : l’inscription à Google ne facilite pas seulement la saisie de votre site par le moteur de recherche, elle vous permet de plus d’accéder à divers outils d’analyse pour optimiser votre projet Web. Sous la rubrique « Ciblage international », le tableau de bord fournit par exemple également des informations sur les balises hreflang utilisées, y compris une liste des backlinks manquants.
• Hreflang Checker : avec cet outil, les attributs hreflang d’une URL saisie peuvent être présentés rapidement et de manière claire. L’outil indique même de quelle source les attributs hreflang ont été extraits (HTML, HTTP, etc.) et vous suggère comment vous pourriez améliorer vos implémentations hreflang.