Hoe voeg je meerdere talen toe aan je app of website

Om een app meertalig te maken, zet je alle interfacetekst in vertaalbestanden (één per taal), laad je die met een i18n-bibliotheek en voeg je een taalwisselaar toe die de keuze onthoudt. Voor publieke pagina's die je via zoekmachines wilt vinden, geef je elke taal een eigen URL, zoals /fr/, en koppel je de versies met hreflang-tags. Daarna regel je de dingen die mensen vaak vergeten: datums, getallen en valuta, langere tekst in sommige talen, rechts-naar-links-schriften en content in je database.

Termen die je tegenkomt

• Internationalisatie (i18n): de code voorbereiden op elke taal: geen vaste teksten in de code, locale-afhankelijke opmaak en flexibele lay-outs. Het getal "18" is het aantal letters tussen de i en de n.
• Lokalisatie (l10n): de app aanpassen voor een specifieke taal of markt, vooral vertaling, soms ook valuta, beeldmateriaal en juridische teksten.
• Locale: een taal en eventueel een regio, zoals en-GB of pt-BR.

Doe i18n één keer goed, dan wordt elke nieuwe taal vooral vertaalwerk.

Opties en afwegingen

Voor de meeste apps is een standaard i18n-bibliotheek met vertaalbestanden de juiste basis. Maak concepten met machine- of AI-vertaling als je wilt, en laat daarna vloeiende sprekers de teksten nalopen die klanten het vaakst zien.

De onderdelen van een meertalige app

Vertaalbestanden

In plaats van <h1>Welkom terug</h1> staat er in de code t('dashboard.welcome'), en elke locale heeft een bestand met de tekst:

{
  "dashboard": {
    "welcome": "Welkom terug, {{name}}",
    "items_one": "{{count}} item",
    "items_other": "{{count}} items"
  }
}

Gebruik placeholders voor variabelen in plaats van zinsfragmenten aan elkaar te plakken, want de woordvolgorde verschilt per taal. Gebruik ook de meervoudsregels van de bibliotheek: Engels heeft twee vormen (1 item, 2 items), maar sommige talen hebben er drie, vier of meer.

Datums, getallen en bedragen opmaken

Maak die niet met de hand op. De ingebouwde Intl-API van de browser formatteert voor elke locale: 1.234,5 in het Nederlands is 1,234.5 in het Engels; datums wisselen tussen dag-eerst en maand-eerst; valutasymbolen verplaatsen. Sla datums op in UTC en bedragen als getal met een valutacode, en formatteer alleen voor weergave.

Lay-out die meegroeit

Vertaalde tekst is vaak langer dan Engels, vooral Duits en Fins. Vermijd vaste breedtes voor knoppen en afgekapte labels, en test met je langste taal.

Rechts-naar-links-talen

Arabisch, Hebreeuws, Perzisch en Urdu lopen van rechts naar links. Zet dir="rtl" op de pagina voor die locales en gebruik CSS-logische eigenschappen (margin-inline-start in plaats van margin-left; in Tailwind ms-4 in plaats van ml-4), zodat de lay-out vanzelf spiegelt. Richtingsiconen, zoals pijlen, moet je ook omdraaien.

Taalwisselaar en detectie

Toon op elke pagina een taalwisselaar met de eigen naam van elke taal ("Deutsch", "Français", "العربية") in plaats van vlaggen. Vlaggen staan voor landen, niet voor talen. Detecteer bij het eerste bezoek de voorkeurstaal van de browser om een versie voor te stellen, maar laat de expliciete keuze van de bezoeker winnen en onthoud die.

URL's en SEO

Voor pagina's die je in zoekresultaten wilt, heeft elke taal een eigen URL. Volgens Google's richtlijnen voor meertalige sites (stand september 2026) geldt het volgende:

• Aparte URL's per taal: submappen (example.com/fr/) zijn het eenvoudigst; subdomeinen en landdomeinen werken ook. URL-parameters (?lang=fr) worden niet aanbevolen.
• Wissel niet alleen via cookie of browserinstelling van taal; de crawler van Google ziet de andere versies dan misschien nooit.
• Stuur niet automatisch door op basis van taal; link in plaats daarvan tussen de versies.
• Gebruik hreflang om Google te laten weten welke pagina's vertalingen van elkaar zijn. Elke versie moet zichzelf en alle andere vermelden, anders worden de annotaties mogelijk genegeerd. Voeg x-default toe voor de terugvalpagina.
• Google herkent de taal van een pagina aan de zichtbare inhoud, niet aan lang of hreflang. Vertaal dus de hele pagina, niet alleen het menu.

Zet toch op elke versie <html lang="fr">: schermlezers gebruiken dat om de juiste uitspraak te kiezen, en dat is een toegankelijkheidseis.

Schermen waar gebruikers zijn ingelogd hoeven niet geïndexeerd te worden. Voor die schermen is het prima om de taal in het profiel van de gebruiker op te slaan. Zie SEO voor met AI gebouwde websites om publieke pagina's überhaupt gecrawld te krijgen.

Content in je database

Interfacetekst staat in bestanden; content zoals productnamen, blogposts en categorieën staat in de database. Twee veelgebruikte patronen:

• Een vertaaltabel: product_translations (product_id, locale, name, description). Netjes en schaalbaar voor veel talen.
• Een JSON-kolom per veld: name: {"en": "...", "fr": "..."}. Eenvoudiger voor een paar talen.

Bepaal wat er gebeurt als een vertaling ontbreekt. Meestal val je terug op de standaardtaal, in plaats van lege ruimte te tonen.

E-mails en meldingen

Sla de taal van elke gebruiker op en gebruik die ook voor e-mails, meldingen en PDF's. Het is makkelijk om de app te vertalen en te vergeten dat de welkomstmail nog in het Engels binnenkomt.

Prompts die werken

Voeg internationalisatie toe met react-i18next. Zet elke tekst die gebruikers zien in locales/en.json met genamespacete sleutels, gebruik interpolatie en meervoudsregels in plaats van tekst aan elkaar te plakken, en formatteer datums, getallen en prijzen met Intl op basis van de huidige locale. Verander nog geen woorden.

Voeg Frans en Duits toe. Publieke marketingpagina's krijgen de URL-prefixen /fr/ en /de/, met Engels in de root, hreflang-links op elke pagina (inclusief de verwijzing naar zichzelf en x-default), en html lang per pagina ingesteld. Voeg een taalwisselaar toe die de eigen naam van elke taal toont. Voor ingelogde pagina's sla je de taal op in het profiel van de gebruiker.

Voeg Arabisch toe met ondersteuning voor rechts-naar-links: zet dir="rtl" voor Arabisch, vervang linker- en rechtermarges en -paddings door logische eigenschappen, spiegel richtingsiconen, en controleer of formulieren en tabellen nog steeds goed lezen.

Stap voor stap

1. Kies je eerste extra taal op basis van echte vraag: waar je bezoekers of klanten zitten.
2. Maak de code geschikt voor meerdere talen: zet teksten in bestanden en voeg meervoud en Intl-opmaak toe. Lever dit eerst alleen in het Engels op en controleer dat er niets veranderd is.
3. Bepaal de URL-structuur voor publieke pagina's en voeg hreflang toe.
4. Vertaal: maak concepten met machine- of AI-vertaling en laat een native speaker nalopen. Geef vertalers context. Het woord "Book" is op het ene scherm een zelfstandig naamwoord en op het andere een werkwoord.
5. Vertaal de databasecontent en stel terugvallen in.
6. Lokaliseer de rest: e-mails, foutmeldingen, juridische pagina's en afbeeldingen met tekst erin.
7. Test elke taal op telefoonbreedte, en met rechts-naar-links als dat van toepassing is.
8. Richt een proces in zodat nieuwe functies met vertalingen worden uitgebracht, en niet maanden later.

Veelgemaakte fouten

• Zinnen aan elkaar plakken ("Je hebt " + n + " berichten"), wat in andere talen breekt.
• Vaste tekst in componenten, foutmeldingen en validatieteksten.
• Datums en prijzen met de hand opmaken.
• Vlaggen voor talen, en automatische redirects die mensen in de verkeerde versie vastzetten.
• Eén URL voor alle talen op pagina's die geïndexeerd moeten worden.
• Ontbrekende hreflang-terugverwijzingen, waardoor Google de annotaties negeert.
• De interface vertalen maar niet de content, of andersom.
• Niet-nagelezen machinevertaling op prijs-, juridische en betaalpagina's.

Checklist meertalige app

• Geen vaste teksten die gebruikers zien; meervoudsregels en placeholders gebruikt
• Datums, getallen en valuta opgemaakt met Intl
• Taalwisselaar met eigen namen op elke pagina; keuze onthouden
• Aparte URL's per taal voor publieke pagina's; geen geforceerde redirects
• hreflang op elke versie, inclusief de eigen versie en x-default
• html lang (en dir="rtl" waar nodig) per pagina ingesteld
• Databasecontent vertaald, met verstandige terugvallen
• E-mails en meldingen verstuurd in de taal van de gebruiker
• Klantgerichte tekst nagelezen door een native speaker

Meertalig maken op Mythex

Op Mythex voeg je talen toe door het in de chat te vragen. Er is geen apart vertaalpaneel, dus de prompts hierboven werken zoals ze staan. Doe eerst de internationaliseringsstap en controleer die in Preview voordat je talen toevoegt. Het is een grote refactor, en een chatcheckpoint geeft je een punt om op terug te gaan als er iets misgaat (chat en checkpoints). Als je wilt dat de app content automatisch vertaalt met een AI of vertaal-API, gebruik je je eigen API-sleutel, opgeslagen in de projectinstellingen (omgevingsvariabelen en geheimen). In hoe gebruik je LLM-API's lees je wat het kost. Publiceer opnieuw zodra de nieuwe talen klaar zijn.

Veelgestelde vragen