Dans ce post
Les balises hreflang et les balises canoniques sont des indicateurs pour Google et les autres moteurs de recherche concernant les pages Web à indexer et à afficher à certains internautes. Ce sont tous deux des facteurs importants pour SEO multilingue.
Cependant, les deux types de balises ont des fonctions différentes. C'est pourquoi il est important de ne pas les confondre ou de les utiliser de manière interchangeable. Sinon, cela pourrait entraîner des conséquences imprévues et de mauvais résultats pour votre site web.
Pour éviter cela, dans cet article, nous allons plonger en profondeur dans les balises hreflang et canoniques. Nous verrons ce qu'elles sont, les bonnes pratiques et les erreurs courantes lors de leur utilisation, ainsi que la manière de les configurer correctement, à la fois manuellement et à l'aide de plugins WordPress.
Que sont les balises hreflang et canoniques (et pourquoi sont-elles importantes ?)
Afin de bien saisir 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 d'exploration des moteurs de recherche la langue et la zone géographique auxquelles une page web est destinée. Par exemple, voici à quoi ressemble une balise hreflang destinée au français et à la Suisse.
<link rel="alternate" href="https://yoursite.com/ch" hreflang="fr-ch" />Il se compose de deux parties, le rel="alternate", qui indique qu'il s'agit d'une version alternative d'une page Web existante, et le hreflang="fr-ch" partie qui spécifie sa cible. français représente la langue et ch pour le pays, basé sur le Langue ISO et indicatifs pays.
Cela importe tout particulièrement pour les sites web internationaux qui peuvent comporter des pages au contenu pratiquement identique, mais destinées à des marchés linguistiques différents. Les balises hreflang vous permettent d'indiquer aux moteurs de recherche que vous disposez de versions localisées pour les internautes de ces marchés.
De plus, vous pouvez non seulement cibler une autre langue, mais aussi une région particulière. Par exemple, bien qu'il y ait plusieurs pays hispanophones dans le monde, malgré la langue commune, ils diffèrent par leur dialecte, leur culture et les goûts des consommateurs.
En utilisant les 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 localizez-les pour le public auquel ils sont destinés tout en utilisant la même langue.
Les balises canoniques en bref
Les balises canonical jouent un rôle similaire à celui des balises hreflang. Ce sont également des extraits de code HTML qui indiquent aux moteurs de recherche quelle URL est la plus pertinente pour les internautes. Voici à quoi elles ressemblent :
<link rel="canonical" href="https://yoursite.com" />Cependant, au lieu de différencier les variétés linguistiques, les balises canoniques indiquent qu'une page Web doit être considérée comme la version officielle ou la copie maîtresse parmi des 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 lui, l'autre https://
- Vous republiez un article qui existe déjà sur un autre site web (avec la permission, bien sûr). Ou bien, vous publiez le même contenu sur une autre plateforme comme Medium pour obtenir une plus grande portée.
- Paramètres dans l'URL qui signalent de petits changements sur une page Web, tels que les filtres dans sites de commerce électronique (par ex. https://www.yourwebsite.com/Camping-Hiking/b?ie=UTF8&node=16435151)
Dans tous ces cas, une balise canonique peut indiquer aux moteurs de recherche quelle doit être considérée comme la version principale de la page en question et qu'ils doivent l'indexer à la place des autres.
Avantages SEO des balises hreflang et canoniques
Pourquoi devriez-vous vous donner la peine d'ajouter ces balises à votre site web ? Parce qu'elles offrent de nombreux avantages en matière de référencement (SEO) :
- Évitez les problèmes de contenu dupliqué — Marquer explicitement votre contenu empêche les moteurs de recherche de considérer vos pages comme des doublons. Ainsi, ils sont moins susceptibles de diffuser la mauvaise URL aux internautes ou de vous pénaliser pour un contenu de faible qualité.
- Transfert des signaux de classement — L'autorité des liens entrants et les autres signaux de classement sont transmis à la page canonique et partagés par toutes les versions linguistiques.
- Engagement utilisateur amélioré — Envoyer les visiteurs vers la bonne version de vos pages, par exemple celle dans leur langue préférée, est bénéfique pour les conversions, le temps de visite, l'engagement des utilisateurs, etc. Ce sont là autant d'éléments dont on théorise qu'ils ont un impact positif sur les classements de recherche.
- Éviter de gaspiller le temps d'exploration — Avec les balises canoniques, vous pouvez empêcher les moteurs de recherche d'indexer certaines pages. Cela signifie qu'ils ne gaspillent pas le budget de crawl sur du contenu sans importance au lieu de ce que vous voulez voir indexé.
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 (s'il vous plaît), mais c'est à eux et à leur algorithme qu'il revient de honorer votre demande.
Balises hreflang et canoniques : bonnes 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 sera très probablement de savoir où ces liens doivent apparaître. Les balises hreflang et canoniques sont généralement incluses dans la <head> section du balisage HTML d'une page Web.
En fait, pour les balises canoniques, c'est la seule option. Leurs équimolés hreflang peuvent également apparaître dans les en-têtes HTTP ou un Sitemap XML. Nous verrons en détail ci-dessous comment les y amener.
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 :
Des deux signaux, les balises canoniques sont les plus simples à mettre en œuvre. Elles doivent fondamentalement simplement contenir rel="canonical" ainsi que la destination.
Les balises hreflang sont un peu plus capricieuses. 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 configurer une page plus générale pour les personnes du monde entier effectuant des recherches dans cette langue.
En même temps, l'utilisation d'un code de pays vous 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 qu'il s'agit du bon langue et indicatifs pays.
En même temps, notez que les versions dans d'autres langues ne doivent pas nécessairement se trouver sur le même domaine. Si vous utilisez des adresses web distinctes pour vos différentes versions linguistiques, vous pouvez toujours utiliser la balise hreflang pour indiquer qu'elles sont liées.
De plus, pour les deux types de balises, vous devez inclure les URL complètes de vos pages, et non des URL relatives. Voici la différence :
- URL complète https://yoursite.com/shop/pants
- URL relative /boutique/pantalons
En utilisant des URL absolues, vous indiquez clairement de quelles pages vous parlez et évitez toute ambiguïté ou erreur. Si vous avez du mal à créer vos balises, vous pouvez également utiliser un générateur de balises hreflang ou générateur de balises canoniques.
Rendez-les bidirectionnels et autoréférentiels
Le prochain point important est de savoir sur quelles pages placer vos balises. Commençons par les balises hreflang.
Une partie importante ici est que, Toutes les versions linguistiques doivent comporter des balises hreflang vers toutes les alternatives disponibles.. 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 une seule direction, Google l'ignorera.
Par exemple, si vous avez une page en anglais, en espagnol et en français destinée aux États-Unis, au Canada, à l'Espagne, à la Colombie et à la France, vos balises hreflang ressembleraient à ceci :
Ce code exact doit être placé sur chacune des pages qui y sont mentionnées.
C'est important car cela établit une relation entre ces pages et indique à Google qu'il s'agit de plusieurs versions du même contenu dans des langues différentes et pour différents groupes d'utilisateurs.
Cela signifie également qu'une balise hreflang pointe toujours vers la page sur laquelle elle se trouve. C'est ce qu'on appelle l“”auto-référencement" et c'est une bonne pratique tant pour les balises hreflang que canoniques.
Avoir une balise canonique sur une page Web qui pointe vers elle-même est un signal indiquant qu'il s'agit de la version officielle. Cela 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 duplicata, toutes deux auraient la même balise canonique ci-dessous.
<link rel="canonical" href="https://yoursite.com/page-a" />Évitez les déclarations contradictoires
Il est vraiment important de choisir les bonnes URL pour les balises hreflang et canoniques, surtout si vous les utilisez ensemble. C'est parce que, bien qu'elles soient similaires dans leur fonction, ce qu'elles signalent aux moteurs de recherche est très différent.
Les balises hreflang sont inclusives, tandis que les balises canoniques sont exclusives. Les premières disent : “ indexe-moi et 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 possède également une balise canonique pointant ailleurs que vers elle-même, cela enverrait deux messages très contradictoires. Cela revient pour ainsi dire à dire : “ indexez-moi ainsi que cette autre page, et en même temps ne m'indexez pas, indexez l'autre page à la place ”.
Dans ce cas, les moteurs de recherche pourraient prendre leurs propres décisions, ce qui pourrait ne pas correspondre à vos souhaits. Soyez donc très prudent à ce sujet. En dehors de cela, l'ordre des balises réelles n'a pas d'importance, pourvu qu'elles soient 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'y reporteront s'il n'y a pas de version plus spécifique pour la langue et/ou les paramètres régionaux d'un utilisateur.
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 zones géographiques différentes (par exemple, l'anglais américain et britannique). Cela aide lorsqu'une personne effectue une recherche dans cette langue sans provenir de l'une ou l'autre de ces zones.
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
If you have followed along so far, you should theoretically be ready to implement hreflang and canonical tags on your own website.
The only question that remains is, how do you do that?
Let’s go over that now, starting with how to do it manually. Here, you basically have two options to place them:
- The aforementioned HTML
<head>section - Your website’s XML sitemap
(Another options are HTTP headers but those are only important for content like PDF documents.)
Using the <head> section
This option is most feasible for small sites with few and mostly static pages where you edit the HTML files directly. It’s not very practical for larger websites that are created dynamically (like in WordPress).
Once you have created your tags using the tips and/or generators above, open your HTML files with a code editor and copy and paste them between the <head> et </head> tags, preferably toward the top.
Save and you are done. If in doubt or if doesn’t seem to work, run your pages through an HTML validator.
This method is relatively easy, however, it can also be annoying if you ever make changes to your site structure or URLs. In that case you would have to edit each page individually again.
Including hreflang Tags in the Sitemap
If you are going to implement your tags manually, the sitemap might actually be the best choice. It allows you to make changes all in one place, which is easier to manage should there be any URL changes or simply new language versions to add to it. The format looks like this:
<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>Each page with different languages versions has to be wrapped in <url> brackets. The <loc> element at the top defines the original URL, while the <xhtml: link> element defines each language alternative. It basically use the same format as the HTML version.
Here, too, you can use the aforementioned generator tools to create the hreflang tags. As explained before, canonical tags have to go in the <head> section, you can not define them in the sitemap. Finally, if you don’t know how to create an XML sitemap for your website to begin with, Google has an explanation.
Mise en œuvre des étiquettes à l'aide d'extensions WordPress
We can probably agree that the methods above seem a bit time-consuming. Therefore, if you are running a website based on WordPress an easier way to implement hreflang and canonical tags is using plugins.
For canonical tags, you can use an Module SEO. Pretty much all of them come with options to define canonical URLs and also generate canonical tags automatically.
Par exemple, Yoast SEO adds self-referential canonical tag to all your pages by default.
On the other hand, a great option to implement hreflang tags is TranslatePress.
Why is that?
Because the plugin literally does it for you. All you have to do is configure which languages you want to add to your site under Paramètres → TranslatePress.
Once you have done so and saved your choices, TranslatePress takes care of the rest. It adds relevant hreflang tags to the HTML of all language versions of your web pages as well as your XML sitemap.
Plus, TranslatePress can differentiate between regional versions of languages, such as Brazilian Portuguese, Mexican Spanish, or Swiss French. When you pick the respective options in the settings, it sets up your hreflang tags so that they reflect both the language and locale.
Other TranslatePress Benefits
If you like the above, you might be interested to hear what else TranslatePress has to offer. It’s not just good for hreflang tags but also has many more features that make it a perfect solution for creating international and multilingual websites.
First of all, there is the super simple translation interface.
Use the preview on the right to navigate your website and pick text to translate directly from the screen or the list in the upper left corner.
Then, add the translation in the appropriate field and save.
After that, the translated content automatically appears on your website, where visitors can use the built-in sélecteur de langue to pick their preferred language.
That’s it. You can also use the same method to show language-specific images and, to make things faster, use automatic traduction automatique via Google Translate.
This is all part of the free plugin, which lets you add one additional language to your website. If you want more than that, there is TranslatePress Pro, which also comes with these additional features:
- Traduction automatique avec DeepL — Instead of Google Translate, use the more accurate DeepL translation software.
- Pack SEO multilingue — Translate other important SEO markers such as URL slugs, SEO titles, meta descriptions, ALT tags, and more.
- Navigation spécifique à la langue de l'utilisateur – Display different menus depending on the language of your visitors.
- Détection automatique de la langue de l'utilisateur – Automatically reroute visitors to their preferred language version (via browser settings or location).
- Comptes de traducteurs — Make working with agences de traduction et travailleurs indépendants easier by giving them direct access to your site.
- Naviguer en tant que rôle utilisateur – Regardez votre site en tant qu'un rôle utilisateur spécifique dans l'éditeur de traduction.
TranslatePress Pro comes with three different plans tarifaires so you can choose one that fits your needs.
Prêt à maîtriser les balises hreflang et canoniques ?
The two tags we talked about in this post are useful signals for search engines on how they should index and rank your web pages. Hreflang tags allow you to define page versions for particular languages and countries. Canonical tags, on the other hand, denote the official version among similar content pieces.
Here are the most important points to remember:
- Hreflang tags are inclusive, while canonical tags are exclusive
- Include hreflang links to every language version on each localized page as well as links to the page itself
- Don’t try to combine both tags into one statement
- Any web page with an hreflang tag can not have a canonical tag pointing anywhere else but itself
- Use x-default statements to define default and fallback language versions
When you first learn about these tags, it can seem a bit scary and technical. However, as you have hopefully seen, they are not all that hard to implement, especially if you have a tool that can do it automatically like TranslatePress. It not only helps you translate your WordPress website, but also set up hreflang tags without you having to lift a finger. Give it a try now!
TranslatePress Multilingue
Do you have any questions concerning the usage of hreflang and canonical tags? Please ask them in the comments below!
