Sprachumschalter zur Website hinzufügen (ohne etwas kaputtzumachen) (2026)
Ein Sprachumschalter klingt einfach — ein Dropdown, eine Flagge, eine Liste von Sprachen. Falsch umgesetzt bricht er jedoch die Navigation, schadet dem SEO und verwirrt Nutzer mehr, als gar keinen Umschalter zu haben. Hier ist der vollständige Leitfaden, um es richtig zu machen.
Was ein Sprachumschalter wirklich leisten muss
Ein Sprachumschalter ist mehr als ein UI-Element — er ist eine Koordinationsebene zwischen Nutzerpräferenz, URL-Struktur und Content-Auslieferung. Eine vollständige Umsetzung muss:
- →Die Browsersprache beim ersten Besuch erkennen. Der
Accept-Language-Header (serverseitig) odernavigator.language(clientseitig) verrät, welche Sprache der Nutzer bevorzugt. Nutzen Sie das, um beim ersten Besuch automatisch weiterzuleiten oder die passende Sprache auszuliefern. - →Manuelles Überschreiben durch Nutzer erlauben. Automatische Erkennung ist ein Ausgangspunkt, keine endgültige Antwort. Ein deutscher Muttersprachler, der in Frankreich lebt, hat vielleicht eine französische Browsersprache, möchte aber deutsche Inhalte. Der Umschalter muss immer erreichbar sein.
- →Sich die Wahl merken. Speichern Sie die gewählte Sprache in
localStorageoder einem Cookie, damit wiederkehrende Besucher nicht erneut umschalten müssen. Ein Cookie ist vorzuziehen, wenn der Server die Sprache vor dem Rendern kennen soll. - →Die URL auf eine sprachspezifische Version aktualisieren. Ein Wechsel zu Französisch sollte zu
/fr/aboutnavigieren, statt den Inhalt an Ort und Stelle zu ändern, während die URL bei/aboutbleibt. URL-basiertes Sprach-Routing ist die Grundlage für mehrsprachiges SEO. - →Die Navigation nicht unterbrechen. Befindet sich ein Nutzer auf
/fr/products/widget-pround wechselt zu Deutsch, sollte er auf/de/products/widget-prolanden — nicht auf der deutschen Startseite.
Designmuster: Wo er platziert wird
Drei Positionen dominieren in der Praxis. Jede hat einen anderen Sichtbarkeits-/Aufdringlichkeits-Kompromiss:
| Position | Sichtbarkeit | Aufdringlichkeit | Am besten für |
|---|---|---|---|
| Obere Navigationsleiste | Hoch | Niedrig | Globale Zielgruppen, B2C-Websites |
| Footer | Niedrig | Keine | Sekundäre Option, Entwickler-Dokumentation |
| Schwebendes Widget | Hoch | Mittel | Nachrüstung bestehender Websites |
Horizontal scrollen, um alle Spalten zu sehen.
Für die meisten globalen Websites ist die obere Navigationsleiste der richtige Standard. Dort schauen Nutzer zuerst hin, und sie konkurriert nicht mit dem Seiteninhalt. Ein schwebendes Widget ist eine gute Option, wenn Sie die Navigation der Website nicht ändern können (z. B. ein Drittanbieter-CMS oder eine Webflow-Website, bei der Sie möglichst wenige Template-Änderungen vornehmen möchten).
Was Sie bei Sprachumschaltern NICHT tun sollten
Verwenden Sie nicht nur Flaggen-Icons
Flaggen stehen für Länder, nicht für Sprachen. Brasilien und Portugal sprechen beide Portugiesisch. Belgien hat drei Amtssprachen (Französisch, Niederländisch, Deutsch). Die Schweiz hat vier. Kanada nutzt Englisch und Französisch. Verwenden Sie stattdessen den nativen Sprachnamen (Français, Deutsch, 日本語) oder einen Sprachcode (FR, DE, JA) — oder kombinieren Sie Flaggen mit dem Sprachnamen, wenn regionale Unterscheidung wichtig ist.
Nicht ohne Bestätigung automatisch weiterleiten
Einen Nutzer, der auf lingvit.com/pricing landet, stillschweigend zu lingvit.com/fr/pricing weiterzuleiten, ist irritierend, wenn er die englische URL absichtlich geteilt hat. Zeigen Sie stattdessen ein nicht blockierendes Banner, das die erkannte Sprache anbietet und akzeptiert oder verworfen werden kann.
Machen Sie ihn auf Mobilgeräten nicht zu klein zum Finden
Ein 14px-Sprach-Label, das auf Mobilgeräten in einem Hamburger-Menü versteckt ist, ist praktisch unsichtbar. Ist Ihre Zielgruppe global verteilt, verdient der Umschalter ein sichtbares Tap-Ziel — mindestens 44×44px — selbst auf kleinen Bildschirmen.
Entfernen Sie den Umschalter nicht auf Mobilgeräten
Ein häufiger Fehler ist es, den Sprachumschalter auf Mobilgeräten „zur Platzersparnis” zu verstecken. Mobile Nutzer in nicht-englischsprachigen Märkten brauchen die Sprachkontrolle sogar öfter als Desktop-Nutzer — sie browsen mit höherer Wahrscheinlichkeit in ihrer Erstsprache.
Auswirkungen auf die URL-Struktur
Wenn ein Nutzer die Sprache wechselt, sollte sich die URL aktualisieren, um die neue Sprache widerzuspiegeln. Die beiden Standardmuster sind:
/fr/about— Unterverzeichnis (für die meisten Websites empfohlen)fr.example.com/about— Subdomain (bevorzugt für große Unternehmen)Unterverzeichnisse sind einfacher umzusetzen und erben direkt die Autorität der Domain. Subdomains erfordern eine separate DNS-Konfiguration und können von Suchmaschinen als eigenständige Websites behandelt werden.
Die für den Umschalter gewählte URL-Struktur muss zu Ihrer hreflang-Umsetzung passen. Die hreflang-Link-Tags im <head> Ihrer Seite teilen Suchmaschinen mit, welche URL welche Sprache bedient — und diese URLs müssen dieselben sein, zu denen der Umschalter navigiert.
Die SEO-Frage
Ein Sprachumschalter, der Inhalte nur per JavaScript ändert — ohne die URL zu aktualisieren —, ist für Suchmaschinen unsichtbar. Google crawlt und indexiert URLs, nicht JavaScript-Zustände.
Für mehrsprachiges SEO gilt folgende Anforderung:
- 1Jede Sprachversion muss eine eigene crawlbare URL haben (z. B.
/fr/pricing). - 2Jede Seite muss
hreflang-Link-Tags enthalten, die auf alle Sprachversionen einschließlich der Ausgangsversion verweisen. - 3Der Sprachumschalter muss zu diesen echten URLs verlinken — nicht eine JavaScript-Funktion auslösen, die Inhalte an Ort und Stelle austauscht.
Deshalb scheitert eine rein clientseitige Sprachumschaltung (Textänderung per JS ohne URL-Aktualisierung) beim SEO — auch wenn sie für Nutzer, die manuell umschalten, gut funktioniert.
Wie Lingvit das handhabt
Das einbettbare Widget von Lingvit enthält eine vollständige Sprachumschalter-Umsetzung:
Automatische Spracherkennung
Beim ersten Besuch liest Lingvit die bevorzugte Sprache des Browsers aus und liefert die passende Übersetzung. Keine Weiterleitung — der Seiteninhalt aktualisiert sich an Ort und Stelle für eine gefühlt schnellere Ladezeit.
Abstimmung mit Plattform-Routing
Die allgemeine Lingvit-Laufzeitübersetzung erzeugt beim Launch keine indexierbaren Sprach-URLs oder hreflang. Wird mehrsprachiges SEO benötigt, halten Sie den Umschalter mit den Sprach-URLs und Metadaten Ihrer Plattform im Einklang.
Dauerhafte Präferenz
Die gewählte Sprache wird im localStorage gespeichert. Wiederkehrende Besucher erhalten ihre bevorzugte Sprache sofort, ohne erneute Erkennung.
Anpassbare Position und Stil
Im Lingvit-Dashboard können Sie die Position des Umschalters (oben rechts, unten rechts, unten links), das Anzeigeformat (Sprachname, Code oder Flagge + Name) und das Farbschema passend zu Ihrer Marke konfigurieren.
Häufig gestellte Fragen
- Kann ich das Design des Sprachumschalters anpassen?
- Ja. Im Lingvit-Dashboard können Sie die Position des Widgets festlegen, wählen, ob der vollständige Sprachname, ein zweistelliger Code oder eine Flagge zusammen mit dem Namen angezeigt wird, und eine zu Ihrer Marke passende Farbe anwenden. Für erweiterte Anpassungen werden auch benutzerdefinierte CSS-Überschreibungen unterstützt.
- Wie interagiert der Umschalter mit hreflang?
- Die allgemeine Lingvit-Laufzeitübersetzung erzeugt beim Launch keine indexierbaren Sprach-URLs oder hreflang. Halten Sie den Umschalter mit den von Ihrer Plattform bereitgestellten Sprach-URLs im Einklang, wenn mehrsprachiges SEO erforderlich ist.
- Was, wenn ich einen eigenen benutzerdefinierten Umschalter bauen möchte?
- Ein benutzerdefinierter Umschalter kann die Laufzeitsprache steuern. Für indexierbares URL-Routing und hreflang außerhalb der unterstützten WordPress-Integration bleibt Ihre Plattform verantwortlich.
Weitere Anleitungen
Fügen Sie Ihrer Website einen Sprachumschalter hinzu
Automatische Spracherkennung, URL-Routing und ein anpassbares Umschalter-Widget — alles in einem Script-Tag.