Qu’est-ce que hreflang ?

Hreflang est une balise HTML importante pour les sites Web avec du contenu en plusieurs langues. Les balises Hreflang permettent aux moteurs de recherche d’afficher le contenu de votre site Web dans la langue préférée de l’utilisateur. La mise en œuvre de hreflang est donc importante pour l’expérience utilisateur et la visibilité de votre site Web.

Dans ce guide du débutant, nous allons passer en revue les avantages des balises hreflang et vous montrer comment les insérer dans votre site internet.

Pourquoi les balises hreflang sont-elles importantes pour le référencement ?

Les balises Hreflang jouent un rôle crucial pour l’optimisation des moteurs de recherche (SEO) si vous souhaitez atteindre des utilisateurs dans plusieurs pays. En effet, la balise garantit que les moteurs de recherche affichent le contenu dans la bonne langue et vous aide à éviter le contenu en double.

Afficher le contenu en plusieurs langues

Envisagez-vous de créer un site multilingue sur votre boutique en ligne où vendez-vous à des clients dans plusieurs pays ? Il est donc nécessaire d’ajouter des balises hreflang, car les moteurs de recherche utilisent des balises hreflang lorsqu’ils déterminent dans quelle langue le contenu doit être affiché. 

Supposons que vous visitiez Netflix depuis l’Espagne. Même si vous entrez Netflix.com dans le champ de recherche, vous verrez probablement le contenu du site Web en espagnol. C’est ainsi que les balises hreflang devraient fonctionner lorsqu’elles sont insérées correctement. 

Il en va de même pour le contenu de votre site Web ou de votre boutique en ligne. Si votre page manque de balises hreflang, vous risquez que votre contenu traduit ne soit pas affiché aux bons utilisateurs.

Éviter le contenu en double

Hreflang peut également vous aider à empêcher les moteurs de recherche d’enregistrer le contenu de vos pages traduites en tant que contenu en double. Le contenu dupliqué est un contenu identique au contenu qui existe déjà sur d’autres pages. Cela s’applique à la fois au contenu identique au contenu de votre propre site Web et au contenu d’autres sites Web. Le contenu en double est un problème car les sites Web dont le contenu n’est pas unique risquent d’obtenir un classement inférieur dans les résultats de recherche.

Les balises Hreflang sont importantes pour le contenu dupliqué car elles signalent aux moteurs de recherche que les différentes versions linguistiques du contenu ciblent des utilisateurs dans plusieurs pays ou régions. Si vous avez écrit, par exemple, une description de produit pour un vase en céramique fait à la main vendu dans votre boutique en ligne et dont la description a été traduite en suédois, norvégien et finnois, la balise hreflang empêche que vos textes presque identiques ne soient enregistrés comme contenu en double. 

À quoi ressemblent les balises hreflang ?

Les balises Hreflang consistent en une syntaxe simple et uniforme. Une bonne compréhension de la structure hreflang est essentielle lors de la mise en œuvre des balises correctes sur votre site Web. Ci-dessous, nous examinons de plus près trois exemples spécifiques de balises hreflang qui peuvent être utilisées dans différents contextes.

Hreflang – 3 exemples

1. Supposons que vous ayez un blog de voyage où vous écrivez des articles passionnants sur tous vos voyages en français, espagnol et danois. Vous avez passé beaucoup de temps à écrire et à traduire, vous voulez donc vous assurer que vos articles de blog s’affichent correctement dans les moteurs de recherche. Dans ce cas, utilisez ces balises hreflang pour distinguer les trois :
    
   <link rel=”alternate” href=”https://example.com/fr/page” hreflang=”fr”> 
   <link rel=”alternate” href=”https://example.com/es/page” hreflang=”es”> 
   <link rel=”alternate” href=”https://example.com/da/page” hreflang=”da”>
   
2. Un autre exemple pourrait être une clinique dentaire en Espagne, qui a récemment traduit le contenu de son site Web en portugais dans l’espoir d’attirer des clients portugais. Si la clinique dentaire a également des pages en anglais, ses balises hreflang devraient ressembler à ceci:
   
   <link rel=”alternate” href=”https://example.com/en/page” hreflang=”en”> 
   <link rel=”alternate” href=”https://example.com/es/page” hreflang=”es”><link rel=”alternate” href=”https://example.com/pt/page” hreflang=”pt”> 
   
3. Enfin, regardons un exemple où différentes balises sont nécessaires pour plusieurs variantes de la même langue. Imaginez une grande plateforme d’actualités en ligne qui rédige des articles en anglais britannique, en anglais américain et en anglais indien. Ces variantes de l’anglais ont les codes de langue régionale suivants: EN-GB, EN-US et EN-IN.
   
   Les balises hreflang de cette plateforme d’actualités devraient ressembler à ceci:
   
   <link rel=”alternate” href=”https://example.com/en-gb/page” hreflang=”en-gb”>
   <link rel=”alternate” href=”https://example.com/en-in/page” hreflang=”en-in”>
   <link rel=”alternate” href=”https://example.com/en-us/page” hreflang=”en-us”>

Comment les balises hreflang sont-elles construites ?

Nous venons de voir trois exemples de ce à quoi peuvent ressembler les balises hreflang. Maintenant, nous allons en décomposer une en parties plus petites et examiner ce que signifient les parties individuelles.

Regardons une balise du blog de voyage de l’exemple de la section précédente.

<link rel=”alternate” href=”https://example.com/es/page” hreflang=”es”>

link rel= ” alternate”:  Le lien dans cette balise est une version alternative de cette page.

hreflang= ” es”: C’est une alternative car le contenu est écrit dans une autre langue, et cette langue est l’espagnol.

href=“https://example.com/es/page”: La page alternative se trouve sur cette URL.

Codes de langue Hreflang

Lorsque vous composez des balises hreflang pour votre propre site Web ou votre boutique en ligne, vous pouvez utiliser la même syntaxe que celle des exemples. La seule chose que vous devez changer est le code de langue, c’est-à-dire les deux lettres qui indiquent les langues dans lesquelles le contenu est disponible. Les codes de langue suivent la norme ISO 639-1, qui est utilisée dans le monde entier.

Voici une liste de certains d’entre eux:

• Danois: DA
• Suédois: SE
• Norvégien: NO
• Français: FR
• Anglais: EN
• Anglais britannique: EN-GB
• Anglais américain: EN-US
• Japonais: JA

Vous pouvez facilement trouver des codes de langue pour toutes les langues en ligne.

Générateur de balises Hreflang  

Le processus de création de balises hreflang est assez simple, mais si vous devez utiliser des balises pour de nombreuses langues et pages, le processus peut prendre beaucoup de temps. Ici, vous pouvez gagner du temps en utilisant un générateur de balises hreflang tel que celui-ci.

3 conseils avant votre implémentation des balises hreflang

Avant de nous plonger dans la façon d’insérer des balises hreflang sur votre site Web, examinons trois règles empiriques qui minimisent le risque d’erreur. Bien que les balises elles-mêmes soient assez simples, des erreurs peuvent facilement se produire si vous les insérez incorrectement.

1. Les balises Hreflang sont bidirectionnelles : Cela signifie qu’elles doivent toujours pointer dans les deux sens. Plus précisément, cela signifie que si la balise sur votre page danoise pointe vers la page française, la balise sur la page française doit pointer vers la page danoise. De cette façon, vous signalez aux moteurs de recherche que vous gérez les deux pages et que les deux pages sont liées l’une à l’autre.

2. Les balises hreflang auto-référencées sont une bonne idée : Cela signifie, en bref, que les balises hreflang ne doivent pas seulement pointer vers d’autres langues, mais aussi vers elles-mêmes. Supposons que vous ayez la même page de catégorie dans votre site en ligne en anglais (https://example.com/cat-food) et en suédois (https://example.com/kattmat). Chacune de ces pages doit alors avoir ces balises hreflang:
    
   <link rel = “alternate” hreflang = “en” href=”https://example.com/cat-food” / > 
    
   <link rel=” alternate “hreflang =”se” href=”https://example.com/kattmat” / > 
    

3. Utilisez les balises x par défaut pour améliorer l’expérience utilisateur : Cette balise est très utile si vous avez un site Web avec du contenu en danois, suédois et anglais, mais que vous avez régulièrement des visiteurs en provenance, par exemple, d’Allemagne.
   
   Ici, vous pouvez utiliser les balises hreflang x-default pour vous assurer que vos visiteurs germanophones sont dirigés vers la page anglaise, qu’ils comprendront probablement mieux que la page danoise.
   
   Les balises Hreflang x-default offrent ainsi aux utilisateurs une meilleure expérience sur votre site Web, car ils ne se retrouvent pas sur une page avec un contenu qu’ils ne peuvent pas comprendre.
   
   Cette balise ressemble à ceci:
   
   <link rel=”alternate” hreflang=”x-default” href=”https://example.com/” />  

Comment les balises hreflang sont-elles implémentées ?

Maintenant que nous avons vu à quoi ressemblent les balises hreflang, voyons comment elles sont implémentées. Cela peut être fait en utilisant trois méthodes en fonction du contexte et du type de contenu.

En utilisant HTML 

Le moyen le plus simple de signaler aux moteurs de recherche que votre page existe en plusieurs langues consiste à insérer la balise hreflang dans le code HTML d’une page Web. La balise doit être insérée en haut du code dans l’élément < head>.

<head> – est un conteneur pour métadonnées et est placé entre la balise < html> et la balise <body>.

Voici un exemple de page disponible en français, espagnol et danois.

<!DOCTYPE html> 

< > 

<head> 

  <title>Votre titre de page fantastique</title> 

<link rel=”alternate” href=”https://example.com/fr/page” hreflang=”fr”> 

<link rel=”alternate” href=”https://example.com/es/page” hreflang=”es”> 

<link rel=”alternate” href=”https://example.com/da/page” hreflang=”da”> 

</head> 

<body> 

Votre contenu de page magique

</body> 

</html> 

Chaque fois que vous traduisez une page, une nouvelle balise hreflang doit être ajoutée à toutes les versions de la page. Par exemple, si vous avez déjà la page en danois, français et espagnol, mais que vous décidez de la traduire en allemand, la balise hreflang allemande doit être insérée dans le code HTML de toutes les pages. Cela signifie que vous avez maintenant quatre balises au total sur chaque page, car toutes les versions doivent être bidirectionnelles et pointer les unes vers les autres, ainsi que vers elles-mêmes.

Cette méthode peut finir par prendre du temps, surtout si vous avez de nombreuses pages et de nombreuses langues sur votre site Web. Ici, il peut être avantageux d’utiliser le générateur hreflang mentionné ci-dessus.

En utilisant l’en-tête HTTP 

Si vous avez des pages dont le contenu n’est pas au format HTML, vous pouvez avantageusement insérer votre balise hreflang dans l’en-tête http de la page. Un exemple de ce type de contenu sont les fichiers PDF.

Les codes d’en-tête HTTP contiennent des informations sur les données envoyées d’un serveur à un client, telles que la date et la langue préférée.

Supposons que vous ayez le même PDF dans trois langues différentes: Anglais, Allemand et Suédois. L’en-tête HTTP dans chacun des fichiers devrait alors ressembler à ceci:

HTTP/1.1 200 OK

Content-Type: application/pdf

Link: <https://example.com/en/doc.pdf>; rel=”alternate”; hreflang=”en”  

<https://example.com/de/doc.pdf>; rel=”alternate”; hreflang=”de”  

<https://example.com/se/doc.pdf>; rel=”alternate”; hreflang=”se” 

À travers le plan du site XML 

La troisième méthode que vous pouvez utiliser pour implémenter vos balises hreflang consiste à les insérer dans le sitemap XML de votre page. Vous pouvez en savoir plus sur les sitemaps juste ici.

En bref, un sitemap XML est un fichier qui fournit aux moteurs de recherche des informations sur les pages individuelles de votre site Web.

Le principal avantage de cette méthode est que vous pouvez éditer toutes vos balises hreflang en un seul endroit. Lorsque vous utilisez la méthode HTML et la méthode d’en-tête http, vous devez ajouter une nouvelle balise à chaque page chaque fois que vous traduisez du contenu existant dans une nouvelle langue. Cela peut prendre beaucoup de temps.

Si vous choisissez cette méthode, ajoutez un élément < loc> pour chaque URL et inserer <xhtml: link> pour chacune des langues dans lesquelles la page est disponible.Vous pouvez lire les instructions de Google et voir un exemple ici.

HTML-lang et Hreflang

HTML-lang est également une balise qui peut être implémentée pour optimiser les sites Web avec du contenu en plusieurs langues. Cependant, il existe une différence entre les deux balises.

La principale différence est que HTML-lang est une balise insérée dans HTML pour signaler aux moteurs de recherche et aux utilisateurs à propos de la langue de l’ensemble du site Web.

Hreflang envoie des signaux plus détaillés en spécification des langues sur toutes les pages individuelles de votre site Web. Cela facilite l’adaptation du contenu à plusieurs pays et langues.

Le moteur de recherche de Google n’utilise pas HTML-lang. Par conséquent, ils recommandent que les sites Web dont le contenu est en plusieurs langues utilisent la balise hreflang. Cependant, Microsoft Bing et certains lecteurs d’écran utilisent le langage HTML. Il peut donc être judicieux d’utiliser les deux si vous souhaitez optimiser votre site Web pour plusieurs moteurs de recherche et lecteurs d’écran.

Balises Hreflang : vitales pour les sites Web multilingues

Si vous souhaitez améliorer l’expérience utilisateur et augmenter le trafic vers votre site Web en publiant du contenu dans plusieurs langues, il est essentiel que vous sachiez comment créer et implémenter des balises hreflang. Un site Web multilingue s’ouvre à de nouvelles opportunités, de nouveaux utilisateurs, de nouveaux lecteurs et plus de conversions. Nous espérons que ce guide vous aidera à démarrer!