Balises hreflang : le guide ultime

Que sont les balises hreflang ?

Hreflang est un code - plus précisément, un attribut HTML - qui spécifie toutes les URL d'un site qui utilisent le même contenu. L'attribut hreflang a été introduit par Google il y a plus de dix ans et permet aux utilisateurs de montrer aux moteurs de recherche la relation entre plusieurs pages Web dans différentes langues. Cela s'avère utile lorsque le contenu est créé pour un public spécifique. Pour les entreprises disposant de plusieurs versions de la même page Web dans différentes langues, la balise hreflang communique ces variations aux moteurs de recherche et aide à fournir la version correcte aux utilisateurs.

Par exemple, si quelqu'un recherche "Ikea" sur Google aux États-Unis, il verra ce résultat :

Alors que la même requête par un chercheur au Canada renverrait ce résultat :

Pourquoi tout ce remue-ménage ? La balise hreflang permet aux moteurs de recherche de fournir des résultats aux utilisateurs en fonction de leur pays et de leur préférence linguistique, ce qui rend la signification de la balise hreflang inestimable : elle optimise l'expérience utilisateur et améliore les classements de recherche. Comment est-ce pour un gagnant-gagnant?

Pourquoi hreflang est-il important pour le référencement ?

Tout se résume à des résultats personnalisés. Tout le travail acharné de traduction d'une page Web en plusieurs langues est perdu si un utilisateur n'est pas dirigé vers les résultats qui lui sont adaptés. En bref, le référencement hreflang permet aux moteurs de recherche de fournir aux utilisateurs la version la plus appropriée de la page Web d'une entreprise en fonction de leur langue et de leur emplacement. Vous avez une page optimisée pour les préférences particulières d'un utilisateur ? Non seulement vous voulez qu'ils atterrissent là-bas, mais vous voulez aussi qu'ils s'attardent - pour une poignée de raisons - et les balises hreflang SEO sont la façon de le faire.

La mise en œuvre de cette pratique améliore l'expérience utilisateur, minimise les rebonds vers les résultats de recherche et donne des classements plus élevés. (Si au début vous ne réussissez pas, essayez, réessayez n'est pas nécessairement un proverbe utile lorsque vous naviguez dans des recherches sur le Web). L'objectif ici n'est pas d'augmenter le trafic, mais plutôt de proposer le bon contenu aux bons utilisateurs, qui souhaitent des retours rapides et fiables. Les balises hreflang sont la clé pour obtenir ces résultats nuancés.

Besoin d'une autre raison ? L'utilisation d'un hreflang élimine le problème du contenu dupliqué. Imaginez que votre entreprise offre le même contenu en anglais sur différentes URL destinées aux États-Unis et au Canada ; les différences sont probablement infimes et se reflètent dans les détails des devises (USD contre CAD) et le jargon (système impérial contre système métrique).

Une balise hreflang aide les moteurs de recherche à reconnaître et à comprendre la relation entre ces pages et le public distinct pour lequel chacune a été créée. Sans hreflang, Google pourrait être enclin à considérer ces pages comme du contenu en double et à ne renvoyer qu'un seul des résultats ; avec hreflang, il est très clairement indiqué au moteur de recherche que bien que le contenu soit (largement) le même, il est optimisé pour différentes populations. Comment est-ce pour une plume dans votre casquette (ou touque, pour nos amis canadiens) ?

Ces détails sont importants, alors lisez la suite pour en savoir plus.

À quoi ressemblent les balises hreflang ?

Les balises hreflang sont simples, cohérentes et utilisent la syntaxe suivante :

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

Ce format communique que la page liée est une version alternative de la page actuelle, apparaissant dans la langue "x". Les balises hreflang servent de signaux pour les moteurs de recherche, pas de directives. En d'autres termes, l'attribut hreflang signale au moteur de recherche qu'un utilisateur qui interroge en utilisant la langue "x" préférera ce résultat à une page avec un contenu largement similaire dans la langue "y". Une autre différence entre les signaux et les directives ? Google peut ne pas reconnaître les attributs hreflang s'ils sont jugés inexacts, ce qui fait que d'autres facteurs de référencement remplacent l'attribut hreflang, ce qui fait qu'une version alternative de la page de votre entreprise est mieux classée que la meilleure version.

Utilisation du HTML Hreflang

Pour les sites Web qui ont été traduits en plusieurs langues, la construction d'une balise hreflang est aussi simple que 1-2-3. Chacune de ces étapes utilise la syntaxe mentionnée ci-dessus (<link rel="alternate" hreflang="x" href="https://www.example.com/new-page" />) comme base.

1. L'attribut hreflang doit contenir une valeur valide constituée de la langue ; ces informations sont communiquées dans un code à deux lettres appelé format ISO 639-1. Si vous vouliez traduire la page d'exemple en portugais, par exemple, cela ressemblerait à ceci :

    <link rel="alternate" hreflang="pt" href="https://example.com/portugese-version" />

   La région est facultative et, si elle est utilisée, doit être au format ISO 3166-1 Alpha 2. Voici deux balises différentes que vous pouvez utiliser pour cibler les lusophones au Portugal et au Brésil, respectivement :

    PT-PT : <link rel="alternate" hreflang="pt-pt" href="https://example.com/pt/our-page" />
   PT-BR : <link rel="alternate" hreflang="pt-br" href="https://example.com/br/our-page" />

   Les codes régionaux ne sont pas nécessairement intuitifs (le code pour le Royaume-Uni est "gb" et non "uk"), alors vérifiez bien ! Utilisez cette liste pour vérifier l'exactitude des codes de langue et de région avant d'intégrer des informations erronées sur votre site.

2. Chaque URL a besoin de liens de retour vers toutes les autres URL, qui doivent toutes pointer vers la version canonique ou préférée d'un site Web donné. Plus vous avez de langues, plus vous aurez besoin de liens hreflang ; bien qu'il puisse être tentant de les limiter, il est impossible d'éviter cette étape. De plus, rel=”alternate” hreflang=”x”markup et rel=”canonical” peuvent et doivent être utilisés ensemble. Chaque langue doit avoir un lien rel="canonical" pointant vers elle-même. À partir de la page d'accueil example.com, cela ressemblerait à ceci :

    <lien rel="canonical" href="http://example.com/">
   <link rel="alternate" href="http://example.com/" hreflang="pt" />
   <link rel="alternate" href="http://example.com/pt-pt/" hreflang="pt-pt" />
   <link rel="alternate" href="http://example.com/pt-br/" hreflang="pt-br" />

   Pour en savoir plus sur les canoniques, lisez Balises et URL canoniques : un guide simple pour les débutants.

3. La dernière étape d'une construction hreflang réussie est ancrée dans les auto-liens. Un attribut hreflang sur chaque page nécessite une référence à lui-même et à toutes les pages qui lui servent d'alternative. Google recommande fortement de définir une page "x-default" qui établit une URL unique comme version par défaut qui ne cible pas une langue ou une région particulière pour les visiteurs qui ne correspondent pas à ce qui est spécifié. Si l'on visite la page pt-pt, seule la version canonique changerait:

    <link rel="canonical" href="http://example.com/pt-pt/">
   <link rel="alternate" href="http://example.com/"hreflang="pt" />
   <link rel="alternate" href="http://example.com/pt-pt/"hreflang="pt-pt" />
   <link rel="alternate" href="http://example.com/pt-br/"hreflang="pt-br" />

C'est beaucoup à digérer ! Mais vous êtes arrivé jusqu'ici, ce qui signifie que vous êtes prêt pour la prochaine étape : apprendre à implémenter les balises hreflang.

Implémentation des balises hreflang

Il existe trois façons d'implémenter les balises hreflang, et tout se résume au placement :

1 – Implémentation des balises Hreflang en utilisant HTML :

Pour ceux qui découvrent hreflang, l'utilisation de balises HTML de base est le moyen le plus simple et le plus rapide de démarrer. Ajoutez simplement les balises hreflang appropriées (voir ci-dessus) dans la balise <head> de votre page Web.

Exemple : Le webmaster de example.com souhaite rendre sa page d'accueil accessible aux utilisateurs anglophones et hispanophones aux États-Unis ; l'utilisation des annotations suivantes dans le <head> du HTML de leur site accomplit ceci :

 <link rel="alternate" href="https://www.example.com" hreflang="en-us" />
<link rel="alternate" href="https://www.example.com/es" hreflang="es-us" />

S'ils voulaient montrer la page d'accueil aux utilisateurs hispanophones du Venezuela et du Mexique, l'annotation hreflang ressemblerait à :

 <link rel="alternate" href="https://www.example.com/ve" hreflang="es-ve" />
<link rel="alternate" href="https://www.example.com/mx" hreflang="es-mx" />

Le plus gros inconvénient de cette méthode ? Le code HTML hreflang peut devenir désordonné et prendre du temps assez rapidement. N'oubliez pas non plus qu'il existe une différence entre les éléments <head> et <header> ; le <head> contient des éléments qui n'apparaîtront pas sur la page, dans ce cas, l'attribut hreflang.

2 – Implémentation des en-têtes HTTP Hreflang :

Pour les fichiers PDF et le contenu non HTML de votre site Web, utilisez des en-têtes HTTP pour implémenter hreflang. Le nom est un peu trompeur : l'implémentation ne se fait pas sur la page via <head> ou <header>. Au lieu de cela, tout est fait sur le backend d'un site. L'utilisation d'en-têtes HTTP spécifie non seulement la langue relative des variantes de document, mais optimise également ce contenu.

Exemple : Pour identifier un document PDF sur votre site en versions anglaise et française, le lien apparaissant dans l'entête HTTP ressemblera à ceci :

 Lien : <http://en.example.com/document.pdf> ; rel="alternatif" ; hreflang="fr", 
<http://fr.example.com/document.pdf> ; rel="alternatif" ; hreflang="fr"

Le plus gros inconvénient de cette méthode de mise en œuvre ? L'utilisation d'en-têtes HTTP ajoute une surcharge à chaque requête effectuée sur votre site, ce qui peut ralentir l'expérience de navigation de l'utilisateur.

3 - Implémentation de Hreflang dans votre sitemap XML

La dernière option pour implémenter hreflang consiste à utiliser le balisage de plan de site XML ; cela utilise l'attribut xhtml:link en XML pour ajouter l'annotation à chaque URL.

Bien qu'il existe plusieurs façons d'implémenter hreflang dans votre sitemap XML, nous recommandons quelque chose comme ceci :

Alternativement, vous pouvez utiliser certains des exemples ci-dessous.

Attention : le balisage nécessaire pour une seule URL avec une paire de variables langue/localisation paraîtra long ! Cela dit, lisez la suite pour les avantages. (Il y a beaucoup de!)

Exemple:

 <URL>
<loc>http://www.example.com/uk/</loc> 
<xhtml:link rel="alternate" hreflang="en" href="http://www.example.com/" /> 
<xhtml:link rel="alternate" hreflang="en-au" href="http://www.example.com/au/" /> 
<xhtml:link rel="alternate" hreflang="en-gb" href="http://www.example.com/uk/" />
</url>

Notez que la troisième URL se référence elle-même ; cela spécifie que l'URL particulière est destinée à en-gb, et elle spécifie deux autres combinaisons langue/emplacement. Maintenant, la mise en œuvre de ces deux URL dans le sitemap ressemblerait à ceci :

 <URL>
<loc>http://www.example.com/</loc> 
<xhtml:link rel="alternate" hreflang="en" href="http://www.example.com/" /> 
<xhtml:link rel="alternate" hreflang="en-au" href="http://www.example.com/au/" /> 
<xhtml:link rel="alternate" hreflang="en-gb" href="http://www.example.com/uk/" />
</url>
<URL>
<loc>http://www.example.com/au/</loc> 
<xhtml:link rel="alternate" hreflang="en" href="http://www.example.com/" /> 
<xhtml:link rel="alternate" hreflang="en-au" href="http://www.example.com/au/" /> 
<xhtml:link rel="alternate" hreflang="en-gb" href="http://www.example.com/uk/" />
</url>

En supposant que vous puissiez regarder au-delà de la mer de texte, vous remarquerez que seules les URL de l'élément <loc> sont modifiées - tout le reste reste le même ! Ouf. Cette méthode s'appuie sur chaque URL ayant un attribut hreflang auto-référencé et renvoie des liens vers d'autres URL.

Cela ressemble à beaucoup de travail, non? D'une part, oui, cette méthode est longue et nécessite un peu de sortie lors de cette opération pour de nombreuses URL. Cela dit, l'avantage est simple : les utilisateurs normaux ne seront pas dérangés par ce balisage ; il n'y a pas de poids de page supplémentaire ajouté, et la génération de ce type de balisage ne nécessite pas beaucoup d'appels de base de données lors du chargement de la page.

Enfin, la mise en œuvre de hreflang via le sitemap XML présente un avantage majeur : tout est défini dans un seul fichier. Cela élimine le besoin d'éditer plusieurs documents HTML chaque fois qu'une page est modifiée ou supprimée. De plus, aucun ralentissement du site. En d'autres termes, il y a beaucoup à aimer!

Vous ne savez toujours pas quel mode de mise en œuvre choisir ? Pour plus de conseils sur l'architecture et la structure du site Web, consultez les meilleures pratiques techniques de référencement.

Trouver et résoudre les problèmes de hreflang

Maintenant que vous avez réussi à implémenter hreflang sur votre site Web (insérez un high five virtuel ici !), la maintenance est indispensable. L'exécution d'un audit régulier de l'implémentation que vous avez choisie garantira qu'elle est correctement configurée. Communiquer avec les personnes de votre entreprise qui s'occupent du contenu du site ira loin - vous voulez qu'elles connaissent hreflang, afin qu'elles ne cassent pas involontairement votre implémentation !

Deux points critiques méritent d'être mentionnés ici : Si une page est supprimée, vérifier si ses homologues ont été mis à jour ; lorsqu'une page est redirigée, changez les URL hreflang de ses homologues. En supposant que vous et votre équipe fassiez ces choses de manière cohérente et que vous effectuiez des audits réguliers, la navigation devrait se dérouler sans heurts.

En attendant, voici un bref aperçu des erreurs hreflang les plus courantes et comment les corriger :

1 – Annotation hreflang d'auto-référence manquante

Quel est le problème ? Il est important d'utiliser une balise hreflang auto-référencée chaque fois que vous ajoutez une balise hreflang à une page Web. N'oubliez pas que Google déclare que "chaque version linguistique doit se répertorier ainsi que toutes les autres versions linguistiques".

Comment résoudre ce problème : passez en revue toutes les pages concernées et ajoutez une balise hreflang auto-référençante à chacune en utilisant la méthode de mise en œuvre que vous avez choisie.

2 – Annotation hreflang invalide

Quel est le problème ? Les moteurs de recherche ignorent les balises hreflang non valides, ce qui conduit à ignorer les versions alternatives de votre page Web.

Comment résoudre ce problème : examinez les pages concernées, supprimez les balises hreflang non valides et remplacez-les par celles qui utilisent des formats de code de langue/localisation valides.

3 – Page référencée pour plus d'une langue en hreflang

Quel est le problème ? Chaque élément de contenu est conçu pour servir une seule langue/un seul emplacement de langue. Deux ou plusieurs références conflictuelles confondront les moteurs de recherche et entraîneront l'ignorance des attributs hreflang.

Comment résoudre ce problème : passez en revue les pages concernées et inspectez les URL qui référencent une page particulière dans leurs attributs hreflang pour détecter les erreurs. Supprimez tout attribut hreflang incorrect et ne laissez qu'un seul attribut correct par langue.

4 – Hreflang réciproque manquant (pas de balise de retour)

Quel est le problème ? Les balises hreflang sont bidirectionnelles (si la page A est liée à la page B dans les annotations hreflang, la page B doit être liée à la page A en retour).

Comment résoudre ce problème : examinez les pages concernées et ajoutez des balises hreflang bidirectionnelles si nécessaire. Remarque : le rapport de ciblage international de Google Search Console (qui se trouve sous l'onglet "Langue") signalera toutes les instances de balises de retour manquantes.

Par exemple:

5 – Hreflang à non canonique

Quel est le problème ? Rel="alternate" hreflang="x" indique aux moteurs de recherche d'afficher la version traduite (localisée) d'une page ; L'attribut rel=canonical indiquera qu'il ne s'agit pas de la version faisant autorité (canonique). Ces attributs contradictoires confondront les moteurs de recherche.

Comment résoudre ce problème : examinez les pages concernées et modifiez les annotations hreflang afin qu'elles pointent uniquement vers des URL canoniques. Si vous tombez sur une page avec une balise canonique invalide, supprimez-la. Cela garantit que l'attribut hreflang est correctement compris et suivi par le moteur de recherche.

6 – Non-concordance des langages hreflang et HTML

Quel est le problème ? Les moteurs de recherche (autres que Google) deviennent confus lorsqu'il y a une incohérence entre l'attribut de langage hreflang et HTML déclaré pour une ou plusieurs URL ; il est important de garder ces deux attributs cohérents l'un avec l'autre.

Comment résoudre ce problème : examinez les pages concernées et modifiez l'attribut de langage HTML pour vous assurer qu'il reste cohérent avec l'attribut hreflang déclaré.

7 -Hreflang vers une page cassée

Quel est le problème ? Un moteur de recherche ne peut pas renvoyer un contenu qui n'existe pas ! Par conséquent, les attributs hreflang qui pointent vers des pages mortes seront ignorés.

Comment résoudre ce problème : examinez les pages concernées et modifiez les annotations hreflang pour vous assurer qu'elles renvoient aux pages de travail.

8 – Plusieurs pages pour la même langue en hreflang

Quel est le problème ? Lorsqu'une ou plusieurs URL référencent deux pages ou plus pour la même langue (ou langue-emplacement) dans les annotations hreflang, le moteur de recherche devient confus.

Comment résoudre ce problème : examinez les pages concernées et supprimez l'une des annotations hreflang, afin qu'une seule page soit référencée pour chaque langue.

9 – Annotation hreflang par défaut X manquante

Quel est le problème ? Bien que les attributs x-default hreflang soient facultatifs, ils sont recommandés en tant que meilleure pratique SEO pour toutes les annotations hreflang.

Comment résoudre ce problème : examinez les pages concernées et assurez-vous que chacune possède un ensemble d'attributs hreflang "x-default" qui pointe vers une page NON spécifique à une langue ou à un emplacement particulier.

Vous avez encore des questions ? Consultez la mise à jour de l'algorithme Core Web Vitals, qui décrit les pratiques de référencement technologique supplémentaires sur lesquelles vous voudrez être à jour cette année.

Problèmes que Google peut ignorer

Vous avez fait votre part en suivant les meilleures pratiques, mais il y aura des moments où les moteurs de recherche ignoreront certains problèmes. Cela se produit principalement lorsqu'un moteur de recherche voit le même problème à plusieurs reprises et pense qu'il peut être pris en compte de son côté. Ne t'en fais pas ! C'est en fait super utile. Voici une poignée de problèmes de balises hreflang que Google "corrige" pour vous :

1. Soulignement au lieu d'un tiret : il s'agit d'une erreur courante, et Google en tient compte. Tous. Seul. Temps.
2. Utiliser en-UK au lieu de en-GB : nous en avons parlé plus tôt… le fait que les codes régionaux ne sont pas nécessairement intuitifs. Rassurez-vous, Google vous couvre : le Royaume-Uni est un code réservé, ce qui signifie que Google corrige ce problème courant.
3. Hreflang n'ayant pas d'auto-référence : Google a récemment déclaré que l'auto-référencement hreflang est facultatif ; cela dit, cela reste une bonne pratique.
4. URL relatives contre URL absolues : alors que les chemins canoniques et hreflang peuvent utiliser des chemins relatifs, l'absolu est plus absolu ! D'où la recommandation de l'utiliser lorsque cela est possible.

Rediriger les utilisateurs : une mise en garde

Dans de nombreux cas, les sites Web redirigeront les utilisateurs en fonction d'une combinaison de cookies, d'adresse IP et/ou de la langue du navigateur ; attention à la redirection ! Pour les utilisateurs, cela peut se traduire par une expérience frustrante (lire sous la moyenne) ; pour les moteurs de recherche, essayer d'indexer votre contenu devient problématique. De plus, la redirection des utilisateurs peut rompre les connexions établies nécessaires pour vos balises hreflang.

Voici ce que Google a à dire sur la pratique :

N'utilisez pas l'analyse IP pour adapter votre contenu. L'analyse de l'emplacement IP est difficile et généralement peu fiable. De plus, Google peut ne pas être en mesure d'explorer correctement les variantes de votre site. La plupart des explorations Google, mais pas toutes, proviennent des États-Unis, et nous n'essayons pas de varier l'emplacement pour détecter les variations de site. Utilisez l'une des méthodes explicites présentées ici (hreflang, URL alternatives et liens explicites).

Traitez les robots des moteurs de recherche comme vous le feriez avec un utilisateur de n'importe quel endroit. Traiter le bot du moteur de recherche différemment de ce que vous feriez avec un utilisateur est considéré comme du cloaking (la pratique consistant à présenter un contenu ou des URL différents aux utilisateurs humains et aux moteurs de recherche) est une violation des consignes aux webmasters de Google.

Vous voulez un correctif approuvé qui offre aux utilisateurs les résultats qu'ils attendaient ? Utilisez la même logique de détection pour suggérer une meilleure version de la page à l'utilisateur sur une petite bannière. La seule mise en garde est que s'il est trop volumineux, il pourrait être considéré comme un interstitiel (ce qui entraînerait un obscurcissement total ou partiel du contenu pour l'utilisateur).

Astuce pro hreflang

Il existe une extension Google Chrome qui automatise le processus de vérification du déploiement hreflang d'un site. Obtenez des informations exclusives à ce sujet et sur d'autres modules complémentaires SEO Chrome qui peuvent vous aider à gérer la maintenance SEO quotidienne.

Conclusion

Comprendre, utiliser et dépanner hreflang est une exigence pour le référencement d'aujourd'hui. Vous voulez être sûr que vous faites tout votre possible pour augmenter la visibilité de votre site aux quatre coins du monde ? Victorious creuse profondément pour découvrir les tendances culturelles locales et les habitudes d'achat qui influencent la recherche afin de déterminer la meilleure stratégie pour votre campagne de référencement international.

Prêt à démarrer avec une agence SEO ? Inscrivez-vous dès aujourd'hui pour votre consultation SEO gratuite et laissez Victorious vous guider tout au long du processus.