So fügst du deiner App oder Website mehrere Sprachen hinzu

Um einer App mehrere Sprachen hinzuzufügen, verschiebst du jeden Text der Oberfläche in Übersetzungsdateien (eine pro Sprache), lädst sie mit einer i18n-Bibliothek und ergänzt einen Sprachwechsler, der die Wahl merkt. Für öffentliche Seiten, die in der Suche gefunden werden sollen, bekommt jede Sprache eine eigene URL wie /fr/, und die Versionen werden über hreflang-Tags miteinander verknüpft. Danach kümmerst du dich um die Punkte, die man gern vergisst: Datum, Zahlen und Währungen, längere Texte in manchen Sprachen, Schriften von rechts nach links und Inhalte in der Datenbank.

Begriffe, die dir begegnen werden

• Internationalisierung (i18n): den Code auf beliebige Sprachen vorbereiten – keine fest eingebauten Texte, lokalisierte Formate, flexible Layouts. Das „18“ steht für die 18 Buchstaben zwischen dem i und dem n.
• Lokalisierung (l10n): die App für eine bestimmte Sprache oder einen Markt anpassen, meist Übersetzung, manchmal auch Währung, Bilder und rechtliche Texte.
• Locale: eine Sprache plus optional eine Region, etwa de-DE oder pt-BR.

Mach die Internationalisierung einmal gründlich, dann ist jede neue Sprache überwiegend Übersetzungsarbeit.

Optionen und Abwägungen

Für die meisten Apps ist eine Standard-i18n-Bibliothek mit Übersetzungsdateien die richtige Basis. Entwürfe darfst du per maschineller oder KI-Übersetzung erstellen, dann sollten muttersprachliche Personen prüfen, was Kunden am häufigsten sehen.

Die Teile einer mehrsprachigen App

Übersetzungsdateien

Statt <h1>Willkommen zurück</h1> steht im Code t('dashboard.welcome'), und jede Sprache hat eine Datei mit dem Text:

{
  "dashboard": {
    "welcome": "Willkommen zurück, {{name}}",
    "items_one": "{{count}} Eintrag",
    "items_other": "{{count}} Einträge"
  }
}

Verwende Platzhalter für Variablen, statt Satzfragmente zusammenzusetzen, denn die Wortstellung unterscheidet sich zwischen Sprachen. Und nutze die Pluralregeln der Bibliothek: Englisch hat zwei Formen (1 item, 2 items), manche Sprachen haben drei, vier oder mehr.

Datum, Zahlen und Geld formatieren

Formatiere das nicht von Hand. Die eingebaute Intl-API des Browsers formatiert für jedes Locale: 1.234,5 auf Deutsch ist 1,234.5 auf Englisch; Datumsangaben wechseln zwischen Tag-zuerst und Monat-zuerst; Währungssymbole wandern. Speichere Datumsangaben in UTC und Geldbeträge als Zahlen mit Währungscode, und formatiere erst zur Anzeige.

Layout, das sich dehnt

Übersetzter Text ist oft länger als Englisch, besonders Deutsch und Finnisch. Vermeide feste Breiten bei Schaltflächen und abgeschnittene Beschriftungen, und teste mit deiner längsten Sprache.

Sprachen, die von rechts nach links geschrieben werden

Arabisch, Hebräisch, Persisch und Urdu werden von rechts nach links gelesen. Setze für diese Locales dir="rtl" auf der Seite und verwende CSS-Logikeigenschaften (margin-inline-start statt margin-left; in Tailwind ms-4 statt ml-4), damit sich das Layout selbst spiegelt. Richtungsangaben wie Pfeile müssen ebenfalls gespiegelt werden.

Sprachwechsler und Erkennung

Zeige den Wechsler auf jeder Seite, beschriftet mit dem Namen jeder Sprache in der jeweiligen Sprache („Deutsch“, „Français“, „العربية“), nicht mit Flaggen. Flaggen stehen für Länder, nicht für Sprachen. Erkenne beim ersten Besuch die bevorzugte Sprache des Browsers, um eine Version vorzuschlagen, aber die ausdrückliche Wahl des Besuchers hat Vorrang und wird gespeichert.

URLs und SEO

Für Seiten, die in den Suchergebnissen erscheinen sollen, braucht jede Sprache eine eigene URL. Laut Googles Empfehlungen für mehrsprachige Websites gilt Stand September 2026:

• Eigene URLs pro Sprache: Unterverzeichnisse (example.com/fr/) sind am einfachsten; Subdomains und Länder-Domains funktionieren ebenfalls. URL-Parameter (?lang=fr) werden nicht empfohlen.
• Sprache nicht allein per Cookie oder Browser-Einstellung wechseln; der Crawler von Google sieht die anderen Versionen dann womöglich nie.
• Nicht automatisch nach Sprache weiterleiten; verlinke stattdessen zwischen den Versionen.
• hreflang verwenden, um Google mitzuteilen, welche Seiten Übersetzungen voneinander sind. Jede Version muss sich selbst und alle anderen auflisten, sonst werden die Angaben womöglich ignoriert. Füge x-default für die Ausweichseite hinzu.
• Google erkennt die Sprache einer Seite am sichtbaren Inhalt, nicht am lang-Attribut oder an hreflang. Übersetze deshalb die ganze Seite, nicht nur das Menü.

Setze trotzdem <html lang="fr"> auf jeder Version: Bildschirmleser nutzen es, um die richtige Aussprache zu wählen, und es ist eine Anforderung der Barrierefreiheit.

Bereiche der App, die nur angemeldete Nutzer sehen, müssen nicht indexiert werden. Dort ist es in Ordnung, die Sprache im Nutzerprofil zu speichern. Siehe SEO für mit KI gebaute Websites, wie öffentliche Seiten überhaupt gecrawlt werden.

Inhalte in der Datenbank

Oberflächentexte liegen in Dateien; Inhalte wie Produktnamen, Blogbeiträge und Kategorien liegen in der Datenbank. Zwei übliche Muster:

• Eine Übersetzungstabelle: product_translations (product_id, locale, name, description). Sauber, skaliert auf viele Sprachen.
• Eine JSON-Spalte pro Feld: name: {"en": "...", "fr": "..."}. Einfacher bei wenigen Sprachen.

Lege fest, was passiert, wenn eine Übersetzung fehlt. Meist fällt man auf die Standardsprache zurück, statt eine leere Fläche zu zeigen.

E-Mails und Benachrichtigungen

Speichere die Sprache jedes Nutzers und verwende sie auch für E-Mails, Benachrichtigungen und PDFs. Es ist leicht, die App zu übersetzen und zu vergessen, dass die Willkommens-E-Mail weiterhin auf Englisch ankommt.

Prompts, die funktionieren

Füge Internationalisierung mit react-i18next hinzu. Verschiebe jeden für Nutzer sichtbaren Text nach locales/en.json mit namensbasierten Schlüsseln, verwende Platzhalter und Pluralregeln statt Textverkettung, und formatiere Datum, Zahlen und Preise mit Intl passend zur aktuellen Sprache. Ändere noch keinen Wortlaut.

Füge Französisch und Deutsch hinzu. Öffentliche Marketingseiten bekommen die URL-Präfixe /fr/ und /de/, Englisch bleibt im Stammverzeichnis. Auf jeder Seite gibt es hreflang-Links (inklusive Selbstverweis und x-default), und das html-lang-Attribut wird pro Seite gesetzt. Füge einen Sprachwechsler hinzu, der jeden Sprachnamen in seiner eigenen Sprache zeigt. Für angemeldete Seiten speichere die Sprache im Nutzerprofil.

Füge Arabisch mit Unterstützung für Rechts-nach-links hinzu: Setze dir="rtl" für Arabisch, ersetze linke und rechte Außen- und Innenabstände durch logische Eigenschaften, spiegle richtungsabhängige Symbole und prüfe, ob Formulare und Tabellen weiterhin korrekt lesbar sind.

Schritt für Schritt

1. Wähle deine erste zusätzliche Sprache nach echter Nachfrage: Wo sitzen deine Besucher oder Kunden?
2. Internationalisiere den Code: Texte in Dateien verschieben, Pluralregeln und Intl-Formatierung ergänzen. Veröffentliche das zunächst nur auf Englisch und prüfe, dass sich nichts geändert hat.
3. Lege die URL-Struktur für öffentliche Seiten fest und ergänze hreflang.
4. Übersetze: Entwurf mit maschineller oder KI-Übersetzung, dann Prüfung durch eine muttersprachliche Person. Gib Übersetzern Kontext: Ein Wort wie „Buchen“ ist auf einem Bildschirm ein Substantiv und auf dem nächsten ein Verb.
5. Übersetze Datenbankinhalte und lege Ausweichwerte fest.
6. Lokalisiere den Rest: E-Mails, Fehlermeldungen, rechtliche Seiten, Bilder mit Text.
7. Teste jede Sprache in Telefonbreite und, falls relevant, in Rechts-nach-links-Darstellung.
8. Richte einen Prozess ein, damit neue Funktionen mit Übersetzungen ausgeliefert werden und nicht erst Monate später.

Häufige Fehler

• Sätze zusammensetzen ("Du hast " + n + " Nachrichten"), was in anderen Sprachen bricht.
• Fest eingebauter Text in Komponenten, Fehlermeldungen und Validierungstexte.
• Datum und Preise von Hand formatieren.
• Flaggen als Sprachsymbole und automatische Weiterleitungen, die Menschen in der falschen Version festhalten.
• Eine URL für alle Sprachen bei Seiten, die indexiert werden sollen.
• Fehlende hreflang-Rückverweise, sodass Google die Angaben ignoriert.
• Oberfläche übersetzt, Inhalte nicht oder umgekehrt.
• Ungeprüfte maschinelle Übersetzung auf Preis-, Rechts- und Kassenseiten.

Checkliste für mehrsprachige Apps

• Keine fest eingebauten, für Nutzer sichtbaren Texte; Pluralregeln und Platzhalter werden verwendet
• Datum, Zahlen und Währungen werden mit Intl formatiert
• Sprachwechsler mit nativen Namen auf jeder Seite; die Wahl wird gespeichert
• Eigene URLs pro Sprache für öffentliche Seiten; keine erzwungenen Weiterleitungen
• hreflang auf jeder Version, inklusive Selbstverweis und x-default
• html lang (und dir="rtl", wo nötig) ist pro Seite gesetzt
• Datenbankinhalte sind übersetzt, mit sinnvollen Ausweichwerten
• E-Mails und Benachrichtigungen werden in der Sprache des Nutzers verschickt
• Texte für Kunden sind von einer muttersprachlichen Person geprüft

Mehrere Sprachen mit Mythex

Auf Mythex fügst du Sprachen hinzu, indem du im Chat darum bittest – es gibt kein separates Übersetzungspanel. Die Prompts oben funktionieren also wie geschrieben. Mache zuerst den Schritt der Internationalisierung und prüfe ihn in der Vorschau, bevor du Sprachen hinzufügst. Es ist ein großer Umbau, und ein Chat-Checkpoint gibt dir einen Punkt, zu dem du zurückkehren kannst, falls etwas kaputtgeht (Chat und Checkpoints). Wenn die App Inhalte automatisch mit einer KI oder einer Übersetzungs-API übersetzen soll, nutzt das deinen eigenen API-Schlüssel, gespeichert in den Projekteinstellungen (Umgebungsvariablen und Geheimnisse). Wie du LLM-APIs nutzt erklärt die Kosten. Veröffentliche erneut, sobald die neuen Sprachen fertig sind.

Fragen