Qu’est-ce que le Hreflang ?
Hreflang est un attribut HTML qui spécifie la langue et la région ciblée d’une page Web. Il est utile pour les sites Web dont le contenu est dans plusieurs langues ou qui s’adressent à différentes zones géographiques. Les moteurs de recherche comme Google utilisent cet attribut pour proposer aux utilisateurs la version la plus appropriée d’une page.
Dans cet article nous utiliserons comme sites de référence Semrush. Si vous recherchez le « blog semrush » sur Google aux États-Unis. Voici le résultat que vous voyez :
Alors que si vous êtes en Espagne, voici ce que vous verrez :
Cela ne serait pas possible sans l’utilisation appropriée de l’attribut hreflang.
À quoi ressemble une balise Hreflang ?
Hreflang suit une structure cohérente et simple. Habituellement, cela ressemble à ceci :
<code><link rel="alternate" href="url_of_page" hreflang="lang_code" /></code>
Et voici ce que signifie la syntaxe (langage informatique) :
- link rel=”alternate” signifie que le lien dans cette balise est une version alternative de cette page
- href=”url_of_page” est l’endroit où vous pouvez trouver la page alternative
- hreflang=”lang_code” est la langue alternative
Remarque : La balise hreflang est un signal, pas une directive. Google et Yandex utilisent les attributs hreflang. Baidu et Bing ne le font pas. Ils s’appuient sur l’ attribut HTML content-langage .
Comment créer une balise Hreflang
Pour créer une balise hreflang, vous devez d’abord trouver les codes de langue et de pays dont vous avez besoin. Et puis remplissez les espaces vides.
Hreflang prend en charge les codes de langue ISO 639-1 à deux lettres et les codes de pays et de région ISO 3166-1 alpha-2 .
(Vous n’aurez pas toujours besoin du code du pays ou de la région. Mais cela peut s’avérer utile.)
Disons que votre blog anglais a été traduit en espagnol et en portugais. L’attribut hreflang d’un article devrait ressembler à ceci :
<code><link rel="alternate" href="https://example.com" hreflang="en" /><br><link rel="alternate" href="https://example.com/es/" hreflang="es" /><br><link rel="alternate" href="https://example.com/pt/" hreflang="pt" /></code>
L’attribut hreflang sur chaque page Web doit inclure une référence à toutes les pages qui servent d’alternatives.
Y compris une référence à lui-même. Google recommande l’auto-référencement du hreflang dans ses directives .
Si vos attributs hreflang ne font pas référence à toutes les pages alternatives pertinentes, les moteurs de recherche peuvent ignorer ou mal interpréter vos balises hreflang.
Ce qui signifie:
Les liens de référence dans l’extrait de code de l’article anglais ci-dessus devraient apparaître sur vos pages en espagnol et en portugais.
Mais que se passe-t-il si vous ciblez un pays supplémentaire qui parle également le portugais ? Comme le Brésil.
(Vous souhaiterez peut-être le faire si vous vendez un produit dans différentes devises, par exemple.)
Dans ce cas, vous devrez également ajouter le code du pays.
Cela ressemblerait donc à ceci, « pt » étant le code du pays à deux lettres pour le Portugal et « br » pour le Brésil :
Le portugais au Portugal :
<code><link rel="alternate" href="https://example.com/pt/" hreflang="pt-pt" /></code>
Le portugais au Brésil :
<code><link rel="alternate" href="https://example.com/br/" hreflang="pt-br" /></code>
La syntaxe ici est un peu différente. C’est hreflang=”langue-pays” au lieu de simplement hreflang=”langue”.
Et c’est tout ce que vous avez à faire.
Conseil de pro : il est également important de définir les balises par défaut. Ils indiquent la page de secours aux utilisateurs lorsqu’aucune autre version localisée n’est appropriée.
Les balises X-default ne sont pas obligatoires, mais elles sont recommandées.
Pour implémenter une balise x-default, ajoutez une annotation et définissez l’attribut « href » sur l’URL vers laquelle vous souhaitez que les utilisateurs accèdent si votre site ne prend pas en charge leur langue.
Comme ceci (montré en dernier) :
<code><link rel="alternate" href="https://example.com" hreflang="en-us" /><br><link rel="alternate" href="https://example.com/es/" hreflang="es-es" /><br><link rel="alternate" href="https://example.com/pt/" hreflang="pt-pt" /><br><link rel="alternate" href="https://example.com/pt/" hreflang="pt-br" /><br><link rel="alternate" href="https://example.com" hreflang="x-default" /></code>
Où va une balise Hreflang ?
Il existe trois façons d’implémenter les attributs hreflang :
- Dans l’en-tête HTML de la page
- Dans l’en-tête HTTP (pour les fichiers non HTML comme les PDF)
- Dans le plan du site XML
Dans le HTML
La manière la plus simple d’indiquer vos pages alternatives consiste à utiliser le code HTML de la page.
Ajoutez simplement tous les attributs hreflang pertinents dans la partie <head> de la page.
N’oubliez pas que chaque version linguistique d’un article doit se référencer elle-même. Ainsi que toutes les autres versions linguistiques.
Voici à nouveau à quoi ressemble la syntaxe pour chaque élément :
<code><link rel="alternate" href="url_of_page" hreflang="lang_code" /></code>
Le seul véritable problème avec cette méthode est qu’elle peut être compliquée et prendre beaucoup de temps.
Par exemple, chaque fois que vous traduisez un article dans une autre langue, vous devez revenir en arrière et ajouter une autre balise hreflang à toutes les versions de celui-ci.
Remarque : Pour un grand nombre d’entrées hreflang, vous souhaiterez probablement indiquer vos pages alternatives via votre plan de site. Nous verrons comment vous pouvez procéder dans un instant.
Pour créer ou modifier des balises hreflang en HTML, essayez d’utiliser un outil hreflang.
Pour cet exemple, nous utiliserons l’outil générateur de hreflang d’Aleyda Solis .
Entrez simplement l’URL, la langue et le pays de chaque version de l’article sur lequel vous travaillez.
Sélectionnez « Balises à inclure dans la zone d’en-tête des pages HTML » et cliquez sur « GÉNÉRER LES BALISEES HREFLANG POUR CES URL ».
Ensuite, copiez le code et collez-le dans la balise <head> de chaque page.
Dans l’en-tête HTTP
Les en-têtes HTTP sont parfaits pour implémenter les attributs hreflang pour le contenu non HTML de votre site Web.
Comme les PDF, par exemple.
Les codes d’en-tête HTTP transfèrent des données entre un serveur et un client. Ce code contient des informations sur la date de la demande, le référent, la langue préférée, etc.
Remarque : Vous pouvez également utiliser cette méthode pour le contenu HTML. Mais cela peut ajouter beaucoup de charge en termes de requêtes au serveur. Il est donc préférable de ne l’utiliser que lorsque cela est strictement nécessaire.
Le format de l’en-tête en HTTP ressemble à ceci :
<code>Link: <url 1>; rel="alternate"; hreflang="language code 1", <br><url 2>; rel="alternate"; hreflang="language code 2", …</code>
Voici ce que signifie la syntaxe :
- <url x> est l’URL de la page alternative liée aux paramètres régionaux attribués à l’attribut hreflang. Il doit inclure les marques < et > environnantes.
- Le code de langue x est le code de langue (ou de région) ciblé par cette page
Vous devez indiquer un ensemble de valeurs <url>, rel=”alternate” et hreflang pour chaque version de la page, y compris elle-même, séparées par une virgule.
Supposons que vous créiez un document PDF en trois versions : une en anglais, une en espagnol et une en portugais.
Votre en-tête HTTP devrait ressembler à ceci (pour chaque fichier) :
<code>Link: <https://example.com/doc.pdf>; rel="alternate"; hreflang="en", <br><https://example.com/es/doc.pdf>; rel="alternate"; hreflang="es", <br><https://example.com/pt/doc.pdf>; rel="alternate"; hreflang="pt" </code>
Sur le plan du site XML
La troisième méthode d’implémentation du hreflang consiste à utiliser votre plan de site XML .
Un plan de site XML est un fichier qui fournit aux moteurs de recherche des informations sur les pages de votre site.
C’est donc un excellent moyen d’informer Google de toutes les variantes linguistiques et régionales de chaque URL.
Il présente également un avantage majeur :
Le plan du site XML vous permet d’apporter des modifications à vos attributs hreflang en un seul endroit.
Avec les méthodes hreflang d’en-tête HTML et HTTP, vous devez accéder et mettre à jour plusieurs fichiers chaque fois que vous obtenez un blog ou un document traduit dans une autre langue. Cela devient compliqué.
Pour commencer, vous devez ajouter un élément <loc> pour chaque URL. Avec des entrées <xhtml:link> pour chaque version linguistique et régionale de la page.
Y compris lui-même.
Ce qui signifie:
Si vous disposez de trois versions d’une page, votre plan de site comportera trois entrées. Un pour chaque URL. Et chacune de ces entrées aura trois listes identiques.
Si nous utilisons notre exemple original de blog anglais, espagnol et portugais, voici à quoi ressemblera la partie du plan du site de cet article de blog :
<code><url><br><loc>https://https://example.com</loc><br><xhtml:link rel="alternate" hreflang="en-us" <br>href="https://https://example.com" /><br><xhtml:link rel="alternate" hreflang="es-es" <br>href="https://example.com/es/" /><br><xhtml:link rel="alternate" hreflang="pt-br" <br>href="https://example.com/pt/" /><br></url><br><url><br><loc>https://example.com/es/</loc><br><xhtml:link rel="alternate" hreflang="en-us" <br>href="https://https://example.com" /><br><xhtml:link rel="alternate" hreflang="es-es" <br>href="https://example.com/es/" /><br><xhtml:link rel="alternate" hreflang="pt-br" <br>href="https://example.com/pt/" /><br></url><br><url><br><loc>https://example.com/pt/</loc><br><xhtml:link rel="alternate" hreflang="en-us" <br>href="https://https://example.com" /><br><xhtml:link rel="alternate" hreflang="es-es" <br>href="https://example.com/es/" /><br><xhtml:link rel="alternate" hreflang="pt-br" <br>href="https://example.com/pt/" /><br></url><br></urlset></code>
Vous pouvez utiliser le même outil générateur de hreflang pour créer ou modifier des balises hreflang dans un plan de site XML.
Commencez par saisir l’URL, la langue et le pays pour chaque version.
Sélectionnez ensuite « Attributs dans un plan de site XML » et cliquez sur « GÉNÉRER LES BALISEES HREFLANG POUR CES URL ».
Ensuite, copiez le code et ajoutez-le au plan du site XML de votre site.
Comment rechercher et résoudre les problèmes de Hreflang
Vous pouvez trouver et résoudre les problèmes de hreflang en auditant régulièrement votre site Web.
Et en utilisant l’outil d’audit de site de Semrush comme vérificateur de hreflang.
Commencez par saisir votre domaine et créez un projet.
Une fois que l’outil a exploré votre site, accédez à l’onglet « Problèmes ». Ensuite, recherchez « hreflang » dans la barre de recherche.
Comme ça:
Vous verrez une liste de tous vos conflits hreflang. Y compris le type de problème et comment le résoudre.
Pour référence, voici les problèmes hreflang les plus courants et comment les résoudre :
Problèmes avec les valeurs Hreflang
Ce type d’avertissement est déclenché lorsque les codes de pays ou de langue ne sont pas au bon format.
Il est important de résoudre ce problème, car les moteurs de recherche peuvent ignorer les balises hreflang contenant des codes incorrects.
Et s’ils ignorent la balise, ils peuvent montrer aux utilisateurs la mauvaise version de votre page. Ce n’est pas bon pour votre référencement.
Résolvez ce problème en examinant les balises hreflang dans chaque URL concernée.
Assurez-vous que la syntaxe de chaque attribut suit les codes corrects. ISO 639-1 à deux lettres pour les langues et ISO 3166-1 alpha-2 pour les pays et régions.
Vous pouvez toujours utiliser un outil générateur de hreflang pour vérifier ou créer vos balises.
Pas de Hreflang auto-référencé
L’attribut hreflang sur chaque page doit inclure une référence à toutes les pages qui servent d’alternatives. Y compris une référence à lui-même.
Si les attributs hreflang ne s’auto-référencent pas, les moteurs de recherche peuvent les ignorer ou les interpréter mal.
Résolvez ce problème en examinant chaque URL concernée et en ajoutant une balise hreflang auto-référencée à l’ensemble des attributs hreflang.
Problèmes avec des liens Hreflang incorrects
Ce type d’avertissement se déclenche lorsqu’il y a un problème avec le lien dans l’attribut hreflang.
Par exemple, le lien peut pointer vers une page cassée ou qui a été redirigée.
Si cela se produit, les moteurs de recherche peuvent ignorer vos attributs hreflang.
Résolvez ce problème en examinant chaque URL concernée et en modifiant l’annotation pour vous assurer qu’elle pointe vers une page de travail.
URL Hreflang et Rel = canoniques en conflit
Ce type d’avertissement se produit lorsqu’une balise hreflang fait référence à une URL non canonique.
Une balise canonique est un attribut HTML qui indique la version principale d’une page lorsque vous avez des pages en double (ou quasi-dupliquées). Il indique aux moteurs de recherche quelle version d’une page fait le plus autorité et doit apparaître dans les résultats de recherche.
Alors, que se passe-t-il si vos attributs hreflang font référence à une version non canonique d’une page particulière ?
Les deux balises se contredisent :
- L’attribut hreflang indique que la page non canonique doit apparaître dans les résultats de recherche pour les utilisateurs qui parlent des langues particulières.
- La balise canonique indique qu’une version différente de cette page devrait apparaître dans les résultats de recherche
Pour faire simple : cela va dérouter les moteurs de recherche. Et ils ignoreront probablement le hreflang, le canonique ou les deux.
Résolvez ce problème en accédant à chaque URL concernée et en modifiant les annotations hreflang pour qu’elles pointent vers des URL canoniques.
Automatisez vos audits de balises Hreflang
Après avoir appris à implémenter les balises hreflang et à résoudre les problèmes associés, allez plus loin en automatisant vos audits hreflang.
De cette façon, vous serez informé de tout problème avant qu’il ne s’aggrave.
Pour automatiser vos audits hreflang, configurez un rapport récurrent dans Site Audit .
Dans le coin supérieur droit de votre tableau de bord, cliquez sur le symbole d’engrenage « paramètres ».
Ensuite, faites défiler vers le bas et recherchez « Planification ».
Vous verrez alors une fenêtre contextuelle dans laquelle vous pourrez choisir la fréquence à laquelle vous souhaitez exécuter votre audit.
Réglez-le sur votre jour préféré. Ensuite, cochez l’option « Envoyer un email ».
Et cliquez sur « Enregistrer ».
Les nouveaux problèmes apparaîtront dans la case « Référencement international » de votre tableau de bord après chaque exploration. Assurez-vous donc de le vérifier régulièrement.
Vous êtes maintenant prêt à résoudre tous les problèmes de mise en œuvre du hreflang qui surviennent et à assurer le bon déroulement de vos efforts de référencement.
Autres ressources
- Black Hat SEO – 8 techniques à ne pas utiliser en 2024
- Outils de création de liens : 8 meilleurs pour trouver des backlinks de qualité en 2024
- Fonctionnalités des SERP : Guide détaillé
FAQ : Hreflang Comment définir et implémenter
Comment utiliser hreflang ?
Les balises hreflang doivent être placées entre les balises <head> dans le code HTML. Lorsque vous rédigez vos balises hreflang, vous devez prendre soin d’y lister les liens de toutes les déclinaison linguistique d’un document, et en plus le lien de ce même document.
Quel est le rôle de la balise à href ?
L’attribut a href en HTML permet de coder un lien hypertexte : le code indique que le contenu est un lien de redirection, et renseigne le chemin de destination. Côté utilisateur : lorsque le contenu cliquable est un texte, l’attribut a href affiche par défaut le texte souligné en bleu.
Quel est le rôle de l’attribut href ?
L’élément HTML <a> (pour ancre ou anchor en anglais), avec son attribut href , crée un lien hypertexte vers des pages web, des fichiers, des adresses e-mail, des emplacements se trouvant dans la même page, ou tout ce qu’une URL peut adresser.
Pourquoi href ?
La balise de lien « a » avec l’attribut « href » permet de nombreuses utilisations pour rediriger un visiteur de votre site vers une nouvelle page, site ou même un autre programme.
