Dans ce post
Si vous créez un site Web multilingue, vous avez probablement vu le terme balises hreflang. En fait, c'est probablement pour cela que vous lisez cet article en ce moment.
Alors, qu'est-ce que le hreflang ? Et pourquoi devez-vous vous soucier des balises hreflang si vous utilisez plusieurs langues sur votre site ?
Eh bien, si vous continuez à lire, vous serez capable de répondre à ces questions, et bien plus encore !
Dans notre guide complet, vous allez apprendre tout ce que vous devez savoir sur les balises hreflang, notamment les points suivants :
- Que sont les balises hreflang ?
- Impacts SEO de hreflang
- Quelques exemples de balises hreflang indiquant quand les utiliser
- Mise en œuvre du hreflang, y compris un moyen simple de configurer les balises hreflang si vous utilisez WordPress
Allons-y !
Qu'sont les balises hreflang ?
Les balises hreflang sont de petits éléments de code invisibles qui identifient la langue et la région géographique d'une page de votre site web.
Les moteurs de recherche peuvent utiliser ces balises pour comprendre votre site et fournir le contenu le plus pertinent aux internautes.
Plus précisément, les balises hreflang vous permettent de relier des contenus entre eux afin que les moteurs de recherche puissent comprendre que ces pages sont liées, mais qu'elles s'adressent à des langues ou à des paramètres régionaux différents.
Par exemple, imaginons que vous ayez une page en anglais à l'adresse https://yoursite.com/hello-world/ et ensuite le même contenu traduit en espagnol à https://yoursite.com/es/hola-mundo/.
Grâce aux balises hreflang, vous pouvez dire aux moteurs de recherche : “ Hé, ces deux pages ont le même contenu / le même objectif, mais l'une est destinée aux anglophones et l'autre aux hispanophones ”.
Vous pouvez également aller plus loin juste la langue, mais aussi indiquer aux moteurs de recherche que vos pages ciblent différentes zones géographiques, à des fins de localisation.
Par exemple : “ Tiens, ces deux pages ont le même contenu et sont toutes les deux en anglais, mais l'une s'adresse aux utilisateurs aux États-Unis et l'autre à ceux du Royaume-Uni ”.
Voici un exemple de l'apparence des balises hreflang dans le code HTML de votre site :
Impact et importance du Hreflang en SEO
Bien que les balises hreflang ne soient pas un facteur de classement SEO majeur de la même manière que les backlinks et la recherche de mots-clés, les utiliser correctement est une partie importante de référencement on-page pour le multilingue ou pour les sites multi-sites.
Il existe trois principaux Avantages SEO de l'utilisation des balises hreflang.
1. Prévenir les problèmes de contenu en double
Tout d'abord, l'attribut hreflang permet d'éviter les problèmes liés au contenu dupliqué sur votre site. Par exemple, imaginons que vous ayez deux presque pages de contenu identiques, si ce n'est que l'une cible les anglophones aux États-Unis et l'autre cible les anglophones en Australie.
En ajoutant la balise hreflang appropriée pour la langue et les paramètres régionaux, vous pouvez indiquer clairement aux moteurs de recherche que ces pages ne constituent pas du contenu dupliqué, mais qu'elles sont au contraire optimisées pour des publics différents.
2. Optimiser les pages en fonction des différents types d'utilisateurs effectuant des recherches
Poursuivons avec l'exemple ci-dessus. En plus d'éviter les problèmes liés au contenu dupliqué, l'ajout de la balise hreflang à vos contenus destinés aux États-Unis et à l'Australie garantit également que tous les internautes trouveront le contenu optimisé pour eux.
En gros, Google peut afficher la version américaine pour les internautes effectuant une recherche aux États-Unis et la version australienne pour ceux qui effectuent une recherche en Australie.
Chaque utilisateur accède à la page optimisée pour lui, ce qui peut également présenter certains avantages secondaires en matière de référencement naturel (SEO), tels qu'un taux de clics (CTR) plus élevé, un taux de rebond plus faible, etc.
3. Tirer parti des signaux de référencement communs
Dans une séance de questions-réponses de 2017 ; avec Gary Illyes de Google, Gary laisse entendre que les balises hreflang peuvent également avoir un impact plus direct sur le SEO car les pages d'un même groupe hreflang partagent dans une certaine mesure leurs signaux de classement.
Par exemple, si vous avez de nombreux liens qui pointent vers la version en anglais de la page, ces liens peuvent également avoir un effet positif sur la version en espagnol de la page (à condition que les deux pages soient regroupées à l'aide de la balise hreflang).
Nous ne savons pas comment beaucoup est partagé, et il est peu probable que vous obteniez l'intégralité du “jus de lien”, pour ainsi dire. Mais même un petit coup de pouce provenant de signaux de classement partagés vaut la peine de consacrer du temps à configurer correctement les balises hreflang.
La balise hreflang est-elle bénéfique pour le référencement naturel ?
En résumé, une utilisation correcte de la balise hreflang est bénéfique pour le référencement naturel (SEO), car elle vous aide à optimiser l'indexation de votre site par les moteurs de recherche et à offrir la meilleure expérience possible aux internautes.
Google a également laissé entendre qu'il pourrait y avoir des avantages plus directs, tels que des pages faisant partie du même groupe hreflang qui partagent des signaux de classement.
Un Vrai Exemple Hreflang : Trois Situations Courantes
Nous avons brièvement abordé ce sujet dans la section précédente, mais voyons maintenant quelques exemples de situations dans lesquelles vous pourriez avoir intérêt à utiliser la balise hreflang sur votre site.
Contenu en différentes langues
Si votre site contient du contenu que vous avez traduit en plusieurs langues, vous voudrez ajouter la balise hreflang afin que Google sache que ces pages sont associées les unes aux autres. C'est-à-dire qu'il s'agit de la même version de la page, simplement dans des langues différentes.
Contenu dans la même langue mais pour des zones géographiques différentes
Comme nous l'avons abordé dans la section SEO, vous pourriez tout de même vouloir utiliser la balise hreflang même si votre contenu est dans la même langue. Par exemple, si vous avez différentes versions d'une page pour les visiteurs anglophones des États-Unis, du Royaume-Uni et d'Australie, vous voudriez utiliser des balises hreflang pour spécifier la région de chaque page.
Vous êtes peut-être curieux de connaître les raisons de la mise en œuvre de balises hreflang pour un contenu identique dans différentes régions.
En plus des avantages en matière de référencement (SEO) que nous avons abordés en mettant en place des balises hreflang, les sites Web peuvent s'assurer que les utilisateurs sont dirigés vers la version la plus pertinente d'une page en fonction de leur emplacement.
C'est particulièrement important pour les sites de commerce électronique, car cela leur permet d'afficher les prix dans la devise locale, de s'adapter aux habitudes d'achat locales et de fournir une expérience utilisateur plus personnalisée. Comprendre la devise et les habitudes des utilisateurs dans différents marchés permet aux entreprises d'adapter leurs offres, leurs promotions et leur contenu pour mieux résonner avec chaque public, améliorant ainsi l'engagement des utilisateurs et stimulant les conversions.
Par conséquent, l'intégration de balises hreflang et la prise en compte de différentes localisations peuvent avoir un impact significatif sur la visibilité, l'ergonomie et, en fin de compte, le succès d'un site Web sur les marchés mondiaux.
Contenu sur différents domaines/sous-domaines
Dans certaines situations, vous pouvez créer des sites multilingues distincts en utilisant des sous-domaines ou des noms de domaine complètement différents. Par exemple, votre-site.com et yoursite.es.
Vous pouvez toujours utiliser la balise hreflang pour lier vos sites entre eux, même s'ils utilisent des noms de domaine distincts.
Conseils généraux pour la mise en œuvre des balises Hreflang
La manière d'ajouter la balise hreflang à votre site dépend de la façon dont il a été conçu.
Par exemple, avez-vous codé votre site de zéro ? Ou utilisez-vous un système de gestion de contenu auto-hébergé comme WordPress ou un créateur de site web comme Squarespace ou Wix ?
Si vous utilisez WordPress, il est très facile d'ajouter la balise hreflang à l'aide d'un plugin tel que TranslatePress.
Pour les créateurs de sites web hébergés, c'est un peu un mélange. Certains créateurs de sites web ajoutent automatiquement le balisage hreflang pour vous, tandis que d'autres vous demandent de le faire manuellement.
Comment créer une balise hreflang ?
Avant de parler de la mise en œuvre de hreflang pour des plateformes spécifiques, parlons de la manière de créer une balise hreflang en général.
Lorsque vous créez une balise hreflang, vous avez deux options :
- Langue seulement – vous ne pouvez indiquer la langue de la page qu’en ajoutant son code à deux lettres. Par exemple : “ Voici la version espagnole de la page ”.
- Langue ET paramètre régional – vous pouvez aller au-delà de la simple langue et préciser également une locale en ajoutant à la fois le code de langue et le code de locale. Par exemple : “ Voici la version espagnole de la page destinée aux utilisateurs du Mexique ” et “ Voici la version espagnole de la page destinée aux utilisateurs d'Espagne ”.
Si vous disposez de plusieurs pages dans la même langue destinées à différentes zones géographiques, il est recommandé de les spécifier toutes les deux à l'aide de la balise hreflang.
Toutefois, si vous ne créez qu'une seule page dans cette langue pour toutes les zones, il vous suffit alors d'indiquer la langue.
Le format de base de la balise hreflang se présente comme suit :
<link rel="alternate" hreflang="[LANGUAGE]-[LOCALE]" href="[URL]" />
Voici un exemple d'attribut hreflang indiquant que la page est en anglais pour toutes les langues :
<link rel="alternate" hreflang="en" href="https://yoursite.com/hello-world/" />
Et voici un exemple qui indique que la page est en espagnol et Pour les personnes résidant au Mexique :
<link rel="alternate" hreflang="es-mx" href="https://yoursite.com/es/hola-mundo/" />
Voici quelques remarques :
- Code de pays et de région – pour les codes de pays et de région, vous devez utiliser les codes ISO à deux lettres. Tous les codes pays. Tous les codes de langue.
- URL – veillez à indiquer l'URL complète, y compris la partie HTTPS ou HTTP.
Combien de balises hreflang devez-vous ajouter ?
Google indique qu'il faut ajouter toutes les balises hreflang à chaque version d'un contenu, y compris la version actuelle.
Par exemple, imaginons que vous disposiez de trois versions d'une page :
- Anglais
- Les hispanophones au Mexique
- Allemand
Chaque version comporterait les trois balises afin que Google sache qu'elles sont toutes liées au sein d'un même groupe.
Autrement dit, la version anglaise comporterait toujours la balise hreflang en anglais (c'est-à-dire autoréférentiel sur le plan technique), ainsi que les deux balises hreflang correspondant aux autres versions de la page.
Voici un exemple de ce à quoi ressembleraient les balises hreflang pour chaque page du cluster :
<link rel="alternate" hreflang="en" href="https://yoursite.com/hello-world/" />
<link rel="alternate" hreflang="es-mx" href="https://yoursite.com/es/hola-mundo/" />
<link rel="alternate" hreflang="de" href="https://yoursite.com/de/hallo-welt/" />
Si les pages d'un groupe hreflang ne renvoient pas toutes les unes vers les autres, Google risque d'ignorer la balise hreflang ; il est donc important de veiller à ajouter cette balise partout où cela est nécessaire.
Google recommande également d'ajouter une page “ par défaut ” pour les visiteurs qui n'utilisent pas l'une des langues ou l'un des paramètres régionaux que vous avez spécifiés.
You can set this up using the x-default hreflang tag. Here’s an example:
<link rel="alternate" hreflang="x-default" href="https://yoursite.com/hello-world/" />
Where Do You Put the Hreflang Tag?
There are two main places to put the hreflang tag:
- HTML – you add the hreflang tags in the <head> section of your site.
- Plan du site – you include the hreflang tags in your XML sitemap that you submit to Google and other search engines.
You can also add the hreflang tag with HTTP headers, but this is only really needed for non-HTML files such as PDFs or other documents that you’re hosting on your server.
For best results, you’ll probably want to add the hreflang tag to les deux your site’s HTML and XML sitemap. This is what most automated tools do (more on those next).
Here’s a hreflang example from Moodle for adding code to the HTML <head> section of a page:
You can see that there are hreflang tags for five different languages, plus a default option.
And here’s a hreflang example from an XML sitemap – you can see that the sitemap includes entries for all different versions in the hreflang cluster. In this case, that’s one version for English-USA and one for Spanish-Spain:
Comment configurer hreflang pour différents outils de création de sites web
Now that we’ve covered some general tips on hreflang implementation, let’s talk about how to set up hreflang tags for specific platforms including the following:
- WordPress
- Squarespace
- Wix
- Webflow
WordPress Hreflang Guide
Before I get into the tutorial, here’s a short video that quickly explains the process of adding hreflang tags to WordPress:
If you want to add hreflang to WordPress, you can use the TranslatePress plugin.
TranslatePress offers everything that you need to create a multilingual WordPress site. It can help you translate your content manually and/or automatically via Google Translate or DeepL. Then, it will create SEO-friendly versions for each language, including automatically adding the relevant hreflang tag.
It will add the hreflang tag both in each page’s HTML, as well as in votre plan du site XML de popular SEO plugins tel que Yoast SEO.
The hreflang tags in both of the example screenshots that we showed you in the previous section were automatically generated by TranslatePress.
Pour en savoir plus, consultez our guide to the WordPress hreflang tag. We also have a tutorial on how to make a multilingual WordPress site with TranslatePress.
TranslatePress Multilingue
Squarespace Hreflang Guide
Adding dynamic hreflang to Squarespace is a bit tricky because it often requires you to manually add the hreflang tag to your page via custom code.
You can generate the proper hreflang tags using this generator tool. Then, you’ll need to use Squarespace’s custom code option to add those tags to your site’s <head> section.
If you want to add the hreflang tag to your Squarespace site’s XML sitemap, that will also require some manual effort. You can use Screaming Frog to crawl your Squarespace site and generate an XML sitemap. Then, you’ll need to manually edit that sitemap to include the hreflang tags.
Unfortunately, Squarespace just doesn’t do a good job of handling multilingual sites at this time, which is why the Squarespace hreflang implementation requires manual workarounds.
If you want a smoother multilingual experience, you can consider switching to WordPress.
Wix Hreflang Guide
Compared to Squarespace, Wix offers much stronger multilingual functionality. If you use Wix’s multilingual feature to create your multilingual site, Wix will automatically add the proper hreflang tags to your pages – there’s no need for any manual effort on your part.
Webflow Hreflang Guide
Webflow uses the same general approach as Squarespace, which means you’ll be responsible for manually setting up the proper hreflang tags if you’re creating a multilingual site.
That is, you’ll need to manually add the hreflang tags to each page’s <head> section and you’ll also need to manually construct your sitemap (using a tool like Screaming Frog) if you want to include hreflang tags in your sitemap.
Commencez dès aujourd'hui avec la balise hreflang
If you have un site web multilingue and/or a website that has different content for different geographic locales, it’s important to properly add the hreflang tag to your site to improve SEO and user experience.
The hreflang tag uses a simple syntax that you can add to your HTML’s <head> section and/or your XML sitemap. Just make sure to add tout of the relevant hreflang tags to each page so that search engines can clearly see how all versions of the page connect.
If you’ve built your site with WordPress, the easiest way to get started with hreflang is to use the TranslatePress plugin.
If you use TranslatePress to create a multilingual site, it will automatically add the proper hreflang tags to your site’s HTML and XML sitemap – all without you ever needing to lift a finger.
To learn more about hreflang tags on WordPress, check out our WordPress hreflang tutorial.
And to learn how to use TranslatePress, check out our guide pour créer un site WordPress multilingue.
TranslatePress Multilingue
Do you still have any questions about the hreflang tag or how to use it? Let us know in the comments!
Si vous avez trouvé ce message utile, consultez notre Chaîne YouTube, où nous téléchargeons constamment des tutoriels vidéo courts et faciles à suivre. Vous pouvez également nous suivre sur Facebook et Twitter pour être le premier à savoir chaque fois que nous publions.
