Ajoutez un widget de traduction à votre site Web ConveyThis

Résumez ce post avec : 7 min de lecture

Un widget de traduction est le bouton ou le menu que les visiteurs utilisent pour basculer votre site vers une autre langue. Vous pouvez en ajouter un de trois manières : le créer vous-même sur une API de traduction automatique, installer un plugin de traduction pour votre CMS ou coller un extrait JavaScript d'un service de traduction de site Web. Le bon choix dépend moins du bouton que de ce qui se passe derrière lui : si les traductions peuvent être modifiées et si chaque langue obtient sa propre adresse que les moteurs de recherche peuvent indexer.

Ce guide couvre les options, les étapes de configuration de ConveyThis, comment concevoir un commutateur que les gens peuvent réellement utiliser et ce qu'il faut tester avant d'annoncer les nouvelles langues.

1. Construisez-le sur une API de traduction

L'ancien extrait gratuit de Google “Website Translator” (le google_translate_element code que de nombreux tutoriels plus anciens montrent) atteint la fin de son support, comme expliqué dans notre Alternative au widget Google Translate guide. Google oriente les propriétaires de sites vers les payants API de traduction Cloud plutôt. Avec l'API, un développeur peut envoyer le texte de votre page pour traduction et restituer le résultat derrière un menu de langue personnalisé.

Cela vous donne un contrôle total sur l'apparence du bouton, mais vous possédez également tout le reste : la mise en cache des traductions afin de ne pas être facturé deux fois pour la même phrase, un endroit pour corriger les mauvais résultats, la gestion des pages qui changent et la génération d'URL de langue distinctes si vous souhaitez que ces pages apparaissent dans les résultats de recherche. Pour la plupart des entreprises, il s’agit d’un projet logiciel et non d’un widget.

2. Installer un plugin de traduction CMS

Si votre site fonctionne sur WordPress, Shopify, Joomla ou une plateforme similaire, un plugin ou une application de traduction est généralement le chemin le plus court. La plupart des plugins ajoutent leur propre sélecteur de langue que vous pouvez déposer dans un menu, une barre latérale ou un pied de page. Certains stockent les traductions dans votre base de données CMS ; d'autres, dont ConveyThis, les conservent dans un tableau de bord cloud et les diffusent sur votre site. Voir le Intégration WordPress et Shopify intégration pages pour les spécificités de la plateforme.

3. Collez un extrait JavaScript d'un service de traduction

Pour les sites construits sur autre chose (une pile personnalisée, un générateur de site, un site statique), un service comme ConveyThis vous donne un script à coller dans le <head> de chaque page. Le script ajoute le commutateur et sert la version traduite lorsqu'un visiteur choisit une langue. Il y a 35 intégrations pour les plateformes communes, et le JavaScript intégration couvre tout le reste.

Illustration of a website with a language menu

Comment ajouter le commutateur de langue ConveyThis

Les étapes sont les mêmes quelle que soit la plateforme que vous utilisez, seule l'étape d'installation change.

Créez un compte et ajoutez votre domaine. Dans le tableau de bord ConveyThis, choisissez votre plateforme (ou “JavaScript” pour un site personnalisé), entrez votre domaine et définissez la langue d'origine et les langues que vous souhaitez ajouter.
Installer. Sur WordPress, installez le plugin ConveyThis à partir du répertoire des plugins et entrez la clé API depuis votre tableau de bord. Sur Shopify, installez l'application ConveyThis. Pour les autres sites, copiez l'extrait affiché dans le tableau de bord et collez-le dans le <head> section de toutes les pages. La plupart des créateurs de sites disposent d'un paramètre “code personnalisé” ou “code d'en-tête” pour cela.
Vérifiez le commutateur. Rechargez votre site. Par défaut, le commutateur apparaît dans le coin inférieur droit ; cela peut prendre quelques minutes la première fois.
Revoir les traductions. Le premier passage est la traduction automatique. Ouvrez le tableau de bord pour modifier des phrases individuelles, utilisez le éditeur visuel pour corriger le texte dans son contexte, ajoutez glossaire règles relatives aux noms de marques et de produits et inviter des traducteurs ou des collègues ayant des rôles d'équipe.

ConveyThis language button settings in the WordPress plugin

Stylez et positionnez le commutateur

Dans les paramètres du domaine, vous pouvez choisir :

Position. Un coin fixe de l'écran, ou “Personnalisé” pour placer le commutateur à l'intérieur d'un élément que vous choisissez, tel que votre menu principal. Vous entrez l'ID de l'élément (par exemple menu, sans le #). Le guide de position montre où se trouve le paramètre pour les sites JavaScript et WordPress.
Liste déroulante ou liste, et dans quel sens le menu s'ouvre.
Drapeaux, noms ou codes. Vous pouvez afficher des noms de langue, des codes de langue, des indicateurs ou une combinaison. Vous pouvez aussi changer quel indicateur représente une langue, par exemple un drapeau britannique au lieu d'un drapeau américain pour l'anglais.

Concevoir un commutateur que les gens peuvent utiliser

Un bouton de traduction est petit, mais c'est souvent la première chose qu'un visiteur qui ne peut pas lire votre langue par défaut recherche. Quelques règles le rendent plus facile à trouver et moins ennuyeux à utiliser :

Affichez les noms des langues, pas seulement les drapeaux. Les drapeaux représentent les pays et non les langues. L'espagnol est parlé dans plus de vingt pays et un visiteur mexicain ne cherchera peut-être pas de drapeau espagnol. Si vous utilisez des drapeaux, associez-les au nom de la langue.
Écrivez le nom de chaque langue dans cette langue. « Deutsch », « Español », « 日本語 » sont plus faciles à repérer que « German », « Spanish », « Japanese » pour ceux qui en ont besoin.
Mettez-le là où les gens l’attendent. L'en-tête ou la navigation principale est l'endroit le plus courant, avec le pied de page comme deuxième emplacement. Un bouton d'angle flottant fonctionne, mais assurez-vous qu'il ne couvre pas les widgets de discussion ou les bannières de cookies sur mobile.
Gardez le visiteur sur la même longueur d’onde. Le changement de langue doit afficher la version traduite de la page sur laquelle ils se trouvent, et non les envoyer à la page d'accueil.
N'oubliez pas le choix. Une fois que quelqu’un choisit une langue, conservez-la pendant qu’il navigue.
Soyez prudent avec les redirections automatiques. Rediriger les gens par la langue du navigateur peut aider, mais laissez toujours le commutateur visible afin qu'ils puissent le modifier. ConveyThis a un redirection facultative de la langue du navigateur c'est éteint à moins que vous ne l'allumiez.

Un widget qui échange le texte dans le navigateur du visiteur aide uniquement les personnes qui sont déjà sur votre site. Les moteurs de recherche indexent les URL, donc si chaque langue partage une adresse, vos pages traduites ne peuvent pas apparaître dans les résultats de recherche dans ces langues.

Pour être trouvée dans d'autres langues, chaque traduction a besoin de sa propre URL, telle que example.com/es/ ou es.example.com, avec le titre traduit et la méta description sur cette page et hreflang balises reliant les versions entre elles. Google explique cela dans son guide gestion de sites multilingues.

ConveyThis sert des traductions sur des URL en langue réelle (sous-dossiers, sous-domaines ou a ?lang paramètre), traduit les balises méta et les données structurées et ajoute hreflang automatiquement. Si vous créez votre propre widget sur une API, vous devez créer tout cela vous-même. Le page SEO multilingue couvre les détails.

Testez avant de l'annoncer

Avant d’indiquer aux clients que le site parle leur langue, parcourez une courte liste de contrôle :

Changez de langue sur la page d’accueil, une page de produit ou de service, un article de blog et la page de contact.
Test sur un téléphone. Les commutateurs qui semblent corrects sur le bureau chevauchent souvent d’autres boutons sur les petits écrans.
Soumettez un formulaire dans chaque langue et vérifiez que les confirmations et les e-mails arrivent traduits.
Regardez le texte à l’intérieur des images, des PDF et des fenêtres contextuelles. Ce sont les parties les plus souvent laissées non traduites.
Vérifiez les langues de droite à gauche telles que l'arabe ou l'hébreu, si vous en avez ajouté, pour détecter les problèmes de mise en page.
Afficher la source de la page d'une URL traduite et confirmer le lang attribut, titre traduit et balises hreflang sont là.
Demandez à un locuteur natif de lire les pages qui comptent le plus, généralement les prix, le paiement et tout ce qui est légal.

Ce que ça coûte

ConveyThis dispose d'un forfait gratuit pour une langue et jusqu'à 5 000 mots, ce qui est suffisant pour essayer le commutateur sur un petit site. Les forfaits payants commencent à 12 $ par mois pour 30 000 mots. Les mots ne sont comptés que lorsque le contenu traduit est affiché aux visiteurs, et le trafic des robots ne compte pas. Le page de tarification répertorie tous les plans.

Si vous décidez de la quantité de site à traduire et dans quel ordre, commencez par comment traduire un site Web entier. Pour un plan de projet étape par étape, voir comment traduire un site web.

Ajoutez un widget de traduction à votre site Web

Trois façons d'ajouter un widget de traduction