Skip to content
TKTech-KarlProduct Engineer
This content is only available in German.
3 min read

Mehrsprachige Inhalte ohne Lügen

Wie man DE/EN/FR ausliefert, ohne Übersetzungen vorzutäuschen – und warum der Fallback ein Produktfeature ist.

i18nContentArchitektur
Drei überlappende Rahmen mit den Kürzeln DE, EN und FR auf hellem Raster

Mehrsprachige Websites haben ein unangenehmes Geheimnis: Sehr oft sind sie es nicht. Die Navigation ist übersetzt, der Footer auch, aber der wichtige Artikel existiert nur auf Deutsch. Die Seite tut trotzdem so, als wäre alles verfügbar.

Das ist kein technisches Problem. Es ist eine Entscheidung über Ehrlichkeit.

UI-Sprache und Inhaltssprache sind zwei Dinge

Ein häufiger Fehler ist, die Sprache der Oberfläche mit der Sprache des Inhalts gleichzusetzen. Eine englische Oberfläche bedeutet nicht, dass jeder Artikel auf Englisch existiert. Eine deutsche Oberfläche bedeutet nicht, dass jeder Artikel auf Deutsch geschrieben wurde.

Diese Trennung ist der Schlüssel:

  • UI-Sprache: Navigation, Buttons, Formulare, Fehlermeldungen, Datumsformate.
  • Inhaltssprache: der Text eines Projekts oder Artikels, in der Sprache, in der er tatsächlich geschrieben wurde.

Die UI kann vollständig übersetzt sein. Der Inhalt nicht. Beides ist in Ordnung – solange es sichtbar bleibt.

Ein Fallback ist ein Feature, kein Notfall

Wenn ein Inhalt in der angefragten Sprache fehlt, gibt es drei Möglichkeiten:

  1. Nichts anzeigen. Der Inhalt verschwindet. Das ist einfach, aber schlecht: Relevante Information wird unsichtbar.
  2. Maschinell übersetzen. Der Inhalt wirkt verfügbar, ist aber möglicherweise falsch. Das ist die unehrlichste Variante.
  3. Die beste verfügbare Sprache zeigen – und kennzeichnen. Der Inhalt bleibt auffindbar, die Nutzer wissen, woran sie sind.

Ich bevorzuge die dritte Variante. Die Reihenfolge kann zum Beispiel sein: angefragte Sprache → Deutsch → Englisch → Französisch → jede verfügbare Sprache. Wichtig ist, dass die Reihenfolge dokumentiert und überall gleich ist.

Der Hinweis muss sichtbar sein

Ein Fallback ohne Kennzeichnung ist eine kleine Lüge. Die Nutzer klicken auf einen englischen Titel, landen auf einem deutschen Artikel und verstehen nicht, warum. Deshalb gehört an den Inhalt ein klarer Hinweis: „Dieser Inhalt ist nur auf Englisch verfügbar.“

Dazu kommen drei technische Details, die oft vergessen werden:

  • lang-Attribut: Der Inhaltsbereich bekommt die tatsächliche Sprache, nicht die UI-Sprache. Ein deutscher Artikel in einer englischen Oberfläche braucht lang="de".
  • Canonical: Die kanonische URL zeigt auf die tatsächliche Inhaltssprache, damit Suchmaschinen keine Duplikate indexieren.
  • hreflang: Nur für tatsächlich vorhandene Übersetzungen ausgeben. Ein hreflang="fr", das auf einen deutschen Fallback zeigt, ist irreführend.

Suche über alle Sprachen

Wenn Inhalte in verschiedenen Sprachen existieren, darf die Suche sie nicht verstecken. Eine englische Nutzerin, die nach „design system“ sucht, sollte den englischen Artikel finden – auch wenn die UI gerade Deutsch ist. Die Lösung: über alle veröffentlichten Inhalte suchen und die Sprache im Ergebnis anzeigen. Optional kann man nach Sprache filtern.

Das fühlt sich zunächst falsch an, weil die Oberfläche nicht zur Trefferliste passt. In der Praxis ist es besser als die Alternative: Relevante Inhalte, die niemand findet, weil sie „falsch“ sortiert sind.

Was man nicht tun sollte

  • Fehlende Übersetzungen verstecken, ohne es zu sagen. Der Nutzer merkt es spätestens beim Lesen.
  • Automatisch übersetzen und als Original ausgeben. Das beschädigt Vertrauen und manchmal die Bedeutung.
  • Für jeden Fallback eine neue URL erzeugen, ohne Canonical. Das erzeugt Duplicate Content und verwirrende Suchergebnisse.
  • Die Sprache der Oberfläche für den Inhalt halten. Dann bekommen Screenreader und Suchmaschinen falsche Informationen.

Ein kleines Implementierungsmuster

Im Kern braucht es eine Funktion, die aus einer Übersetzungsgruppe die beste verfügbare Version auswählt:

function resolveGroup(group, requestedLang) {
  const exact = group.find((entry) => entry.lang === requestedLang);
  if (exact) return { entry: exact, isFallback: false };

  const order = [requestedLang, "de", "en", "fr"];
  const fallback = order
    .map((lang) => group.find((entry) => entry.lang === lang))
    .find(Boolean);

  return fallback
    ? { entry: fallback, isFallback: true }
    : null;
}

Der Rest ist Darstellung: Badge, Hinweis, lang-Attribut, Canonical. Keine Magie.

Fazit

Mehrsprachigkeit ist kein Übersetzungsproblem, sondern ein Transparenzproblem. Eine Seite, die klar sagt, was übersetzt ist und was nicht, wirkt professioneller als eine, die alles vorgibt. Der Fallback ist nicht der Kompromiss. Er ist das ehrliche Produkt.

Have a project in mind?

Tell me briefly what it is about. I usually reply within 24 to 48 hours.

Start a project