Si vous avez cherché un moyen de traduire un site Framer, vous avez probablement trouvé deux types de réponses. L'une est le module complémentaire de localisation de Framer. L'autre est une longue liste d'outils externes, chacun promettant de le faire en quelques minutes.
Les deux peuvent fonctionner. Un outil externe a tendance à être plus logique si vous ne voulez pas payer par langue, ou si vous préférez ne pas gérer les traductions à l'intérieur de votre projet Framer.
La configuration que j'utiliserai nécessite une ligne de code et quelques minutes dans les paramètres du site de Framer. Après cela, l'IA gère la traduction, et vous décidez quand chaque langue est mise en ligne.
Dans ce guide, je vais vous montrer comment traduire votre site web Framer à l'aide de l'IA.
Pourquoi traduire votre site web Framer ?
Beaucoup de sites Framer sont la porte d'entrée de quelqu'un : la page d'accueil d'une startup, le portfolio d'un designer, un site marketing SaaS. C'est là qu'un nouveau visiteur décide s'il reste, et il ne peut pas le faire s'il ne peut pas lire le titre.
Si vos analyses montrent déjà des visiteurs d'autres pays, traduire le site leur donne une raison de rester. Voici ce qui gêne généralement sur Framer :
- L'option native est facturée par langue. Framer Localization est un module complémentaire qui coûte 20 $ par locale, jusqu'à 20 locales. Chaque nouvelle langue s'ajoute à la facture.
- Les traductions résident dans votre projet. Avec la localisation native, chaque locale est configurée et gérée dans Framer lui-même, ce qui demande plus de maintenance à mesure que votre site grandit.
- Les sites clients nécessitent une touche légère. Si vous créez des sites Framer pour des clients, vous ne voudrez probablement pas restructurer chaque projet juste pour ajouter l'espagnol.
Un outil de traduction qui fonctionne en dehors de votre projet Framer évite ces problèmes, et c'est l'approche que suit ce guide.
Traduisez votre site Framer avec Universally
Universally est un outil de traduction de sites web par IA d'Awesome Motive. Il utilise une IA sensible au contexte pour traduire votre site dans plus de 110 langues, et tout fonctionne dans le cloud.
Sur Framer, vous le connectez en ajoutant une ligne de code dans les paramètres de votre site. Les traductions sont appliquées dans le navigateur du visiteur, de sorte que votre projet Framer, vos pages et vos URL restent les mêmes.
Il y a un compromis à connaître dès le départ. Avec cette configuration, les moteurs de recherche voient vos pages dans la langue d'origine, et Universally n'ajoute pas de balises hreflang. Les sous-domaines linguistiques ne sont pas encore disponibles pour Framer. La documentation du mode JavaScript couvre ce que cela signifie plus en détail.
Framer est l'une des nombreuses plateformes prises en charge par Universally, aux côtés de WordPress, Webflow, Squarespace et d'autres listées sur la page Plateformes prises en charge.
Voici ce que cela apporte à votre site Framer :
- Une ligne de code : Il n'y a pas de plugin Framer, pas d'enregistrements DNS à modifier, et votre site reste sur l'hébergement Framer.
- Aucune configuration de locale dans Framer : Vous ne créez pas de variantes linguistiques ni ne dupliquez de pages dans votre projet.
- Sélecteur de langue inclus : Il se trouve dans le coin supérieur droit de votre site avec des drapeaux et des noms de langue. Choisir une langue recharge la page à la même URL.
- Titres et texte alternatif, aussi : Universally traduit les titres de page, les méta-descriptions et les attributs comme le texte alternatif des images, en plus du contenu principal.
- Un commutateur actif par langue : Les visiteurs ne voient une langue qu'une fois que vous l'avez activée.
- Glossaire et modifications manuelles : Les plans payants vous permettent de définir des règles pour les termes de marque et de corriger toute ligne traduite.
Vous pouvez commencer avec le plan gratuit, qui couvre 1 site Web, 1 langue et 2 000 mots traduits, et il n'expire pas. Les plans payants commencent à 7,50 $/mois, facturés annuellement [VÉRIFIER sur la page des tarifs], et ajoutent plus de mots, de langues, de règles de glossaire et l'éditeur de traductions.
Étape 1 : Créer un projet Framer dans Universally
Avant de commencer, assurez-vous d'avoir trois éléments en place :
- Un plan Framer payant, car Framer n'autorise le code personnalisé que sur les plans payants.
- Votre site Framer publié sur votre propre domaine.
- Le rôle Propriétaire ou Administrateur dans votre espace de travail Universally, car le fragment d'installation n'est pas affiché aux autres rôles.
Tout d'abord, vous devrez vous inscrire pour un compte sur le site Web Universally. Ensuite, dans votre tableau de bord, cliquez sur + Ajouter un projet.
À partir d'ici, sous « Sélectionner votre technologie », choisissez Framer.
Remplissez ensuite les détails de votre projet. Entrez votre Domaine comme domaine complet, par exemple example.com et ajoutez un Nom de projet.
La Langue source est la langue dans laquelle votre site est écrit, et elle est définie par défaut sur Anglais (US). Cela mérite une deuxième vérification, car si elle est incorrecte, vous obtiendrez de mauvaises traductions et aucune erreur pour vous dire pourquoi.
Après avoir saisi ces détails, cliquez sur Suivant pour continuer.
Ensuite, vous devrez ajouter une langue à traduire. Choisissez-en simplement une dans la liste et cliquez sur Choisir une langue.
Ensuite, vous verrez un aperçu de votre site Web avec l'URL de la langue en haut.
Par exemple, nous avons sélectionné le français comme langue pour notre site Web Framer de démonstration.
Allez-y et cliquez sur le bouton Atteindre 80 millions de francophones pour continuer.
Étape 2 : Ajouter le script Universally dans Framer
Sur l'écran suivant, Universally vous guidera pour ajouter la balise de script à votre site Web Framer.
Il affichera un script avec la clé unique de votre projet qui ressemble à ceci :
<script src="https://scripts.universally.com/p/YOUR_PUBLIC_KEY/s.js" async></script>Copiez simplement cette ligne depuis votre tableau de bord.
Maintenant, ouvrez votre projet dans Framer et allez dans Paramètres du site » Code.
Allez-y et cliquez sur Ajouter un script pour créer un nouveau fragment de code.
Framer demande quelques paramètres ici. Choisissez ceux-ci :
- Emplacement : Début de
<head> - Pages : Toutes
- Exécuter : Une fois
Collez ensuite la balise de script Universally dans le champ de code et cliquez sur Ajouter.
Étape 3 : Publier votre site et vérifier la connexion
Framer ne servira pas le script tant que vous n'aurez pas publié, alors cliquez sur Publier dans le coin supérieur droit de l'éditeur.
Une fois votre site en ligne, revenez à Universally et cliquez sur Vérifier la connexion. Universally charge votre page d'accueil et vérifie que le script est présent et appartient à ce projet.
Astuce : Si la vérification ne trouve pas le script, publiez à nouveau. Vérifiez ensuite si votre hôte ou un CDN met en cache une ancienne copie de votre page d'accueil.
Étape 4 : Tester votre site Framer traduit
Une fois la connexion établie, votre site Framer est prêt à toucher des audiences dans différentes langues.
Gardez à l'esprit que Universally traduit une page la première fois que quelqu'un l'ouvre dans cette langue. C'est aussi à ce moment-là que ces mots comptent pour votre forfait, donc rien n'est dépensé tant qu'une page n'est pas réellement visitée.
Vous pouvez ajouter d'autres langues à tout moment depuis Toutes les langues » Ajouter une langue dans votre projet.
Pour voir votre site comme le ferait un nouveau visiteur, ouvrez-le dans une fenêtre de navigateur privée.
Le sélecteur de langue devrait apparaître dans le coin supérieur droit. Choisissez votre nouvelle langue, et la page se recharge dans cette langue à la même URL.
À partir de là, cliquez sur quelques pages pour vous assurer que la traduction est conservée pendant votre navigation.
Bonus : Affiner vos traductions Framer
Une fois votre première langue en ligne, trois paramètres méritent d'être connus.
Corriger une traduction. Sur un forfait payant, allez dans Traductions dans la barre latérale de votre projet, filtrez par langue et cliquez sur la ligne que vous souhaitez modifier. Lorsque vous enregistrez, la chaîne est marquée Vérifiée, vous pouvez donc distinguer vos modifications révisées de la sortie de l'IA.
Protéger les noms de marque et de produit. Les règles de glossaire, également sur les forfaits payants, vous permettent de conserver certains termes dans la langue d'origine ou de forcer une traduction spécifique pour eux. Ils fonctionnent de la même manière sur Framer que sur toute autre plateforme.
Vous pouvez suivre notre guide sur comment configurer un glossaire de traduction pour la procédure complète.
Ignorer des parties d'une page. S'il y a du contenu que vous ne souhaitez pas traduire, comme un exemple de code ou une liste de logos de clients avec des noms, allez dans Règles de traduction et ajoutez son sélecteur CSS sous Exclure les sélecteurs CSS. Le paramètre Exclure les pages n'a aucun effet sur les sites Framer, les sélecteurs sont donc le moyen de laisser du contenu de côté.
Consultez la documentation sur l'inclusion et l'exclusion des sélecteurs CSS pour des exemples.
FAQ sur la traduction d'un site Framer
1. En quoi Universally diffère-t-il de Framer Localization ?
Framer Localization est intégré à Framer, et vous configurez et gérez chaque locale à l'intérieur de votre projet. Il est facturé par locale. Universally s'exécute en dehors de Framer à partir d'une ligne de code et traduit les pages avec l'IA lorsque les visiteurs les ouvrent. Framer Localization a un avantage pour le SEO : il donne à chaque langue sa propre URL et ajoute des balises hreflang, ce que Universally ne fait pas sur Framer.
2. Ai-je besoin d'un plan Framer payant pour utiliser Universally ?
Universally s'appuie sur la fonctionnalité de code personnalisé de Framer, et Framer n'offre du code personnalisé que sur les forfaits payants. Du côté de Universally, vous pouvez commencer gratuitement avec 1 site Web, 1 langue et 2 000 mots traduits.
3. La traduction de mon site Framer affectera-t-elle mon SEO ?
Vos classements actuels ne changeront pas, car vos URL et vos pages d'origine restent exactement les mêmes. Les moteurs de recherche continuent d'indexer votre langue source. Le revers de la médaille est que vos pages traduites ne sont pas indexées séparément et qu'il n'y a pas de balises hreflang sur les sites Framer.
4. Universally traduit-il le contenu CMS de Framer ?
Universally traduit le texte qui se trouve dans le HTML de votre page publiée, ce qui devrait inclure les éléments CMS que Framer affiche sur la page. Le texte que JavaScript ajoute après le chargement de la page, comme certains widgets intégrés, peut rester dans la langue d'origine.
5. Quelles parties d'un site Framer ne seront pas traduites ?
Quelques éléments restent dans votre langue d'origine. Les pages protégées par mot de passe ne sont pas traduites, pas plus que le texte que JavaScript ajoute après le chargement de la page ou les données structurées JSON-LD. Il y a aussi une limite d'environ 2 000 chaînes de texte par page, ce qui est bien plus que ce qu'utilise une page de destination typique.
Avec le script en place, ajouter votre prochaine langue n'est qu'une question de la choisir et d'activer son interrupteur Live.
Nous espérons que cet article vous a aidé à apprendre comment traduire votre site web Framer à l'aide de l'IA. Vous voudrez peut-être aussi consulter notre guide sur comment modifier les traductions WordPress directement sur la page et comment traduire les pages du panier et de paiement dans WooCommerce.
Prêt à mondialiser votre site web Framer ? Commencez gratuitement avec Universally.
Ajouter un commentaire