Sprachwähler auf deiner Website: wo platzieren und wie richtig gemacht

Wenn deine Website mehrere Sprachen spricht, gibt es ein Schnittstellenelement, das wie ein unbedeutendes Detail aussieht, aber direkte Auswirkungen auf Verkäufe und SEO hat: die Sprachauswahl. Es ist der Einstiegspunkt, der es jedem Besucher ermöglicht, seine Sprache zu wählen, und wenn sie nicht dort ist, wo er sie erwartet, oder wenn sie nicht richtig funktioniert, geht einfach ein Teil deines internationalen Traffics weg, ohne zu kaufen.

In dieser Anleitung erklären wir dir, wo du sie platzierst, wie du sie entwirfst, damit sie funktioniert, welche Fehler du vermeidest und wie du sie mit deiner SEO verbindest, damit Google sie auch nutzen kann.

Schnelle Zusammenfassung

• Der Sprachwahlschalter reduziert die internationale Absprungrate und schafft Vertrauen bei Nutzern, die deine Hauptsprache nicht sprechen.
• Die zwei Positionen, die funktionieren, sind: oben rechts (Kopfzeile) und in der Fußzeile.
• Verwende den Namen der Sprache als Text („Español“, „English“), nicht nur Flaggen.
• Wenn der Nutzer die Sprache wechselt, sollte er zur gleichen Seite in der neuen Sprache gelangen, nicht zur Startseite.
• Der Wahlschalter sollte auf URLs pro Sprache + hreflang gestützt werden, damit auch Google deine Versionen versteht.

Warum der Sprachwahlschalter wichtiger ist, als er aussieht

Der Sprachwechsler ist der erste Reibungspunkt zwischen einem internationalen Besucher und deiner Website. Wenn sie ihn leicht finden, bleiben sie. Wenn sie ihn nicht finden oder er schlecht funktioniert, gehen sie. Und im E-Commerce oder auf jeder Website, bei der die Conversion von Vertrauen abhängt, macht die Wahrnehmung „diese Website ist für mich“ einen echten Unterschied.

Ein gut platzierter Wahlschalter:

• Reduziert die Absprungrate von internationalen Besuchern. Wenn jemand aus Frankreich auf deine Website auf Spanisch kommt und nicht schnell herausfinden kann, wie man das ändern kann, geht er. Ein sichtbarer Wahlschalter löst diesen Moment der Unsicherheit in Sekunden.
• Schafft Vertrauen. Zu sehen, dass deine Sprache verfügbar ist, ist ein Zeichen dafür, dass die Website für dich gedacht ist. Das reduziert die psychologische Reibung vor dem Kauf.
• Hilft der SEO. Ein Wahlschalter mit echten Links zu URLs pro Sprache – nicht nur eine JavaScript-Änderung – ermöglicht es Google, deine anderen Sprachversionen über diese Links zu entdecken und zu crawlen.

Wo man ihn platziert: die zwei Positionen, die funktionieren

Es gibt UX-Konventionen, die Nutzer verinnerlicht haben. Sie zu brechen, verwirrt. Sie zu befolgen, erleichtert die Navigation, ohne dass jemand darüber nachdenken muss.

Oben rechts (Kopfzeile)

Das ist der Ort, wo Menschen ihn erwarten zu finden. Ein Globus-Icon 🌐 oder der Code der aktuellen Sprache (DE, EN, FR…), der beim Klick die übrigen Optionen aufklappt. Der Vorteil, ihn in der Kopfzeile zu platzieren, ist, dass er auf allen Seiten sichtbar ist und nicht mit den Hauptnavigationselementen konkurriert.

Der empfohlene Stil: der aktuelle Sprachcode in Großbuchstaben oder der Name der Sprache, mit einem Pfeil oder Chevron, um anzuzeigen, dass es sich um ein Dropdown-Menü handelt. Einfach, erkennbar und diskret.

In der Fußzeile

Viele Leute scrollen zum Footer hinunter, um nach Optionen zu suchen, die sie oben nicht gefunden haben: Datenschutzrichtlinie, Bedingungen, Sprache, Land. Den Wahlschalter in der Fußzeile zu wiederholen, ist ein Sicherheitsnetz, das niemandem schadet und das für den Nutzer entscheidend sein kann, der bereits bis ganz unten auf der Seite gescrollt hat, ohne zu finden, was er gesucht hat.

Die Empfehlung ist, beide Positionen gleichzeitig zu nutzen. Die Implementierungskosten sind praktisch null und decken alle Nutzungsmuster ab.

Die Fehler, die fast jeder macht

Nur Flaggen, ohne Text

Flaggen repräsentieren Länder, nicht Sprachen. Spanisch ist nicht nur von Spanien, Englisch ist nicht nur vom Vereinigten Königreich und Französisch ist nicht nur von Frankreich. Nur die spanische Flagge für Spanisch zu verwenden, ist technisch inkorrekt und kann für einen Nutzer aus Mexiko, Argentinien oder Kolumbien ärgerlich sein.

Verwende den Name der Sprache in dieser Sprache selbst („Español“, „English“, „Français“, „Deutsch“). Wenn du eine Flagge als visuelle Unterstützung hinzufügen möchtest, tu das gerne, aber der Text sollte immer vorhanden sein. So ist es für jeden eindeutig.

Es in einem tiefen Menü verstecken

Wenn man drei Klicks braucht, um die Sprache zu wechseln, nutzt es nichts. Der Wahlschalter muss auf der ersten Navigationsebene sichtbar sein, ohne vorherige Interaktion, oder zumindest mit einem einzigen Klick erreichbar. Es in einem Einstellungsmenü oder in der Fußzeile zu verstecken, ohne dass es sichtbar ist, ist praktisch so, als würde es nicht vorhanden sein.

Immer zur Startseite umleiten, wenn die Sprache wechselt

Das ist einer der frustrierendsten Fehler aus Nutzersicht. Stell dir vor, du liest einen Blogartikel eines Unternehmens, du findest den Sprachwahlschalter und wechselst die Sprache – und plötzlich landest du auf der Startseite der Website in einer anderen Sprache, ohne dass der Artikel, den du gerade gelesen hast, irgendwo auftaucht.

Der Wahlschalter sollte den Nutzer zu der gleichen Seite bringen, die er gerade ansah, aber in der neuen Sprache. Wenn er auf /fr/produit/sneakerswar, sollte er beim Wechsel ins Englische zu /en/product/sneakers. Wenn es die entsprechende Version in dieser Sprache nicht gibt, ist die zweite Option die Homepage dieser Sprache. Niemals die Standard-Homepage ohne weiteres.

Sprache automatisch erkennen und nicht änderbar machen

Die automatische Spracherkennung durch Geolokalisierung oder Browsereinstellungen kann das Nutzungserlebnis verbessern. Es sollte aber immer eine sichtbare Möglichkeit geben, die Sprache manuell zu ändern. Es gibt Nutzer, die ihren Browser auf Englisch haben, aber den Inhalt lieber auf Spanisch sehen möchten, oder die reisen und den Inhalt in ihrer Sprache mögen, obwohl ihre IP ein anderes Land anzeigt. Die Kontrolle muss immer beim Nutzer liegen.

Das SEO-Detail, das die meisten ignorieren

Hier kommt der Teil, den nur wenige gut umsetzen: Damit Google deine Sprachversionen über den Selector versteht, müssen die Menü-Links auf echte URLs verweisen, die Google crawlen kann.

Wenn der Sprachwechsel nur über JavaScript erfolgt, ohne die URL zu ändern – das heißt, wenn tuweb.com/producto den Inhalt je nach Cookie oder Parameter auf Spanisch oder Französisch anzeigt – kann Google die verschiedenen Versionen nicht crawlen. Für Google ist es eine einzige URL mit einem einzigen Inhalt.

Die richtige Struktur ist, dass jede Sprache ihre eigene echte URL hat:

• tuweb.com/es/producto – spanische Version
• tuweb.com/fr/produit – französische Version
• tuweb.com/en/product – englische Version

Und der Sprach-Selector sollte auf diese echten URLs verweisen. So kann Google, wenn es deine Website crawlt und den Selector im Header findet, die anderen Sprachversionen entdecken, indem es diesen Links folgt, zusätzlich zum hreflang.

Wenn du verstehen möchtest, wie hreflang funktioniert und warum es für internationales SEO entscheidend ist, erklären wir es Schritt für Schritt in hreflang einfach erklärt.

Ein Sprach-Selector, der nur JavaScript verwendet, um den Inhalt zu ändern – ohne die URL zu ändern – hilft dem SEO nicht. Google sieht die Sprachversionen nicht; es sieht nur eine URL. Um in anderen Sprachen zu ranken, brauchst du echte URLs.

Barrierefreiheit: Was viele vergessen

Der Sprach-Selector muss auch für Nutzer mit Screenreadern zugänglich sein:

• Die Hauptschaltfläche oder der Link sollte einen beschreibenden Text enthalten: „Sprache wählen“ oder „Change language“, nicht nur ein Globus-Symbol ohne Alternativtext.
• Das Dropdown-Menü sollte mit der Tastatur bedienbar sein.
• Die Namen der Sprachen sollten in der Zielsprache geschrieben sein, nicht in der Ausgangssprache. „English“ schreibt man als „English“, nicht als „Englisch“. So können Screenreader sie für den jeweiligen Nutzer korrekt aussprechen.

Wie man es ohne Code-Änderungen hinzufügt

Das Gute ist: Wenn du ein Übersetzungstool wie Lantisverwendest, wird der Sprach-Selector automatisch hinzugefügt, wenn du das Snippet auf deiner Website installierst. Du musst ihn nicht entwerfen, programmieren oder mit den URLs pro Sprache verbinden: Er erscheint bereits konfiguriert, mit den richtigen Versionen jeder Seite verbunden und mit dem generierten hreflang.

Es funktioniert auf Framer, Webflow, Shopify und jeder anderen Plattform. Du kannst seine Position, seinen Stil und die angezeigten Sprachen vom Lantis-Panel aus anpassen, ohne Code zu ändern.

Für Websites, die bereits einen benutzerdefinierten Selector haben oder die eine feinere Kontrolle über das Styling möchten, stellt Lantis auch die Sprach-API zur Verfügung, damit das Entwicklungsteam seinen eigenen Selector anschließen kann.

Häufig gestellte Fragen

Sollte ich den Selector anzeigen, auch wenn ich nur zwei Sprachen habe?

Ja, immer. Auch mit zwei Sprachen ist der Selector notwendig, damit der Nutzer manuell wechseln kann, wenn die automatische Erkennung falsch liegt, und damit Google die zweite Version über den Link entdecken kann.

Kann der Sprach-Selector die Geschwindigkeit der Website beeinflussen?

Wenn er richtig implementiert ist, sollte das nicht der Fall sein. Ein Sprach-Selector ist im Grunde ein Menü mit Links, eines der leichtesten Elemente, die eine Website haben kann. Der Geschwindigkeitseinfluss kommt vom zugrunde liegenden Übersetzungstool, nicht vom Selector selbst.

Ist es besser, den Selector mit der aktuellen Sprache oder der Zielsprache anzuzeigen?

Beide Konventionen existieren. Die gebräuchlichste — und intuitivste — ist es, die aktuelle Sprache anzuzeigen und beim Ausklappen die verfügbaren Sprachen mit ihrem Namen in ihrer eigenen Sprache aufzulisten. Wichtig ist, dass die Namen immer in der Zielsprache stehen („Français“, nicht „Französisch“), damit ein französischer Nutzer sie auch dann erkennt, wenn er die Sprache der Website nicht versteht.

Fazit

Der Sprach-Selector ist ein kleines Element mit überraschend großem Einfluss auf die Nutzererfahrung bei mehrsprachigen Websites und auf das SEO. Ihn richtig zu platzieren (Header + Footer), richtig zu gestalten (Sprachnamen, nicht nur Flaggen) und mit echten URLs pro Sprache zu verbinden, macht aus einem technischen Detail einen geschäftlichen Vorteil.

Die gute Nachricht ist: Wenn du eine Übersetzungsschicht wie Lantis verwendest, konfiguriert sich alles von selbst: Der Selector erscheint automatisch, bereits mit den richtigen URLs verbunden und mit generiertem hreflang.

Kostenlos starten und starte deinen Sprach-Selector noch heute.