Hreflang et balises canoniques : le seul guide dont vous aurez besoin

Les balises hreflang et les balises canoniques sont des indicateurs pour Google et d'autres moteurs de recherche des pages Web à indexer et à afficher à certains chercheurs. Ce sont deux facteurs importants pour le référencement multilingue.

Cependant, les deux types de balises ont des fonctions différentes. C'est pourquoi il est important de ne pas les confondre ni de les utiliser de manière interchangeable. Sinon, cela pourrait entraîner des conséquences inattendues et de mauvais résultats pour votre site Web.

Pour éviter cela, dans cet article, nous allons approfondir les balises hreflang et canoniques. Nous parlerons de ce qu’ils sont, des meilleures pratiques et des erreurs courantes liées à leur utilisation, et de la manière de les configurer correctement manuellement et à l’aide de plugins WordPress.

Que sont les balises hreflang et canoniques (et pourquoi sont-elles importantes ?)

Afin de bien comprendre ce sujet, définissons d'abord les deux types de balises .

Explication des balises hreflang

Les balises Hreflang sont des extraits de code introduits par Google en 2011 pour aider les sites Web internationaux. Leur fonction est d’indiquer aux robots de recherche la langue et l’emplacement géographique auxquels une page Web est destinée. Voici par exemple à quoi ressemble une balise hreflang destinée aux Français et à la Suisse.

 <link rel="alternate" href="https://yoursite.com/ch" hreflang="fr-ch" />

Il se compose de deux parties, la partie rel="alternate" , qui indique qu'il s'agit d'une version alternative à une page Web existante, et la partie hreflang="fr-ch" qui précise sa cible. fr représente la langue et ch le pays, basé sur les codes de langue et de pays ISO.

Cela est particulièrement important pour les sites Web internationaux qui peuvent avoir des pages avec pratiquement le même contenu mais destinées à des marchés linguistiques différents. Les balises Hreflang vous permettent de signaler aux moteurs de recherche que vous disposez de versions localisées pour les chercheurs de ces marchés.

De plus, vous pouvez non seulement cibler une autre langue, mais également une région particulière. Par exemple, bien qu’il existe plusieurs pays hispanophones dans le monde, malgré la langue commune, ils diffèrent par leur dialecte, leur culture et les goûts des consommateurs.

Grâce aux attributs hreflang, il est possible de créer des pages Web destinées à chaque marché et de les marquer en conséquence. De cette façon, vous pouvez les localiser pour le public auquel ils sont destinés tout en utilisant la même langue.

Les balises canoniques en un mot

Les balises canoniques remplissent un rôle similaire à celui des balises hreflang. Ce sont également des extraits HTML qui signalent aux moteurs de recherche quelle URL est la plus pertinente pour les chercheurs. Voici à quoi ils ressemblent :

 <link rel="canonical" href="https://yoursite.com" />

Cependant, au lieu de différencier les variétés linguistiques, les balises canoniques montrent qu'une page Web doit être considérée comme la version officielle ou la copie principale parmi les pages ayant un contenu identique ou très similaire.

Pourquoi auriez-vous le même contenu sur plusieurs pages Web ? Il y a différentes raisons :

• Une page a http:// devant elle, l'autre https://
• Vous republiez un article qui existe déjà sur un autre site Internet (avec autorisation, bien sûr). Ou bien, vous publiez le même contenu sur une autre plateforme comme Medium pour plus de portée.
• Paramètres dans l'URL qui signalent de petits changements dans une page Web, tels que les filtres dans les sites Web de commerce électronique (par exemple https://www.yourwebsite.com/Camping-Hiking/b?ie=UTF8&node=16435151 )

Dans tous ces cas, une balise canonique peut permettre aux moteurs de recherche de savoir ce qu’ils doivent considérer comme la version principale de la page en question et qu’ils doivent l’indexer à la place des autres.

Avantages SEO du hreflang et des balises canoniques

Pourquoi devriez-vous vous donner la peine d’ajouter ces balises à votre site Web ? Parce qu’ils offrent de nombreux avantages SEO :

• Évitez les problèmes de contenu en double — Le marquage de votre contenu empêche explicitement les moteurs de recherche de considérer vos pages comme des doublons. De cette façon, ils sont moins susceptibles de proposer la mauvaise URL aux chercheurs ou de vous punir pour un contenu de mauvaise qualité.
• Transférer les signaux de classement — L'autorité des liens entrants et d'autres signaux de classement sont transmises à la page canonique et partagées par toutes les versions linguistiques.
• Engagement amélioré des utilisateurs — Envoyer les visiteurs vers la bonne version de vos pages, par exemple la langue qu'ils préfèrent, est bon pour les conversions, le temps d'attente, l'engagement des utilisateurs, etc. Ce sont autant de choses théorisées pour avoir un impact positif sur les classements de recherche.
• Évitez de perdre du temps d'exploration — Avec les balises canoniques, vous pouvez empêcher les moteurs de recherche d'indexer certaines pages. Cela signifie qu'ils ne dépensent pas le budget d'exploration sur du contenu sans importance au lieu de ce que vous souhaitez indexer.

Ce qu’il est important de comprendre, c’est que ces balises sont des signaux et non des directives contraignantes. Vous les utilisez pour demander aux moteurs de recherche de faire quelque chose (plutôt s'il vous plaît), mais c'est à eux et à leur algorithme d'honorer votre demande.

hreflang et balises canoniques : meilleures pratiques et erreurs courantes

Maintenant que nous savons ce que sont ces balises, examinons comment les utiliser correctement.

Placez-les aux bons endroits

Votre première question est probablement de savoir où ces liens doivent apparaître. Les balises hreflang et canoniques sont généralement incluses dans la section <head> du balisage HTML d'une page Web.

En fait, pour les balises canoniques, c'est la seule option. Leurs cousins ​​hreflang peuvent également apparaître dans les en-têtes HTTP ou dans un plan de site XML. Nous parlerons en détail ci-dessous de la façon dont vous les y amenez.

Formatez correctement vos balises

L’une des choses les plus importantes à savoir est que les deux balises ne peuvent pas être combinées. Quelque chose comme l'exemple ci-dessous ne sera pas compris par les moteurs de recherche.

 <link rel="canonical" rel="alternate" href="https://yoursite.com" hreflang="fr-ch" />

Au lieu de cela, vous devez afficher les deux types de balises séparément, comme ceci :

 <link rel="alternate" href="https://yoursite.com" hreflang="fr-ch" /> <link rel="canonical" href="https://yoursite.com" />

Parmi les deux signaux, les balises canoniques sont les plus simples à mettre en œuvre. En gros, il suffit de contenir rel="canonical" ainsi que la destination.

Les balises Hreflang sont un peu plus inconstantes. La première chose à noter ici est que vous n’avez pas nécessairement besoin d’inclure à la fois un code de langue et un code de pays. Seule la langue suffit. Cela vous permet de créer une page plus fourre-tout pour les personnes du monde entier qui y effectuent des recherches.

En parallèle, utiliser un code pays permet de créer des pages très spécifiquement ciblées. Nous en avons déjà parlé dans le contexte de l’espagnol ci-dessus. Important : si vous utilisez un code régional, assurez-vous qu'il apparaît en deuxième et non en premier dans la balise hreflang. Vérifiez également la langue et les codes de pays corrects.

Dans le même temps, notez qu’il n’est pas nécessaire que les versions linguistiques alternatives se trouvent sur le même domaine. Si vous utilisez des adresses Web distinctes pour vos différentes versions linguistiques, vous pouvez toujours utiliser hreflang pour préciser qu'elles vont ensemble.

 <link rel="alternate" href="https://yoursite.com" hreflang="en-us" /> <link rel="alternate" href="https://yoursite.br" hreflang="pt-br" />

De plus, pour les deux types de balises, vous devez inclure les URL complètes de vos pages, et non les URL relatives. Voici la différence :

• URL complète : https://votresite.com/shop/pants
• URL relative : /shop/pantalon

En utilisant des URL absolues, vous indiquez clairement les pages dont vous parlez et évitez les ambiguïtés et les erreurs. Si vous avez du mal à créer vos balises, vous pouvez également utiliser un générateur de balises hreflang ou un générateur de balises canoniques.

Rendez-les bidirectionnels et autoréférentiels

Le prochain point important est les pages sur lesquelles placer vos balises. Commençons par les balises hreflang.

Une partie importante ici est que toutes les versions linguistiques doivent avoir des références hreflang à chaque alternative disponible . Autrement dit, toutes vos pages doivent pointer les unes vers les autres. Si ce n'est pas le cas et qu'une balise hreflang ne va que dans un sens, Google l'ignorera.

Par exemple, si vous avez une page en anglais, espagnol et français destinée aux États-Unis, au Canada, en Espagne, en Colombie et en France, vos balises hreflang ressembleraient à ceci :

 <link rel="alternate" href="https://yoursite.com" hreflang="en-us" /> <link rel="alternate" href="https://yoursite.com/uk" hreflang="en-gb" /> <link rel="alternate" href="https://yoursite.es" hreflang="es-es" /> <link rel="alternate" href="https://yoursite.es/col" hreflang="es-co" /> <link rel="alternate" href="https://yoursite.fr" hreflang="fr-fr" />

Ce code exact doit être envoyé sur chacune des pages qui y sont mentionnées.

Ceci est important car cela établit une relation entre ces pages et permet à Google de savoir qu'il s'agit de plusieurs versions du même contenu dans différentes langues et pour différents groupes d'utilisateurs.

Cela signifie également qu'une balise hreflang pointe toujours vers la page sur laquelle elle apparaît. C'est ce qu'on appelle « l'auto-référencement » et constitue une bonne pratique pour les balises hreflang et canoniques.

Avoir une balise canonique sur une page Web qui pointe vers elle-même est un signal qu'il s'agit de la version officielle. Il renforce le message des balises pointant vers la même page depuis d’autres emplacements. Par exemple, si la page A est la page principale et la page B un doublon, les deux auront la même balise canonique ci-dessous.

 <link rel="canonical" href="https://yoursite.com/page-a" />

Évitez les déclarations contradictoires

Il est très important de choisir les bonnes URL pour les balises hreflang et canoniques, surtout si vous les utilisez ensemble. En effet, même s’ils sont similaires dans leur fonction, ce qu’ils signalent aux moteurs de recherche est assez différent.

Les balises Hreflang sont inclusives, tandis que les balises canoniques sont exclusives. Le premier dit : « indexez-moi ainsi que l'autre page mais pour des paramètres régionaux différents », tandis que le second dit : « ne m'indexez pas, indexez l'autre page ».

Ainsi, si vous avez une page avec des balises hreflang qui comporte également une balise canonique pointant n'importe où sauf elle-même, cela donnerait deux déclarations très déroutantes. En gros, il dit : « indexez-moi ainsi que cette autre page et ne m'indexez pas non plus, indexez plutôt l'autre page ».

Dans ce cas, les moteurs de recherche pourraient prendre leurs propres décisions, qui pourraient ne pas correspondre à vos souhaits. Alors, soyez très prudent à ce sujet. En dehors de cela, l’ordre des balises réelles n’a pas d’importance, tant qu’elles sont présentes et correctes.

Utilisation de hreflang="x-default"

Une dernière chose à mentionner ici est la balise x-default. C'est quelque chose que vous pouvez utiliser pour définir une page par défaut parmi différentes versions linguistiques. Lorsque vous le faites, les moteurs de recherche s’en serviront s’il n’existe pas de version plus spécifique pour la langue et/ou les paramètres régionaux d’un chercheur.

Cela vous permet également de définir une version préférée si vous avez des pages dans la même langue mais pour des paramètres régionaux différents (par exemple, anglais américain et britannique). Cela est utile lorsque quelqu'un effectue une recherche dans cette langue mais ne provient d'aucun des deux paramètres régionaux.

Voici à quoi ressemble la balise x-default :

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

Notez qu’il ne contient aucune information sur la langue ou les paramètres régionaux. De plus, l’utilisation de la balise x-default n’est pas obligatoire mais constitue une bonne pratique.

Comment configurer manuellement les balises hreflang et canoniques

Si vous avez suivi jusqu'à présent, vous devriez théoriquement être prêt à implémenter les balises hreflang et canoniques sur votre propre site Web.

La seule question qui reste est : comment procéder ?

Voyons cela maintenant, en commençant par comment le faire manuellement. Ici, vous avez essentiellement deux options pour les placer :

• La section HTML <head> susmentionnée
• Le plan du site XML de votre site Web

(D'autres options sont les en-têtes HTTP, mais celles-ci ne sont importantes que pour le contenu tel que les documents PDF.)

Utilisation de la section <head>

Cette option est plus réalisable pour les petits sites avec peu de pages, pour la plupart statiques, sur lesquels vous modifiez directement les fichiers HTML. Ce n'est pas très pratique pour les grands sites Web créés dynamiquement (comme dans WordPress).

Une fois que vous avez créé vos balises à l'aide des astuces et/ou générateurs ci-dessus, ouvrez vos fichiers HTML avec un éditeur de code et copiez-collez-les entre les balises <head> et </head> , de préférence vers le haut.

Enregistrez et vous avez terminé. En cas de doute ou si cela ne semble pas fonctionner, exécutez vos pages via un validateur HTML.

Cette méthode est relativement simple, cependant, elle peut également être ennuyeuse si jamais vous apportez des modifications à la structure ou aux URL de votre site. Dans ce cas, vous devrez à nouveau modifier chaque page individuellement.

Inclure les balises hreflang dans le plan du site

Si vous envisagez d'implémenter vos balises manuellement, le plan du site pourrait en fait être le meilleur choix. Il vous permet d'effectuer des modifications en un seul endroit, ce qui est plus facile à gérer en cas de modification d'URL ou simplement de nouvelles versions linguistiques à y ajouter. Le format ressemble à ceci :

 <url> <loc>https://yoursite.com</loc> <xhtml:link rel="alternate" hreflang="en-us" href="https://yoursite.com" /> <xhtml:link rel="alternate" hreflang="en-gb" href="https://yoursite.com/uk" /> <xhtml:link rel="alternate" hreflang="es-es" href="https://yoursite.es" /> <xhtml:link rel="alternate" hreflang="es-co" href="https://yoursite.es/col" /> <xhtml:link rel="alternate" hreflang="fr-fr" href="https://yoursite.fr" /> </url>

Chaque page avec des versions dans différentes langues doit être entourée de crochets <url> . L'élément <loc> en haut définit l'URL d'origine, tandis que l'élément <xhtml: link> définit chaque alternative linguistique. Il utilise essentiellement le même format que la version HTML.

Ici aussi, vous pouvez utiliser les outils générateurs susmentionnés pour créer les balises hreflang. Comme expliqué précédemment, les balises canoniques doivent figurer dans la section <head> , vous ne pouvez pas les définir dans le plan du site. Enfin, si vous ne savez pas comment créer un plan de site XML pour votre site Web, Google a une explication.

Implémentation de balises à l'aide de plugins WordPress

Nous pouvons probablement convenir que les méthodes ci-dessus semblent prendre un peu de temps. Par conséquent, si vous exploitez un site Web basé sur WordPress, un moyen plus simple d’implémenter les balises hreflang et canoniques consiste à utiliser des plugins.

Pour les balises canoniques, vous pouvez utiliser un plugin SEO. Presque tous sont dotés d'options permettant de définir des URL canoniques et de générer automatiquement des balises canoniques.

Par exemple, Yoast SEO ajoute par défaut une balise canonique auto-référentielle à toutes vos pages.

D'un autre côté, TranslatePress est une excellente option pour implémenter les balises hreflang.

Pourquoi donc?

Parce que le plugin le fait littéralement pour vous. Tout ce que vous avez à faire est de configurer les langues que vous souhaitez ajouter à votre site sous Paramètres → TranslatePress .

Une fois que vous avez fait cela et enregistré vos choix, TranslatePress s'occupe du reste. Il ajoute des balises hreflang pertinentes au HTML de toutes les versions linguistiques de vos pages Web ainsi qu'à votre plan de site XML.

De plus, TranslatePress peut différencier les versions régionales de langues, telles que le portugais brésilien, l'espagnol mexicain ou le français suisse. Lorsque vous choisissez les options respectives dans les paramètres, vos balises hreflang sont configurées afin qu'elles reflètent à la fois la langue et les paramètres régionaux.

Autres avantages de TranslatePress

Si vous aimez ce qui précède, vous pourriez être intéressé de savoir ce que TranslatePress a d'autre à offrir. Ce n'est pas seulement bon pour les balises hreflang, mais il possède également de nombreuses autres fonctionnalités qui en font une solution parfaite pour créer des sites Web internationaux et multilingues.

Tout d’abord, il y a l’interface de traduction ultra simple.

Utilisez l'aperçu sur la droite pour naviguer sur votre site Web et choisissez le texte à traduire directement à partir de l'écran ou de la liste dans le coin supérieur gauche.

Ensuite, ajoutez la traduction dans le champ approprié et enregistrez.

Après cela, le contenu traduit apparaît automatiquement sur votre site Web, où les visiteurs peuvent utiliser le sélecteur de langue intégré pour choisir leur langue préférée.

C'est ça. Vous pouvez également utiliser la même méthode pour afficher des images spécifiques à une langue et, pour accélérer les choses, utiliser la traduction automatique via Google Translate.

Tout cela fait partie du plugin gratuit, qui vous permet d'ajouter une langue supplémentaire à votre site Web. Si vous voulez plus que cela, il existe TranslatePress Pro, qui est également livré avec ces fonctionnalités supplémentaires :

• Traduction automatique avec DeepL — Au lieu de Google Translate, utilisez le logiciel de traduction DeepL, plus précis.
• Pack SEO multilingue — Traduisez d'autres marqueurs SEO importants tels que les slugs d'URL, les titres SEO, les méta descriptions, les balises ALT, etc.
• Navigation spécifique à la langue de l'utilisateur – Affichez différents menus en fonction de la langue de vos visiteurs.
• Détection automatique de la langue de l'utilisateur – Redirigez automatiquement les visiteurs vers leur version linguistique préférée (via les paramètres du navigateur ou l'emplacement).
• Comptes de traducteur — Facilitez la collaboration avec les agences de traduction et les indépendants en leur donnant un accès direct à votre site.
• Parcourir en tant que rôle d'utilisateur – Examinez votre site en tant que rôle d'utilisateur spécifique dans l'éditeur de traduction.

TranslatePress Pro est livré avec trois plans tarifaires différents afin que vous puissiez en choisir un qui correspond à vos besoins.

Prêt à maîtriser le hreflang et les balises canoniques ?

Les deux balises dont nous avons parlé dans cet article sont des signaux utiles pour les moteurs de recherche sur la manière dont ils doivent indexer et classer vos pages Web. Les balises Hreflang vous permettent de définir des versions de page pour des langues et des pays particuliers. Les balises canoniques, en revanche, désignent la version officielle parmi des éléments de contenu similaires.

Voici les points les plus importants à retenir :

• Les balises Hreflang sont inclusives, tandis que les balises canoniques sont exclusives
• Incluez des liens hreflang vers chaque version linguistique sur chaque page localisée ainsi que des liens vers la page elle-même
• N'essayez pas de combiner les deux balises en une seule instruction
• Toute page Web avec une balise hreflang ne peut pas avoir de balise canonique pointant ailleurs qu'elle-même.
• Utilisez les instructions x-default pour définir les versions linguistiques par défaut et de secours

Lorsque vous découvrez ces balises pour la première fois, cela peut sembler un peu effrayant et technique. Cependant, comme vous l’avez peut-être vu, ils ne sont pas si difficiles à mettre en œuvre, surtout si vous disposez d’un outil capable de le faire automatiquement comme TranslatePress. Il vous aide non seulement à traduire votre site Web WordPress, mais également à configurer les balises hreflang sans que vous ayez à lever le petit doigt. Essayez-le maintenant !

Avez-vous des questions concernant l'utilisation des balises hreflang et canoniques ? Veuillez leur poser la question dans les commentaires ci-dessous !