Aller au contenu
Meirra

Maîtrisez les balises Hreflang pour le SEO international

Guide technique complet pour implémenter correctement les balises hreflang sur les sites web multilingues. Apprenez les meilleures pratiques, évitez les erreurs courantes et boostez votre SEO international.

Updated: 2024-12-20
20 minutes de lecture
Guide technique
Voir le guide
M

Meirra

Expert SEO et développement web, Meirra

Le guide complet Hreflang

Maîtrisez le SEO multilingue en toute confiance

Comprendre Hreflang

L'attribut hreflang indique aux moteurs de recherche quelle langue vous utilisez sur une page spécifique, afin qu'ils puissent afficher la bonne version aux utilisateurs recherchant dans cette langue.

Introduit par Google en 2011, hreflang est désormais un composant essentiel du SEO international, aidant à éviter les problèmes de contenu dupliqué et garantissant que les utilisateurs voient le contenu dans leur langue préférée.

L'attribut utilise des codes de langue ISO (comme 'en' pour l'anglais ou 'es' pour l'espagnol) et des sous-balises régionales optionnelles (comme 'es-ES' pour l'espagnol en Espagne ou 'es-MX' pour l'espagnol au Mexique).

Ce guide complet couvre tout ce dont vous avez besoin pour implémenter correctement les balises hreflang pour les sites web internationaux. L'implémentation de hreflang est l'un des aspects les plus techniquement difficiles du SEO multilingue, mais lorsqu'elle est bien faite, elle garantit que les moteurs de recherche affichent la bonne version linguistique aux bons utilisateurs. Notre plateforme suit les performances hreflang en temps réel.

Nous passerons en revue plusieurs méthodes d'implémentation, fournirons des exemples de code testés, offrirons des conseils spécifiques pour l'expansion internationale et vous aiderons à résoudre les erreurs courantes. Le tout avec une surveillance en direct du tableau de bord.

Exemple de base

Implémentation de base de Hreflang

Éléments de lien HTML dans la section head

HTML
<head>
  <!-- Other meta tags, title, etc. -->

  <!-- English page (example.com/page) would have these tags: -->
  &lt;link rel="alternate" hreflang="en" href="https://example.com/page/" /&gt;
  &lt;link rel="alternate" hreflang="es" href="https://example.com/es/page/" /&gt;
  &lt;link rel="alternate" hreflang="x-default" href="https://example.com/page/" /&gt;

  <!-- Spanish page (example.com/es/page) would have these same tags: -->
  &lt;link rel="alternate" hreflang="en" href="https://example.com/page/" /&gt;
  &lt;link rel="alternate" hreflang="es" href="https://example.com/es/page/" /&gt;
  &lt;link rel="alternate" hreflang="x-default" href="https://example.com/page/" /&gt;
</head>

Pourquoi c'est important

  • Prévient les problèmes de contenu dupliqué entre les versions linguistiques
  • Garantit que les moteurs de recherche affichent la bonne langue aux utilisateurs
  • Aide à maintenir des classements d'index séparés pour chaque version linguistique
  • Améliore l'expérience utilisateur en affichant le contenu dans la langue préférée des utilisateurs
  • Essentiel pour les entreprises s'étendant sur les marchés internationaux

Erreurs courantes

  • ✕
    Liens de retour manquants (ne pas créer de références bidirectionnelles)
  • ✕
    Codes de langue ou de pays incorrects
  • ✕
    Mélange d'URLs relatives et absolues
  • ✕
    Signaux canonical et hreflang conflictuels
  • ✕
    Imbrication incorrecte dans les sitemaps XML
  • ✕
    Balises d'auto-référence manquantes
Voir le guide de dépannage

Codes de langue Hreflang

Explorez les codes de langue valides à utiliser dans vos balises hreflang.

en
Courant

Anglais

en-US
Courant

Anglais (États-Unis)

en-GB
Courant

Anglais (Royaume-Uni)

en-CA
Courant

Anglais (Canada)

en-AU
Courant

Anglais (Australie)

es
Courant

Espagnol

es-ES
Courant

Espagnol (Espagne)

es-MX
Courant

Espagnol (Mexique)

es-CO
Courant

Espagnol (Colombie)

es-AR
Courant

Espagnol (Argentine)

fr
Courant

Français

fr-FR
Courant

Français (France)

fr-CA
Courant

Français (Canada)

pt
Courant

Portugais

pt-BR
Courant

Portugais (Brésil)

pt-PT
Courant

Portugais (Portugal)

zh
Courant

Chinois

zh-CN
Courant

Chinois (Chine)

zh-TW
Courant

Chinois (Taïwan)

de
Courant

Allemand

de-DE
Courant

Allemand (Allemagne)

it
Courant

Italien

it-IT
Courant

Italien (Italie)

ja
Courant

Japonais

ja-JP
Courant

Japonais (Japon)

ko
Courant

Coréen

ko-KR
Courant

Coréen (Corée du Sud)

ru
Courant

Russe

ru-RU
Courant

Russe (Russie)

ar
Courant

Arabe

Format de code

Les codes de langue suivent la norme ISO 639-1. Vous pouvez utiliser des codes de langue seuls (ex. 'fr') ou des combinaisons langue-région (ex. 'fr-FR').

Outil Interactif

Générateur de code Hreflang

Générez le code hreflang correct pour votre site web multilingue en entrant vos URLs ci-dessous.

Instructions

  1. Entrez votre domaine de base (exemple.com)
  2. Ajoutez les pages pour lesquelles vous souhaitez générer du code
  3. Spécifiez dans quelles langues et régions chaque page est disponible
  4. Choisissez votre méthode d'implémentation préférée (HTML, en-têtes HTTP ou sitemap XML)
  5. Copiez le code généré et implémentez-le sur votre site web

Générateur de code Hreflang

Générez le code hreflang correct pour votre site web multilingue en entrant vos URLs ci-dessous.

Paramètres du domaine

Méthode d'implémentation

Pages

/ /
Langues disponibles

Code : 'en' pour anglais, 'es' pour espagnol général, 'es-ES' pour Espagne, 'x-default' pour par défaut

Code généré

HTML Head Method

HTML

Conseils d'implémentation

  • Incluez toujours la balise x-default pour gérer les utilisateurs dont les préférences linguistiques ne correspondent à aucune de vos versions
  • Assurez-vous que chaque version linguistique inclut des liens vers toutes les autres versions linguistiques, y compris elle-même
  • Utilisez des URLs absolues (commençant par http:// ou https://) dans toutes les balises hreflang
  • Testez votre implémentation avec les outils mentionnés dans la section de test
  • N'oubliez pas que hreflang est une suggestion, pas une directive - les moteurs de recherche peuvent afficher une version différente s'ils pensent qu'elle est plus pertinente
  • Pour la cohérence, utilisez la même méthode (en-tête HTML, en-têtes HTTP ou sitemap XML) sur tout votre site

Ressources supplémentaires

Documentation officielle Google sur HreflangGuide Hreflang d'Ahrefs
Code

Méthodes d'Implémentation

Différentes façons d'implémenter hreflang, chacune avec ses propres avantages

Méthodes

Balises HTML Head

★★★★★
Meilleure option pour la plupart des sites web

Ajouter les balises hreflang directement dans la section <head> de chaque page

Contrôle direct sur les balises de chaque page

Facile à implémenter pour les petits sites

Fonctionne avec tous les moteurs de recherche

Exemples de code

Implémentation HTML Basique

HTML
<link rel="alternate" hreflang="en" href="https://example.com/page" />
<link rel="alternate" hreflang="fr" href="https://example.com/fr/page" />
<link rel="alternate" hreflang="x-default" href="https://example.com/page" />

Exemple concret

Voici un exemple de ce à quoi ressemble l'implémentation hreflang sur un site web réel :

Booking.com (implémentation HTML head)

Le site Booking.com utilise des balises hreflang dans le head pour chaque langue/région

HTML
<!DOCTYPE html>
<html lang="es-ES">
<head>
  <meta charset="utf-8">
  <title>Guía de Viajes España | Booking.com</title>
  
  <!-- Self-reference (Spanish - Spain) -->
  <link rel="alternate" hreflang="es-ES" href="https://www.booking.com/destinacione/pais/es.es.html" />
  
  <!-- Other language versions -->
  <link rel="alternate" hreflang="en-GB" href="https://www.booking.com/destinations/country/es.en-gb.html" />
  <link rel="alternate" hreflang="en-US" href="https://www.booking.com/destinations/country/es.html" />
  <link rel="alternate" hreflang="de" href="https://www.booking.com/destinations/country/es.de.html" />
  <link rel="alternate" hreflang="fr" href="https://www.booking.com/destinations/country/es.fr.html" />
  <link rel="alternate" hreflang="it" href="https://www.booking.com/destinations/country/es.it.html" />
  
  <!-- Default version -->
  <link rel="alternate" hreflang="x-default" href="https://www.booking.com/destinations/country/es.html" />
  
  <link rel="canonical" href="https://www.booking.com/destinacione/pais/es.es.html" />
  <!-- Other meta tags... -->
</head>
<body>
  <!-- Page content -->
</body>
</html>

Note : Ceci est un exemple simplifié basé sur des implémentations réelles. Les implémentations réelles peuvent varier.

Conseils d'expert

Inclure les balises d'auto-référence

Utiliser des URLs absolues

Vérifier les liens bidirectionnels

Ressources externes

Google Search Central

Documentation officielle sur les versions localisées

Guide Moz sur Hreflang

Guide complet sur l'implémentation hreflang

Spécificités du Marché Français

Considérations importantes lors du ciblage des marchés francophones

Variations Régionales

Le français varie entre la France (fr-FR), le Canada (fr-CA), la Belgique (fr-BE) et la Suisse (fr-CH). Considérez l'utilisation de fr-FR pour la France et fr-CA pour les marchés canadiens.

Comportement de Recherche Local

Les utilisateurs français recherchent souvent différemment des utilisateurs anglais. Les mots-clés peuvent ne pas être des traductions directes, et l'intention de recherche peut varier selon la région.

Stratégie de Domaine

Envisagez d'utiliser des ccTLDs (.fr pour la France) ou des sous-répertoires avec un géociblage approprié pour une meilleure visibilité locale.

Localisation du Contenu

Au-delà de la traduction, adaptez le contenu pour la pertinence culturelle, les exemples locaux, la devise et les unités de mesure.

Guide pratique

Implémentation CMS

Comment implémenter hreflang dans les systèmes de gestion de contenu populaires

WordPress

WordPress

CMS populaire avec un fort support multilingue via des extensions

1

Installer et activer WPML

2

Configurer les langues et la structure des URLs

3

WPML ajoute automatiquement les balises hreflang

Extension recommandée:

WPML (WordPress Multilingual Plugin)
Shopify

Shopify

Plateforme e-commerce avec fonctionnalités multilingues intégrées

1

Activer plusieurs langues dans l'admin Shopify

2

Configurer les URLs spécifiques par langue

3

Utiliser des applications pour un contrôle avancé de hreflang

Extension recommandée:

Langify ou Weglot
Drupal

Drupal

CMS puissant avec capacités multilingues intégrées

1

Activer les modules Langue et Traduction de contenu

2

Configurer la détection et la sélection de langue

3

Utiliser le module Metatag pour hreflang

Extension recommandée:

Modules multilingues du cœur
WooCommerce

WooCommerce

Extension e-commerce pour WordPress avec capacités multilingues

1

Installer et activer WPML ou Polylang avec leurs extensions WooCommerce respectives

2

Configurer les langues et les paramètres de traduction

3

Traduire les produits, catégories et pages de paiement

4

Vérifier que les balises hreflang sont correctement implémentées sur les pages produits

5

Configurer les devises et passerelles de paiement pour différentes régions si nécessaire

Extension recommandée:

WPML avec WooCommerce Multilingual
Magento

Magento

Plateforme e-commerce entreprise avec support multilingue intégré

1

Configurer les vues de boutique pour chaque combinaison langue/locale dans votre admin Magento

2

Configurer la locale et la langue pour chaque vue de boutique

3

Traduire votre contenu, produits et informations de boutique

4

Activer et configurer le générateur de balises hreflang intégré

5

Vérifier l'implémentation via le code source ou les outils de développement du navigateur

Extension recommandée:

Vues de boutique intégrées
Webflow

Webflow

Plateforme de design web visuel avec capacités de code personnalisé

1

Créer des pages ou dossiers séparés pour chaque version linguistique

2

Ajouter un extrait de code personnalisé dans la section head de chaque page

3

S'assurer que chaque version linguistique a des liens vers toutes les autres versions

4

Utiliser des URLs absolues pour toutes les références hreflang

5

Tester l'implémentation avec les outils de développement du navigateur

Extension recommandée:

Weglot ou code personnalisé
Frameworks personnalisés

Frameworks personnalisés

CMS headless ou solutions personnalisées

1

Identifier la structure linguistique et régionale de votre site

2

Créer la logique de détection de langue et de routage d'URLs

3

Implémenter des sélecteurs de langue et des redirections appropriées

4

Ajouter des balises hreflang à tous les modèles de pages avec votre méthode préférée

5

Créer des tests automatisés pour s'assurer que les liens bidirectionnels sont maintenus

Extension recommandée:

Implémentation personnalisée
Vérification

Tests & Validation

Outils et techniques pour valider votre implémentation hreflang

Google Search Console

Outil officiel de Google pour surveiller l'implémentation hreflang et identifier les problèmes.

Le rapport de ciblage international affiche les erreurs hreflang

Vérification du ciblage par langue et pays

Couverture d'exploration pour différentes versions linguistiques

Retour direct du robot d'exploration Google

Visiter l'Outil

Outil de test des balises Hreflang

Outil dédié pour valider l'implémentation hreflang sur l'ensemble de votre site web.

Valide les liens bidirectionnels

Vérifie les codes de langue corrects

Identifie les balises de retour manquantes

Teste depuis plusieurs emplacements

Visiter l'Outil

Screaming Frog SEO Spider

Robot d'exploration SEO complet qui inclut des fonctionnalités de validation hreflang.

Explore tout le site à la recherche de balises hreflang

Exporte les données hreflang pour analyse

Identifie les erreurs d'implémentation

Valide par rapport aux sitemaps XML

Visiter l'Outil

Sitebulb

Outil d'audit visuel de sites web avec de puissantes capacités d'analyse hreflang.

Cartographie visuelle hreflang

Identifie les versions linguistiques orphelines

Rapports d'implémentation détaillés

Intégration avec Google Analytics

Visiter l'Outil

ContentKing

Plateforme de surveillance SEO en temps réel qui suit les modifications hreflang.

Surveillance hreflang en temps réel

Alertes pour les problèmes d'implémentation

Suivi historique des modifications

Accès API pour l'automatisation

Visiter l'Outil

Chrome Developer Tools

Outils intégrés au navigateur pour une vérification rapide de hreflang.

Afficher le code source pour inspection manuelle

Onglet réseau pour vérifier les en-têtes HTTP

Console pour le débogage JavaScript

Gratuit et toujours disponible

Visiter l'Outil

Ce Qu'il Faut Rechercher Lors des Tests

Vérifications Techniques

  • Toutes les balises ont des URLs absolues complètes
  • Codes de langue valides (fr-FR, en-US, etc.)
  • Toutes les pages incluent des balises d'auto-référence
  • Le sitemap XML utilise la syntaxe xhtml:link correcte

Vérifications Structurelles

  • Liens bidirectionnels complets entre toutes les versions
  • Balise x-default correctement configurée
  • Cohérence entre les balises canonical et hreflang
  • Aucune redirection n'interfère avec hreflang