Vos clients ne parlent pas tous la même langue. Votre site non plus ne devrait pas.
Si votre audience parle plus d'une langue, votre site doit fonctionner en plus d'une langue. Pas comme une réflexion après coup avec un widget Google Translate, mais avec du contenu vraiment localisé, un formatage de devise correct et une navigation qui semble native dans chaque langue.
La plupart des outils sans code rendent cela pénible. Vous finissez par dupliquer des pages, gérer du contenu parallèle ou ajouter un plugin de traduction qui casse votre mise en page.
Airo AI Builder gère le multilingue dès la première invite. Vous décrivez les langues, la devise, la locale, et l'IA l'intègre dans la structure. Pas de pages dupliquées à gérer. Pas de plugins. Un site, plusieurs langues, construit en quelques minutes.
Vous voulez voir le processus complet en action ? Regardez la construction de 10 minutes d'une boutique e-commerce bilingue :
Le principe clé : chargez vos exigences linguistiques en amont
La plus grande erreur que les gens font avec les constructions multilingues est d'ajouter le support linguistique après que le site est déjà construit. Cela mène à des retouches, des crédits supplémentaires et des traductions incohérentes.
Au lieu de cela, incluez vos exigences de langue et de locale dans votre toute première invite. Cela dit à l'IA de structurer chaque page, chaque composant et chaque texte avec le support multilingue intégré dès le départ.
Ce qu'il faut inclure dans votre première invite :
- Langue principale (la langue par défaut)
- Langue(s) secondaire(s)
- Un sélecteur de langue dans l'en-tête ou la navigation
- Formatage de devise et de nombre pour chaque locale
- Préférences de formatage de date
- Toute considération culturelle ou régionale (direction de lecture, ton formel vs. informel)
Étape 1 : Configurez la fondation
Votre première invite doit définir la structure complète avec la langue intégrée dans l'architecture.
Exemple d'invite (bilingue, espagnol en premier) :
"Construis une boutique en ligne bilingue pour des plantes d'intérieur et des jardinières en céramique faites main. La langue principale est l'espagnol, la secondaire est le français. Inclure un sélecteur de langue dans la navigation. Tous les prix en pesos colombiens (COP). Pages : page d'accueil avec hero et produits vedettes, catalogue de produits avec catégories et filtres, page À propos, formulaire de contact, panier et caisse. Couleurs de marque : vert forêt et terre cuite chaude. Le design doit être propre, moderne et accessible WCAG AA."
Exemple d'invite (site de services trilingue) :
"Crée un site web pour un cabinet de conseil en immigration à Montréal. Trois langues : français (principal), anglais et arabe. Sélecteur de langue dans la navigation supérieure. Pages : page d'accueil, services (permis de travail, parrainage familial, visas étudiants), biographies de l'équipe, FAQ et un formulaire de réservation de consultation. Design professionnel et digne de confiance. Toutes les dates au format JJ/MM/AAAA."
Exemple d'invite (portfolio bilingue) :
"Construis un site portfolio pour un designer graphique freelance basé à Paris. Français et anglais. Sélecteur de langue dans l'en-tête. Pages : galerie de travaux organisée par catégorie, À propos, services avec tarifs en euros et un formulaire de contact. Design minimaliste avec beaucoup d'espace blanc."
En précisant les langues, la devise et l'emplacement du sélecteur dans la première invite, l'IA crée chaque page avec du texte multilingue et un mécanisme de changement cohérent. Vous n'avez pas à le retrofitter.
Étape 2 : Construisez la profondeur dans chaque langue
Une fois la fondation établie, vos invites de suivi ajoutent des fonctionnalités. L'IA connaît déjà votre configuration linguistique, donc les nouveaux composants l'héritent automatiquement.
Invite pour un catalogue de produits bilingue :
"Ajouter une page de catalogue de produits avec : filtres de catégories (plantes, jardinières, accessoires), badges de stock (en stock, stock faible, épuisé) et une modale de guide de soin pour chaque plante. Tout le contenu doit fonctionner en espagnol et en français. Le guide de soin doit inclure le planning d'arrosage, les besoins en lumière et le niveau de difficulté."
Invite pour un formulaire de contact localisé :
"Construire une page de contact avec un formulaire (nom, e-mail, liste déroulante de sujet, message). Les étiquettes du formulaire et le texte de placeholder doivent changer avec le sélecteur de langue. Le message de succès doit apparaître dans la langue dans laquelle l'utilisateur navigue. Câbler les soumissions du formulaire à [email protected]."
Invite pour une caisse bilingue :
"Ajouter des pages de panier et de caisse. Le panier affiche les noms des articles, les quantités et les prix en COP. Le formulaire de caisse collecte l'adresse de livraison, avec les champs département/ville colombiens. La page de résumé de commande et de confirmation doit fonctionner dans les deux langues."
Étape 3 : Gérez les détails qui cassent les sites multilingues
Le support linguistique ne concerne pas seulement la traduction du texte. Il y a des détails de formatage et de structure qui font ou défont l'expérience.
Formatage de devise et de nombre :
"Formater tous les prix en utilisant les conventions du peso colombien : symbole COP, point comme séparateur de milliers, pas de décimales pour les montants entiers. Exemple : COP 45.000."
Formatage de date et d'heure :
"Afficher toutes les dates au format français (jour mois année, par exemple 15 avril 2026) quand le site est en français. Passer au format April 15, 2026 quand en anglais."
Langues de droite à gauche (RTL) :
"Ajouter l'arabe comme troisième option de langue. Quand l'arabe est sélectionné, basculer toute la mise en page de droite à gauche : alignement du texte, ordre de navigation et direction des champs de formulaire. Garder le même système de design mais refléter la mise en page."
SEO pour chaque langue :
"Ajouter des balises hreflang pour les versions française et anglaise. Chaque langue doit avoir son propre titre méta et sa propre description méta. Les pages françaises utilisent le préfixe d'URL /fr/, les pages anglaises utilisent /en/."
Étape 4 : Le passage d'accessibilité
Les sites multilingues doivent être accessibles dans chaque langue. C'est particulièrement important pour les lecteurs d'écran, qui s'appuient sur l'attribut lang pour savoir comment prononcer le contenu.
Invite pour l'accessibilité :
"Effectuer un passage d'accessibilité sur l'ensemble du site. Définir l'attribut HTML lang sur 'fr' par défaut et le changer en 'en' quand le sélecteur de langue est réglé sur l'anglais. Assurer les ratios de contraste WCAG AA, ajouter du texte alternatif à toutes les images dans les deux langues, ajouter des états de focus à tous les éléments interactifs et s'assurer que le sélecteur de langue est accessible au clavier."
Schémas multilingues par cas d'usage
| Cas d'usage | Langues | Considérations clés |
|---|---|---|
| Boutique e-commerce | Espagnol + Français | Formatage de devise, noms de produits dans les deux langues, flux de caisse bilingue |
| Site de services locaux | Français + Anglais | Formulaire de réservation bilingue, date/heure localisée, champs d'adresse régionaux |
| Restaurant/café | 2+ langues | Articles du menu dans chaque langue, horaires formatés par locale, localisation avec carte locale |
| Portfolio | Allemand + Français | Descriptions de projets dans les deux langues, formulaire de contact bilingue |
| Page d'atterrissage SaaS | Anglais + Japonais | La largeur des caractères varie, les boutons CTA nécessitent des tests dans les deux |
| ONG | Français + Arabe | Support RTL requis, montants de dons en monnaie locale, adaptation du ton culturel |
| Tourisme/voyage | 3+ langues | Itinéraires, tarifs en plusieurs devises, hreflang pour le SEO géo-ciblé |
Problèmes courants et comment les résoudre
| Problème | Quoi inviter |
|---|---|
| Le sélecteur de langue ne change pas tout le contenu | "S'assurer que le sélecteur de langue met à jour tout le texte de la page, y compris la navigation, le pied de page, les étiquettes de formulaire et le texte des boutons. Rien ne doit rester dans la langue précédente après le changement." |
| Les prix s'affichent dans le mauvais format | "Formater les prix en utilisant les conventions de [locale]. Utiliser [symbole de devise], [séparateur de milliers] et [séparateur décimal]." |
| Le texte traduit casse la mise en page | "Vérifier toutes les pages dans les deux langues pour le débordement de texte. Les boutons, cartes et éléments de navigation doivent se redimensionner ou se tronquer gracieusement quand le texte est plus long dans une langue." |
| Le lecteur d'écran lit la mauvaise langue | "Définir l'attribut HTML lang dynamiquement en fonction de la langue sélectionnée. Cela garantit que les lecteurs d'écran utilisent la prononciation correcte." |
| Le SEO ne distingue pas les langues | "Ajouter des balises hreflang à chaque page. Chaque version linguistique doit avoir des titres méta et des descriptions uniques. Utiliser les préfixes d'URL /fr/ et /en/." |
| La mise en page RTL ne se reflète pas correctement | "Quand l'arabe est sélectionné, refléter toute la mise en page : éléments de navigation de droite à gauche, alignement du texte à droite, champs de formulaire alignés à droite. Utiliser les propriétés logiques CSS (margin-inline-start au lieu de margin-left)." |
Conseils pour de meilleures constructions multilingues
- Mettez la langue dans votre première invite. Retrofitter le support multilingue coûte plus de crédits et produit de moins bons résultats que de le construire dès le départ.
- Précisez explicitement la langue principale. Ne supposez pas l'anglais. Si votre audience principale parle français, dites "la langue principale est le français" pour que l'IA construise en français d'abord, pas en anglais d'abord avec le français comme ajout.
- Testez le sélecteur sur chaque page. Changez de langue et vérifiez chaque section. La navigation, les pieds de page, les étiquettes de formulaire, les messages d'erreur et les états de succès doivent tous changer.
- Utilisez du vrai texte, pas du texte de placeholder. Collez vos vraies descriptions d'entreprise, noms de produits et détails de services dans les deux langues. L'IA traduit bien, mais vos mots sont toujours meilleurs que du texte de placeholder générique.
- N'oubliez pas le contenu méta. Les titres de pages, descriptions et texte alternatif ont aussi besoin de traductions. Invitez-les spécifiquement pour qu'ils ne soient pas oubliés.
- Vérifiez la longueur du texte. Le texte allemand et espagnol est généralement 15 à 30 % plus long que l'anglais. Assurez-vous que votre mise en page le gère sans se casser.
Voyez-le construit : une boutique bilingue en 10 minutes
Vous voulez voir ce processus en action ? Dans cet épisode d'Inside Airo AI Builder, trois invites construisent une boutique e-commerce bilingue complète : espagnol en premier, pesos colombiens, catalogue complet, panier, caisse et un passage d'accessibilité WCAG AA. Chaque invite est à l'écran.
Regardez la construction complète sur YouTube
Commencez à construire
Si votre audience parle plus d'une langue, votre site devrait aussi. Décrivez vos langues, votre locale et vos pages dans une invite, et Airo AI Builder s'occupe du reste.