Comment gérer les balises hreflang sur un site multilingue Webflow ?
Apprenez à implémenter correctement les balises hreflang dans Webflow pour indiquer à Google les versions linguistiques de vos pages et éviter les problèmes de contenu dupliqué.
Les balises hreflang indiquent à Google quelle version linguistique d'une page servir à quel utilisateur. Sans elles, un site multilingue risque des problèmes de contenu dupliqué et une mauvaise distribution du trafic international. Sandro, cofondateur de l'agence Webflow Gemeos, vous guide dans leur implémentation.
Prérequis
- Un site Webflow avec au minimum deux versions linguistiques (ex : FR et EN)
- Les URLs des versions équivalentes pour chaque page
- Accès au code personnalisé Webflow (plan payant requis)
1. Comprenez la structure d'une balise hreflang
Chaque page d'un site multilingue doit déclarer toutes ses versions équivalentes, y compris elle-même. La balise se place dans le <head> de la page.
/* Sur la version française */
<link rel="alternate" hreflang="fr" href="https://votresite.com/fr/page" />
<link rel="alternate" hreflang="en" href="https://votresite.com/en/page" />
<link rel="alternate" hreflang="x-default" href="https://votresite.com/page" />2. Ajoutez les balises dans le Head Code de chaque page
Dans Webflow Designer, ouvrez les paramètres de chaque page. Dans la section "Custom Code", collez les balises hreflang dans le champ "Inside <head> tag". Répétez l'opération sur chaque version linguistique de la page : les balises doivent être présentes et cohérentes sur toutes les versions.
3. Gérez le tag x-default
La valeur "x-default" désigne la version par défaut à servir quand aucune langue ne correspond à celle de l'utilisateur. Pointez-la vers votre page la plus universelle, généralement la version anglaise ou la homepage principale.
4. Vérifiez l'implémentation
Utilisez le Rich Results Test ou l'extension "hreflang Tag Checker" pour Chrome. Dans Google Search Console, la section "Ciblage international" signale les erreurs hreflang détectées sur votre site.
| Erreur fréquente | Conséquence | Correction |
|---|---|---|
| Balise non réciproque | Balise ignorée par Google | Ajouter la balise sur la page cible aussi |
| Code langue incorrect | Mauvaise distribution du trafic | Utiliser les codes ISO 639-1 (fr, en, de...) |
| x-default manquant | Pas de fallback pour les autres langues | Ajouter x-default sur toutes les pages |
| URLs relatives | Balise invalide | Toujours utiliser des URLs absolues |
| Balise absente sur une version | Contenu dupliqué potentiel | Implémenter sur 100% des pages concernées |
Conclusion
Les balises hreflang sont indispensables dès que votre site existe en plusieurs langues. Leur implémentation correcte protège votre SEO international et améliore l'expérience utilisateur.
- Cas d'usage 1 : site SaaS FR/EN avec deux versions complètes du contenu
- Cas d'usage 2 : agence avec site principal en FR et pages de services en EN pour cibler les marchés anglophones
- Cas d'usage 3 : e-commerce multilingue avec versions FR, EN et DE
bon à savoir
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
