Comment ajouter un sélecteur de langue à votre site Web : 2 méthodes

Résumez ce post avec : 8 minutes de lecture

ChatGPT Perplexité Grok Google IA

Vous pouvez ajouter un sélecteur de langue à un site Web de deux manières. Créez-le vous-même sous la forme d'une liste de liens vers chaque version linguistique de la page actuelle ou utilisez un outil de traduction de site Web qui ajoute un commutateur que vous pouvez configurer. Quel que soit votre choix, le sélecteur doit apparaître sur chaque page et étiqueter chaque langue dans cette langue (Deutsch, Español, Français). Il devrait également garder le visiteur sur la même longueur d’onde lorsqu’il change et permettre aux gens de choisir plutôt que de le rediriger.

Les deux méthodes sont ci-dessous, étape par étape, avec du code que vous pouvez copier et les règles de conception recommandées par W3C et Google.

Principaux points à retenir

• Un sélecteur de langue doit créer un lien vers une URL réelle et distincte pour chaque langue au lieu d'échanger du texte avec un script. Des URL distinctes permettent aux moteurs de recherche d'indexer chaque version.
• Étiquetez les langues par leurs propres noms (“Deutsch”, pas “Allemand”) et ne vous fiez pas uniquement aux drapeaux. Le W3C déconseille d’utiliser des drapeaux de pays pour identifier les langues.
• Placez le sélecteur au même endroit sur chaque page, généralement l'en-tête ou un coin fixe, et gardez les visiteurs sur la page équivalente lorsqu'ils changent.
• Ne forcez pas les visiteurs à entrer dans une langue par adresse IP ou par paramètres de navigateur. Google déconseille les redirections automatiques entre les versions linguistiques et suggère plutôt de les lier.
• Les outils de traduction tels que ConveyThis ajoutent automatiquement le sélecteur et vous permettent de le styliser (drapeaux, étiquettes, position, couleurs) sans code.

Qu'est-ce qui fait un bon sélecteur de langue

Ces règles proviennent des directives d'internationalisation du W3C et de la documentation de Google sur les sites multilingues :

1. Mettez-le sur chaque page. W3C dit : “Il est toujours préférable d'ajouter des liens vers des versions linguistiques alternatives, et de le faire sur chaque page” (W3C).
2. Nommez chaque langue dans sa propre langue. Un germanophone qui parcourt une page anglaise recherche “Deutsch” et non “German.” Le W3C recommande que les liens soient “dans la langue de la page vers laquelle ils pointent.”
3. Considérez les drapeaux comme une décoration facultative, jamais comme une étiquette. Le W3C déclare : “Résistez à la tentation d’utiliser des drapeaux de pays pour identifier les langues. Certains pays ont plus d’une langue et certaines langues sont parlées dans plus d’un pays.” Si vous utilisez des drapeaux pour le style, affichez toujours le nom de la langue à côté d'eux.
4. Gardez le visiteur sur la même longueur d’onde. Passer de l'espagnol à l'espagnol /pricing devrait atterrir sur /es/pricing, pas sur la page d'accueil espagnole.
5. Ne forcez pas les redirections. Google conseille : “Évitez de rediriger automatiquement les utilisateurs d'une version linguistique d'un site vers une version linguistique différente d'un site,” et suggère plutôt d'ajouter des hyperliens vers d'autres versions linguistiques (Recherche Google Central). Si vous souhaitez suggérer une langue basée sur le navigateur, utilisez une bannière que le visiteur peut supprimer au lieu d'une redirection.
6. Facilitez-le à trouver et à utiliser. Placez-le dans un endroit familier (en haut à droite de l'en-tête ou du pied de page sur les sites riches en contenu), faites-le suffisamment grand pour appuyer sur un téléphone et assurez-vous qu'il fonctionne avec un clavier.

Méthode 1 : construisez vous-même le sélecteur de langue

Utilisez ceci si vous gérez votre propre HTML ou thème et que chaque langue possède déjà sa propre URL.

Étape 1 : assurez-vous que chaque langue a sa propre URL

Un sélecteur relie les versions, les versions doivent donc exister en premier : example.com/about, example.com/de/about, example.com/es/about. Si vous choisissez toujours une structure, voir sous-répertoires vs sous-domaines pour le référencement multilingue.

Étape 2 : ajouter le balisage du sélecteur

Le sélecteur accessible le plus simple est une liste de liens. Chaque lien indique à quelle langue il mène (hreflang) et dans quelle langue se trouve son texte (lang):

<nav aria-label="Language">
  <ul class="lang-switcher">
    <li><a href="/about" hreflang="en" lang="en" aria-current="true">English</a></li>
    <li><a href="/de/about" hreflang="de" lang="de">Deutsch</a></li>
    <li><a href="/es/about" hreflang="es" lang="es">Español</a></li>
    <li><a href="/fr/about" hreflang="fr" lang="fr">Français</a></li>
  </ul>
</nav>

Ce balisage fonctionne pour trois raisons :

• Les liens simples sont explorables, de sorte que les moteurs de recherche découvrent toutes les versions linguistiques.
• lang sur chaque lien permet aux lecteurs d'écran de prononcer “Deutsch” correctement.
• aria-current marque la langue que le visiteur lit actuellement.

Avec plus de cinq langues environ, une liste déroulante permet d'économiser de l'espace. Utilisez un bouton qui ouvre la liste plutôt qu'un <select> qui navigue sur le changement, ce qui est gênant pour les utilisateurs de clavier.

Étape 3 : générer les liens pour la page actuelle

Chaque lien doit pointer vers la page actuelle dans l'autre langue. Dans un CMS, cela provient généralement de votre plugin multilingue ou de vos variables de modèle. Sur un site statique, générez la liste au moment de la construction à partir d'une carte d'URL équivalentes. Ne codez pas en dur les liens vers la page d’accueil de chaque langue.

Étape 4 : ajoutez des balises hreflang dans l'en-tête de la page

Le sélecteur visible est destiné aux personnes. Les moteurs de recherche ont également besoin <link rel="alternate" hreflang="…"> balises dans le <head> de chaque page, répertoriant chaque version linguistique, y compris la page elle-même, plus un x-default. Notre guide complet de hreflang affiche le balisage exact.

Étape 5 : test

• Changez de langue à partir d'une page profonde (pas la page d'accueil) et confirmez que vous atterrissez sur la page équivalente.
• Appuyez sur la touche Tab pour accéder au sélecteur avec le clavier et ouvrez-le sans souris.
• Vérifiez-le sur un téléphone et assurez-vous de pouvoir appuyer facilement sur chaque langue.
• Affichez la source sur une page traduite et confirmez que les balises hreflang sont là.

Vous obtenez un contrôle total sur la conception et le comportement. Le coût est que vous maintenez vous-même le mappage d'URL, les balises hreflang et les traductions.

Méthode 2 : utiliser le sélecteur d'un outil de traduction de site Web

Un outil de traduction crée ensemble les versions linguistiques, leurs URL, les balises hreflang et le sélecteur, ce qui les maintient tous synchronisés. Avec ConveyThis, le commutateur est ajouté lorsque vous installez le plugin, l'application ou le script, et vous le personnalisez à partir des paramètres du tableau de bord sans écrire de code.

Voici les paramètres que vous pouvez modifier :

Pour suivre les meilleures pratiques ci-dessus avec ConveyThis :

1. Définissez l'étiquette sur le nom natif de la langue. Gardez les drapeaux comme élément visuel supplémentaire ou désactivez-les.
2. Placez le commutateur à l'intérieur de votre en-tête en indiquant l'ID de l'élément où il doit apparaître, afin qu'il se trouve là où les visiteurs l'attendent.
3. Laissez la redirection automatique facultative par langue de navigateur désactivée, sauf si vous avez une raison valable de l'utiliser. Le tableau de bord lui-même avertit que les robots des moteurs de recherche peuvent suivre de telles redirections.
4. Choisissez une structure d'URL (sous-dossiers, sous-domaines ou ?lang; domaines de deuxième niveau sur le plan Extreme). Les balises Hreflang sont ajoutées automatiquement.

En savoir plus sur la conception actuelle dans rencontrez le nouveau sélecteur de langue, ou consultez les guides de la plateforme pour WordPress et Shopify.

Vous n'écrivez aucun code, le sélecteur, les URL et hreflang restent automatiquement synchronisés et cela fonctionne sur la plupart des plateformes. Vous obtenez moins de contrôle sur le balisage qu'avec une version entièrement personnalisée, même si vous pouvez toujours placer et styliser le commutateur.

Quelle méthode choisir ?

Erreurs courantes du sélecteur de langue

• Utilisation de drapeaux uniquement. Le drapeau espagnol signifie-t-il l’Espagne, le Mexique ou l’Argentine ? Le drapeau suisse est-il allemand, français ou italien ? Ajoutez toujours une étiquette.
• Liste des langues en anglais uniquement. Un visiteur japonais peut ne pas reconnaître le mot “japonais”.
• Déposer des visiteurs sur la page d'accueil après leur changement.
• Masquer le sélecteur dans un menu hamburger sur le bureau ou derrière une petite icône.
• Redirection automatique par IP ou par langue de navigateur, sans retour en arrière.
• Changer de langue uniquement par script, sans URL distinctes, de sorte que les moteurs de recherche ne voient qu'une seule langue.

Questions fréquemment posées

Où doit aller un sélecteur de langue ? La plupart des sites le placent en haut à droite de l'en-tête, là où les visiteurs s'y attendent. Les sites riches en contenu le répètent souvent dans le pied de page. Gardez-le au même endroit sur chaque page.

Dois-je utiliser des indicateurs dans mon sélecteur de langue ? Uniquement à côté des noms de langues. Les drapeaux représentent des pays et non des langues, ils confondent donc à eux seuls les visiteurs des pays multilingues et les locuteurs de langues largement parlées.

Mon site Web doit-il changer automatiquement de langue en fonction du navigateur ? Mieux vaut ne pas le forcer. Google déconseille les redirections automatiques entre les versions linguistiques. Si vous souhaitez aider les visiteurs, montrez une suggestion qu'ils peuvent accepter ou rejeter et gardez toujours le sélecteur visible.

Un sélecteur de langue aide-t-il le référencement ? Le sélecteur lui-même aide les moteurs de recherche à découvrir vos versions linguistiques via des liens explorables. Les classements dans chaque langue dépendent de la présence d'URL distinctes, de balises hreflang et de métadonnées traduites.

Pour configurer un commutateur, des pages traduites et hreflang ensemble, essayez ConveyThis gratuitement. Les plans sont sur le page de tarification.