Web

Sprachauswahl auf der Website gestalten: Wie gelingt sie mehrsprachig?

Talha Aslan 17 Minuten Lesezeit 1 Aufrufe

Kurze Antwort

Was ist eine Sprachauswahl und warum ist sie auf mehrsprachigen Websites so wichtig?

Eine Sprachauswahl ist das Bedienelement, mit dem Besucher dieselbe Seite mit einem Klick in einer anderen Sprache öffnen. Eine gute Sprachauswahl sitzt an einer erwartbaren Stelle, nennt jede Sprache in ihrer eigenen Bezeichnung, verzichtet auf Flaggen, leitet nie zwangsweise um und folgt derselben Seitenzuordnung wie Ihre hreflang Angaben.

Alle Details und Beispiele finden Sie weiter unten im Beitrag

In diesem Leitfaden behandeln wir die Gestaltung der Sprachauswahl von Anfang bis Ende. Dazu gehören Platzierung, Beschriftung, mobiles Verhalten, die Nachteile automatischer Weiterleitungen, der Bezug zu hreflang und die Barrierefreiheit. Als Talha Aslan und Team sehen wir auf mehrsprachigen Websites vor allem ein Problem. Viele Teams behandeln die Sprachauswahl wie eine Dekoration, die sie kurz vor dem Start ergänzen. Dabei prägt dieses kleine Element den ersten Kontakt ausländischer Besucher mit der Website. Zudem hilft es Suchmaschinen, alle Sprachversionen zu finden.

Am Ende finden Sie eine Checkliste für den Livegang und eine Tabelle, die die wichtigsten Varianten vergleicht. Die Beispiele sind keine Kundenfälle. Wir kennzeichnen sie deshalb ausdrücklich als Beispielszenario.

Wo sollten Sie die Sprachauswahl platzieren?

Die kurze Antwort lautet: auf jeder Seite, an derselben Stelle und sofort sichtbar. Der Leitfaden des W3C zur Sprachaushandlung empfiehlt, Links zu anderen Sprachversionen nicht zu verstecken. Außerdem nennt er eine sichtbare Ecke der Seite als üblichen Ort. Wer die Sprache wechseln möchte, schaut meist zuerst in die rechte obere Ecke oder an das Ende der Hauptnavigation. Deshalb platzieren wir das Element in der Regel am rechten Rand des Kopfbereichs.

Außerdem lohnt sich eine zweite Kopie im Footer. So wechseln Leser am Ende einer langen Seite die Sprache, ohne nach oben zu scrollen. Allerdings brauchen beide Kopien dieselbe Logik. Sie sollten also auf dieselben Zielseiten verweisen.

  • Desktop: rechter Rand der Hauptnavigation, neben Suche oder Kontaktbutton.
  • Mobil: neben dem Menübutton oder ganz oben im geöffneten Menü.
  • Footer: eine zweite Kopie in der Nähe der rechtlichen Links.
  • Vermeiden Sie: die Platzierung nur auf der Kontaktseite oder in einem Laufband.

Kurz gesagt: Besucher sollen die Sprachauswahl nicht suchen müssen. Halten Sie die Position auf der gesamten Website gleich. Dann lernen Nutzer sie einmal kennen und verwenden sie danach ganz selbstverständlich.

Sollten Sie Flaggen oder Sprachnamen verwenden?

Verwenden Sie Sprachnamen. Denn eine Flagge steht für ein Land, eine Sprache dagegen überschreitet Grenzen. Spanisch sprechen Menschen in Dutzenden Ländern als Muttersprache, und die Schweiz hat mehrere Amtssprachen. Der W3C Leitfaden sagt deshalb klar, dass Flaggen für Links auf reine Übersetzungen nicht geeignet sind. Eine Flagge ergibt nur Sinn, wenn sich der Inhalt tatsächlich nach Land unterscheidet. Ein Beispiel dafür sind regionale Shops mit eigenen Preisen und Versandbedingungen.

Beispielszenario: Sie setzen neben Ihre deutschen Seiten eine deutsche Flagge. Besucher aus Österreich oder der Schweiz lesen diese Flagge womöglich nicht als ihre Sprache. Ebenso fühlen sich Leser aus den USA oder Indien ausgeschlossen, wenn Sie für Englisch die britische Flagge wählen. Zudem sehen kleine Flaggen einander ähnlich, und Menschen mit Farbsehschwäche unterscheiden sie nur schwer.

Unsere Empfehlung ist daher einfach. Zunächst sollte die Textbeschriftung im Vordergrund stehen. Wenn Sie ein visuelles Signal möchten, ergänzen Sie neben dem Text ein Globussymbol oder ein allgemeines Sprachsymbol. So erkennen Nutzer das Element sofort, und es transportiert die richtige Botschaft.

In welcher Sprache sollten Sie die Sprachnamen schreiben?

Schreiben Sie jede Sprache in ihrer eigenen Bezeichnung: "Türkçe", "English", "Deutsch", "Français". Fachleute nennen das Endonym, also den Namen, den Sprecher selbst für ihre Sprache verwenden. Die Logik dahinter ist leicht nachvollziehbar. Wer die aktuelle Seite nicht lesen kann, findet seine Sprache nur in einer vertrauten Form. Ein türkischer Besucher auf einer japanischen Seite kann das japanische Wort für Türkisch nicht lesen. Dagegen erkennt er "Türkçe" sofort.

Die W3C Erläuterung zu "Language of Parts" in WCAG 2.2 nutzt genau dieses Beispiel. Der Text jedes Links ist der Name der Sprache in dieser Sprache, und jeder Link trägt seinen eigenen Sprachcode. Folglich sprechen Screenreader "Deutsch" mit deutscher Aussprache aus und nicht nach englischen Regeln.

  • Kürzen Sie nicht ab. Schreiben Sie "Deutsch" statt "DE" und ergänzen Sie den Code bei Bedarf daneben.
  • Beachten Sie die Schreibgewohnheiten der jeweiligen Sprache. Trotzdem ist ein großer Anfangsbuchstabe im Menü allgemein üblich.
  • Bleiben Sie konsistent. Nutzen Sie entweder überall volle Namen oder überall volle Namen plus Code.

Außerdem sollten Sie die aktive Sprache in der Liste deutlich markieren. Nutzer müssen wissen, wo sie sich befinden. Sonst klicken sie erneut auf dieselbe Option und wundern sich, dass nichts passiert.

Ist ein Dropdownmenü oder eine offene Liste besser?

Das hängt von der Zahl Ihrer Sprachen ab. Bei zwei oder drei Sprachen sind offene Links meist die schnellste Lösung. Eine einfache Zeile wie "Türkçe | English | Deutsch" wechselt mit einem Klick. Somit sehen Nutzer alle Optionen auf einen Blick und müssen kein Menü öffnen.

Andererseits überfrachtet eine offene Liste ab fünf oder zehn Sprachen den Kopfbereich. Dann ergibt ein Dropdownmenü Sinn. Auch der W3C Leitfaden hält ein Auswahlmenü bei vielen Sprachen für brauchbar. Allerdings muss der Zweck des Elements sprachunabhängig erkennbar sein. Das heißt konkret: Der Auslöser zeigt ein Sprachsymbol und den Namen der aktuellen Sprache, nicht nur das Wort "Sprache".

Beispielszenario: Ein Reiseanbieter betreibt seine Website in sechs Sprachen. Auf dem Desktop öffnet ein Button mit Globussymbol und der Beschriftung "Deutsch" ein Panel. Dieses Panel sortiert die Sprachen nach Nutzungshäufigkeit statt alphabetisch. Mobil erscheint dieselbe Liste dagegen als offene Links ganz oben im Menü. So bekommt jeder Bildschirm ein Muster, das zu seinen Bedingungen passt.

Egal, welches Muster Sie wählen: Bauen Sie kein Dropdownmenü, das sich nur beim Überfahren mit der Maus öffnet. Denn auf Touchscreens und bei Tastaturbedienung funktioniert dieses Verhalten oft nicht.

Wie sollte die Sprachauswahl auf dem Smartphone funktionieren?

Auf kleinen Bildschirmen verstecken Designer die Sprachauswahl häufig ganz unten im Hamburgermenü. Für ausländische Besucher ist das ein schlechter Start. Wer die Seite nicht lesen kann, kommt womöglich nie auf die Idee, das Menü zu öffnen und bis zum Ende zu scrollen. Deshalb empfehlen wir, den Sprachwechsel auch mobil auf dem ersten Bildschirm zu halten.

  1. Setzen Sie ein kleines Sprachsymbol mit einem zweistelligen Code in die Kopfleiste, neben den Menübutton.
  2. Beim Antippen listen Sie die Sprachnamen in einem Vollbildpanel oder einem Panel von unten auf.
  3. Geben Sie jeder Option eine bequeme Tipphöhe. Vermeiden Sie Links, die zu eng nebeneinander liegen.
  4. Markieren Sie die aktive Sprache im Panel und halten Sie den Schließen Button gut erreichbar.
  5. Nach der Auswahl führen Sie Nutzer zum selben Inhalt in der neuen Sprache.

Zudem spielt die Zielgröße eine Rolle. WCAG 2.2 definiert eine Erwartung an Mindestgröße und Abstand von Zeigerzielen. Den aktuellen Schwellenwert prüfen Sie am besten in der offiziellen W3C Dokumentation. In der Praxis sehen wir am häufigsten drei Sprachcodes auf engstem Raum, was zu falschen Antippern führt.

Kurz gesagt: Mobil sollte ein Sprachwechsel höchstens zwei Fingertipps dauern.

Warum sind automatische Sprachweiterleitungen problematisch?

Eine automatische Weiterleitung schickt Besucher anhand der IP Adresse oder der Browsersprache auf eine andere Sprachversion. Auf dem Papier klingt das nutzerfreundlich. In der Praxis entstehen allerdings zwei ernste Probleme. Das erste trifft Nutzer: Eine Türkin, die in Deutschland lebt, möchte vielleicht die türkische Seite lesen, landet aber auf der deutschen. Das zweite trifft Suchmaschinen.

Googles Leitfaden zu mehrsprachigen und regionalen Websites rät davon ab, Nutzer automatisch von einer Sprachversion zur anderen umzuleiten. Solche Weiterleitungen können Nutzer und Suchmaschinen daran hindern, alle Versionen zu sehen. Außerdem erklärt Google, dass der Googlebot meist aus den USA crawlt und keinen Accept-Language Header sendet. Folglich können Weiterleitungen nach Sprache oder Standort dazu führen, dass Google manche Versionen gar nicht findet.

Die SEO Seite dieses Themas behandeln wir ausführlich in unserem Beitrag zur automatischen Sprachweiterleitung nach IP. Aus Designsicht ist unsere Haltung daher eindeutig. Statt einer erzwungenen Weiterleitung zeigen Sie einen Vorschlag, der die Entscheidung beim Nutzer lässt.

Was tun Sie, wenn Sie die Browsersprache erkennen?

Sie müssen die Sprachpräferenz des Browsers nicht komplett ignorieren. Stattdessen nutzen Sie dieses Signal für einen Vorschlag. Zum Beispiel landet ein Besucher mit türkischer Browsereinstellung auf Ihrer deutschen Seite. Dann erscheint oben ein schmales Banner: "Bu sayfa Türkçe olarak da mevcut" mit einem Link. Der Nutzer wechselt oder schließt das Banner einfach.

Beachten Sie bei der Gestaltung dieses Banners einige Grundsätze. Erstens schreiben Sie es in der vorgeschlagenen Sprache, weil die lesende Person diese Sprache spricht. Zweitens sollte das Banner den Inhalt nicht nach unten schieben und keine Layoutverschiebung auslösen. Elemente, die nach dem Laden erscheinen und das Layout bewegen, stören das Lesen. Zudem verschlechtern sie Kennzahlen zur visuellen Stabilität.

  • Zeigen Sie das Banner nur, wenn die passende Version wirklich existiert.
  • Gestalten Sie den Schließen Button deutlich und merken Sie sich, dass der Nutzer das Banner geschlossen hat.
  • Liefern Sie Crawlern keine andere Seite aus. Das Banner folgt für alle derselben Logik.
  • Machen Sie aus dem Banner kein Vollbildpopup. Elemente, die Inhalte verdecken, verärgern Nutzer.

So profitieren Sie von der Browserpräferenz, und trotzdem behält der Nutzer das letzte Wort.

Wie merken Sie sich die Sprachwahl der Nutzer?

Sobald Besucher eine Sprache wählen, sollte die Website diese Entscheidung respektieren. Der W3C Leitfaden erklärt, dass Sie die Präferenz in einem Cookie oder im Browserspeicher ablegen können. Folgeseiten richten sich dann nach dieser Wahl. Allerdings gibt es eine feine Unterscheidung. Eine gespeicherte Präferenz darf nie eine klare URL Struktur ersetzen.

Jede Sprachversion braucht eine eigene dauerhafte Adresse, etwa example.com/de/. Das Cookie merkt sich nur die frühere Wahl und personalisiert den Vorschlagsbanner oder den Einstieg über die Startseite. Zeigt dieselbe URL je nach Cookie unterschiedliche Sprachen, wissen Suchmaschinen nicht, welche Sprache sie indexieren sollen. Außerdem öffnet sich ein geteilter Link beim Empfänger womöglich in einer anderen Sprache.

Beispielszenario: Ein Nutzer wechselt auf Deutsch und klickt später auf einen türkischen Blogartikel. Richtig ist dann, die verlinkte türkische Seite zu öffnen und oben einen Hinweis auf die deutsche Version zu zeigen. Falsch ist es dagegen, den Nutzer stillschweigend auf die deutsche Startseite zu schicken. Das Linkziel hat also immer Vorrang vor der gespeicherten Präferenz.

Auf welche Seite sollten Nutzer nach dem Sprachwechsel gelangen?

Sie sollten auf dem Gegenstück des Inhalts landen, den sie gerade lesen. Das ist die am häufigsten vernachlässigte Regel bei der Sprachauswahl. Wer auf einer Produktseite ins Englische wechselt und auf der Startseite landet, muss erneut suchen. Viele geben in diesem Moment einfach auf.

Deshalb muss jede Seite Ihrer Website ihre Gegenstücke in den anderen Sprachen kennen. Wenn Ihr CMS eine Übersetzungsbeziehung zwischen Seiten speichert, erzeugt es die Links der Sprachauswahl automatisch. Somit entfallen manuell gepflegte Links, die mit der Zeit brechen. Zudem dient dieselbe Zuordnungstabelle als Quelle für Ihre hreflang Angaben.

  • Produktseite: dasselbe Produkt in der anderen Sprache.
  • Blogartikel: die Übersetzung oder, falls keine existiert, die Blogstartseite dieser Sprache.
  • Kategorieseite: die passende Kategorie.
  • Suchergebnisse und gefilterte Seiten: wenn möglich, die entsprechende Seite mit derselben Suche und denselben Filtern.

Diese Regel testen Sie ganz einfach. Wählen Sie zehn zufällige Seiten und wechseln Sie auf jeder die Sprache. Danach prüfen Sie, ob die neue Adresse die Übersetzung desselben Inhalts ist. Öffnet sich zum Beispiel statt der englischen Leistungsseite die englische Startseite, fehlt eine Zuordnung. Wiederholen Sie den Test nach jeder neuen Veröffentlichung, damit Sie Lücken früh entdecken.

Zusammengefasst: Die Sprachauswahl ist kein Button "zurück zur Startseite". Sie ist ein Übersetzungsschlüssel, der den aktuellen Ort des Nutzers bewahrt.

Was zeigt die Sprachauswahl auf Seiten ohne Übersetzung?

Nicht jede Seite existiert in jeder Sprache. Zum Beispiel veröffentlichen Sie für eine Kampagnenseite, die sich nur an Kunden in der Türkei richtet, womöglich nie eine englische Version. Dann haben Sie drei Optionen, und jede hat Vor und Nachteile.

Erstens können Sie die fehlende Sprache deaktiviert anzeigen, mit dem Hinweis, dass diese Seite in dieser Sprache nicht verfügbar ist. Zweitens können Sie den Link auf die nächsthöhere Seite in dieser Sprache setzen, etwa die passende Kategorie oder die Startseite. Drittens können Sie die fehlende Sprache aus der Liste entfernen. Allerdings entsteht dann leicht der Eindruck, die Website unterstütze diese Sprache nicht mehr.

Wir empfehlen meist die zweite Option, allerdings unter einer Bedingung. Nutzer müssen wissen, wohin sie gelangen. Ein kurzer Hinweis neben dem Link oder eine Nachricht auf der Zielseite beseitigt die Unklarheit. Ein Satz wie "dieser Inhalt ist auf Englisch nicht verfügbar, hier ist der passende Bereich" genügt. Außerdem sollten Sie zwischen Seiten ohne Übersetzungsbeziehung keine hreflang Paare anlegen. Denn hreflang verbindet nur wirklich gleichwertige Seiten.

Wie hängen Sprachauswahl und hreflang zusammen?

Die Sprachauswahl dient Menschen, hreflang dagegen Suchmaschinen, und doch tragen beide dieselbe Botschaft: Diese Seite hat Gegenstücke in diesen Sprachen. Speisen Sie deshalb beide aus derselben Quelle und lassen Sie keine Widersprüche zu. Googles Dokumentation zu lokalisierten Versionen verlangt, dass jede Sprachversion sich selbst und alle anderen Versionen auflistet. Verweisen zwei Seiten nicht gegenseitig aufeinander, kann Google die Angaben ignorieren.

Ein häufiger Fehler sieht so aus. Die Sprachauswahl verbindet Seite A mit Seite B, während hreflang Seite A mit Seite C koppelt. Folglich sehen Nutzer und Suchmaschinen unterschiedliche Landkarten. Die Lösung besteht darin, eine einzige Zuordnungstabelle zu pflegen und daraus Links und Angaben gemeinsam zu erzeugen.

Die Grundlagen erklären wir in unserem Beitrag was das hreflang Tag ist. Um Angaben schnell vorzubereiten, nutzen Sie unseren hreflang Generator. Zudem sollten die Links der Sprachauswahl normale HTML Links sein, die Crawlern beim Finden der anderen Versionen helfen, wie Google es empfiehlt. Buttons, die nur per Skript arbeiten und keine echte URL haben, leisten das nicht.

Wann brauchen Sie x default und eine Sprachauswahlseite?

x-default ist der hreflang Wert, der eine Ausweichseite für Besucher benennt, deren Sprachpräferenz zu keiner Ihrer Versionen passt. Laut Googles Dokumentation ist dieser Wert für Sprachauswahlseiten gedacht und funktioniert mit ihnen am besten. Betreiben Sie also eine globale Einstiegsseite, ist sie die naheliegende Kandidatin für x-default.

Braucht jede Website eine eigene Sprachauswahlseite? Nein. Bei einer dreisprachigen Unternehmenswebsite genügt es meist, die Hauptversion als x-default festzulegen. Bei Websites mit vielen Kombinationen aus Land und Sprache kann eine Einstiegsseite dagegen sinnvoll sein, auf der Nutzer zuerst Region und Sprache wählen.

  • Die Einstiegsseite zeigt alle Sprachnamen in ihrer eigenen Sprache auf einem einzigen Bildschirm.
  • Sie ist kein leeres Tor. Ergänzen Sie eine kurze Markenvorstellung und Navigationslinks.
  • Nach der Wahl zwingen Sie Nutzer nicht bei jedem Besuch erneut über diese Seite.
  • Auch die als x-default markierte Seite braucht gegenseitige hreflang Verweise mit den anderen Versionen.

Beispielszenario: Ein Industriebetrieb bietet Türkisch, Englisch und Deutsch an. Er markiert die englische Version als x-default. Ein Besucher mit spanischer oder arabischer Browsereinstellung sieht somit die Version mit der größten Reichweite. Expandiert das Unternehmen später in zehn Länder, kann es dann über eine eigene Einstiegsseite nachdenken.

Wie bauen Sie eine barrierefreie Sprachauswahl?

Barrierefreiheit hängt bei der Sprachauswahl an wenigen konkreten Details, die Sie alle auf Konzeptebene umsetzen können. Zunächst kennzeichnen Sie den Text jedes Sprachlinks mit seinem eigenen Sprachcode. In HTML bedeutet das, dem Link das lang Attribut dieser Sprache zu geben. Zusätzlich können Sie mit dem hreflang Attribut die Sprache der Zielseite angeben.

  1. Nutzen Sie den Sprachnamen als Linktext, nicht nur ein Flaggenbild. Wenn Sie ein Bild verwenden, geben Sie eine Textalternative an.
  2. Markieren Sie die aktive Sprache visuell und für Screenreader. Ein Zustandsattribut wie aria-current eignet sich dafür.
  3. Geben Sie dem Auslöser des Dropdownmenüs einen klaren zugänglichen Namen, etwa "Sprache wählen", und melden Sie den Zustand geöffnet oder geschlossen.
  4. Sorgen Sie dafür, dass sich das Menü per Tastatur öffnen, bedienen und mit der Taste Esc schließen lässt.
  5. Entfernen Sie nie den Fokusindikator. Nutzer müssen sehen, auf welcher Sprache sie stehen.

Denken Sie außerdem daran, dass auch das lang Attribut der gesamten Seite stimmen muss. Das behandeln wir in unserem Beitrag, warum Google die falsche Sprache erkennt. Den größeren Rahmen beschreibt unser Leitfaden zur barrierefreien Website nach WCAG und BFSG.

Wie zeigen Sie Sprache und Region gemeinsam an?

Auf manchen Websites reicht die Sprache allein nicht. Preise, Währung, Versand und Rechtstexte unterscheiden sich nach Land. In diesem Fall stellen Sie zwei getrennte Fragen: "Welche Sprache möchten Sie lesen?" und "Aus welchem Land kaufen Sie ein?" Beide Fragen in einer einzigen Flaggenliste zu vermischen, stiftet deshalb Verwirrung.

Beispielszenario: Ein Onlineshop verkauft in die Schweiz auf Deutsch, Französisch und Italienisch. Bei einer guten Gestaltung wählt der Nutzer zuerst die Region Schweiz und dann eine der dort unterstützten Sprachen. Eine Flagge neben der Regionsauswahl ist hier vertretbar, denn sie steht tatsächlich für das Land. Die Sprachoptionen nutzen dagegen weiterhin Sprachnamen.

Zeigen Sie außerdem deutlich, dass sich beim Regionswechsel auch Preise und Lagerbestand ändern. Wechselt die Währung stillschweigend, verlieren Nutzer sonst das Vertrauen. Da solche Websites mehrere regionale Versionen betreiben, empfehlen wir zudem einen Blick auf die Optionen zur URL Struktur in unserem Leitfaden zur SEO für mehrsprachige Websites.

Varianten der Sprachauswahl im Vergleich

Die folgende Tabelle vergleicht die Varianten, die uns in der Praxis am häufigsten begegnen, nach Einsatzfall. Die Bewertungen spiegeln allgemeine Tendenzen aus der Praxiserfahrung. Sie sind also keine garantierten Ergebnisse für jede Website.

VariantePasst beiStärkeAchten Sie auf
Offene Links nebeneinander2 bis 3 SprachenWechsel mit einem Klick, alle Optionen sichtbarTippziele dürfen auf schmalen Bildschirmen nicht schrumpfen
Dropdownmenüab 4 SprachenHält den Kopfbereich ruhigTastatur und Touchbedienung, Zustand geöffnet oder geschlossen
Liste im FooterZweitkopieLeichter Zugriff am Ende langer SeitenAllein nicht ausreichend, oben ebenfalls anbieten
SprachauswahlseiteViele Kombinationen aus Land und SpracheNaheliegende Seite für x-defaultNicht bei jedem Besuch erzwingen
VorschlagsbannerAbweichende BrowserspracheLenkt ohne ZwangKeine Layoutverschiebung, Schließen merken
FlaggensymboleInhalte, die sich wirklich nach Land unterscheidenVertraut bei der RegionswahlFür die Sprachwahl ungeeignet

Auf den meisten Unternehmenswebsites liefert eine Kombination das beste Ergebnis. Sie verbindet oben offene Links oder ein Dropdownmenü mit einer Zweitkopie im Footer. Bei Bedarf ergänzt sie zudem ein Vorschlagsbanner auf Basis der Browsersprache.

Welche Fehler passieren bei der Sprachauswahl am häufigsten?

Auf den mehrsprachigen Websites, die wir über die Jahre geprüft haben, wiederholen sich dieselben Fehler. Die meisten entstehen, weil das Team das Element erst wenige Tage vor dem Start ergänzt statt in der Designphase. Die folgende Liste fasst diese Fehler und schnelle Lösungen zusammen.

  • Sprachnamen in der Seitensprache, etwa "Almanca" auf einer türkischen Seite. Lösung: "Deutsch" schreiben.
  • Eine Flagge als einziges Signal. Lösung: eine Textbeschriftung.
  • Der Sprachwechsel führt auf die Startseite. Lösung: Zuordnung auf Seitenebene.
  • Erzwungene Weiterleitung nach IP. Lösung: ein Vorschlagsbanner.
  • Sprachlinks als Skriptbuttons ohne URL. Lösung: echte Links.
  • hreflang und Sprachauswahl verbinden unterschiedliche Seiten. Lösung: eine einzige Zuordnungstabelle.
  • Mobil steckt die Sprachauswahl ganz unten im Menü. Lösung: ein Symbol in der Kopfleiste.
  • Ein Übersetzungsplugin übersetzt Inhalte, ohne die URL zu ändern. Lösung: eine dauerhafte URL pro Sprache.

Der letzte Punkt verdient besondere Aufmerksamkeit. Plugins, die im Browser übersetzen, bieten Nutzern eine schnelle Lösung. Allerdings entsteht dadurch für Suchmaschinen keine eigene Sprachversion. Daher ersetzt dieser Ansatz keine echte mehrsprachige Struktur.

Checkliste zur Sprachauswahl vor dem Livegang

Bevor wir eine neue mehrsprachige Website starten, prüft unser Team die folgende Liste Punkt für Punkt. Sie können dieselben Schritte auf Ihrer eigenen Website durchgehen.

  1. Erscheint die Sprachauswahl auf jeder Seite an derselben Position?
  2. Stehen die Sprachnamen in ihrer eigenen Sprache und tragen sie den passenden Sprachcode?
  3. Nutzen Sie Flaggen nur für die Regionswahl?
  4. Führt jeder Sprachlink zum Gegenstück desselben Inhalts?
  5. Haben Sie ein einheitliches Verhalten für Seiten ohne Übersetzung festgelegt?
  6. Sind automatische Weiterleitungen aus und steht stattdessen ein Vorschlagsbanner bereit?
  7. Stimmen die hreflang Paare exakt mit den Links der Sprachauswahl überein, und sind sie gegenseitig?
  8. Dauert ein Sprachwechsel mobil höchstens zwei Fingertipps?
  9. Können Sie das Menü per Tastatur öffnen, schließen und jede Sprache erreichen?
  10. Meldet ein Screenreader die aktive Sprache und den Menüzustand korrekt?

Jedes "Nein" auf dieser Liste ist eine Lücke. Entweder kostet sie Nutzer, oder eine Suchmaschine übersieht dadurch eine Version. Wir empfehlen deshalb, die Liste nach jeder größeren Designänderung erneut durchzugehen.

Wie setzen wir die Sprachauswahl auf Ihrer Website um?

Auf einer mehrsprachigen Website treffen sich bei der Sprachauswahl Entscheidungen zu Inhaltsmodell, URL Struktur, hreflang und Barrierefreiheit. Deshalb sollten Sie sie als Teil der Architektur aufbauen und nicht als separates Plugin. Als Talha Aslan und Team entwerfen wir in unserem Webdesign Service die Zuordnungstabelle für Übersetzungen von Anfang an. Danach erzeugen wir Sprachauswahl und hreflang Angaben aus derselben Quelle.

Vielleicht schickt Ihre aktuelle Sprachauswahl Nutzer auf die Startseite. Vielleicht stiften Flaggen Verwirrung, oder Google findet einige Ihrer Sprachversionen nicht. In jedem dieser Fälle setzen wir das auf Ihrer Website um. Zunächst prüfen wir den bestehenden Aufbau. Dann erstellen wir ein schriftliches Angebot mit Umfang und Zeitplan. Für ein Angebot nutzen Sie das Kontaktformular auf unserer Webdesign Seite.

Dabei denken wir über das sichtbare Element hinaus. Wir planen außerdem den Arbeitsablauf der Personen, die im CMS die Übersetzungsbeziehungen pflegen. Denn eine saubere Zuordnung kostet langfristig mehr Aufwand als das Design selbst.

Zusammenfassung: Was eine gute Sprachauswahl ausmacht

Eine gute Sprachauswahl ist leicht zu finden, vorhersehbar und ehrlich. Sie steht auf jeder Seite an derselben Stelle, nennt Sprachen in ihren eigenen Worten, nutzt Text statt Flaggen und führt Nutzer zum Gegenstück des Inhalts, den sie gerade lesen. Zudem leitet sie nie zwangsweise um. Stattdessen schlägt sie nur vor und merkt sich die Wahl des Nutzers.

Im Hintergrund speist eine einzige Zuordnungstabelle sowohl die Links der Sprachauswahl als auch die hreflang Angaben. Somit sehen Menschen und Suchmaschinen dieselbe Landkarte Ihrer Website. Wenn Sie diese Grundsätze befolgen, wird die Sprachauswahl zum ersten Kontaktpunkt, der das Vertrauen ausländischer Besucher gewinnt.

Häufig gestellte Fragen

Ist es falsch, in der Sprachauswahl Flaggen zu verwenden?
Für die Sprachwahl ist das meist die falsche Entscheidung. Eine Flagge steht für ein Land, während eine Sprache viele Länder umfassen und ein Land mehrere Sprachen haben kann. Schreiben Sie deshalb Sprachnamen in ihrer eigenen Sprache. Flaggen ergeben nur Sinn, wenn sich Inhalte wirklich nach Land unterscheiden, etwa bei regionalen Shops mit eigenen Preisen.
Sollte ich Besucher automatisch nach Browsersprache weiterleiten?
Nein, von erzwungenen Weiterleitungen raten wir ab. Google erklärt, dass automatische Weiterleitungen zwischen Sprachversionen Nutzer und Suchmaschinen daran hindern können, alle Versionen zu sehen. Zeigen Sie stattdessen bei abweichender Browsersprache oben ein schließbares Vorschlagsbanner. So entscheidet der Nutzer selbst, und alle Versionen bleiben für Crawler erreichbar.
Beeinflusst die Sprachauswahl direkt das SEO?
Die Sprachauswahl ist kein eigener Rankingfaktor, aber sie wirkt indirekt. Eine Sprachauswahl aus echten Links hilft Suchmaschinen, Ihre anderen Sprachversionen zu entdecken. Nutzt sie zudem dieselbe Zuordnung wie hreflang, entstehen keine widersprüchlichen Signale. Buttons, die nur per Skript arbeiten und keine URL haben, bieten diesen Vorteil dagegen nicht.
Sollte der Sprachwechsel auf die Startseite führen?
Nein, Nutzer sollten auf dem Gegenstück des Inhalts landen, den sie gerade lesen. Wer von einer Produktseite oder einem Blogartikel auf der Startseite landet, muss erneut suchen. Fehlt eine Übersetzung, verlinken Sie die nächsthöhere Seite dieser Sprache und sagen das deutlich. Eine einzige Zuordnungstabelle im CMS erleichtert diese Pflege erheblich.
In welcher Sprache schreibe ich die Sprachnamen?
Schreiben Sie jede Sprache in ihrer eigenen Bezeichnung, also Türkçe, English, Deutsch oder Français. Besucher, die die aktuelle Seite nicht lesen können, finden ihre Sprache nur in einer vertrauten Form. Das Beispiel des W3C folgt genau diesem Ansatz und versieht jeden Link mit seinem Sprachcode. Dadurch sprechen Screenreader jeden Namen richtig aus.
Braucht eine dreisprachige Website ein Dropdownmenü?
Bei drei Sprachen sind offene Links nebeneinander meist praktischer. Nutzer sehen alle Optionen, ohne ein Menü zu öffnen, und wechseln mit einem Klick. Ab vier oder fünf Sprachen hält ein Dropdownmenü den Kopfbereich dagegen übersichtlich. Testen Sie in jedem Fall vor dem Start die Bedienung per Tastatur und Touchscreen.
  • Sprachauswahl
  • mehrsprachige Website
  • hreflang
  • Webdesign
  • Barrierefreiheit
  • Nutzererlebnis
Teilen:
Talha Aslan

Google Partner und Experte für digitales Marketing. Seit 2012 praktisch in SEO, Google Ads, Webdesign und E-Commerce Projekten; jeder Beitrag hier stammt aus dieser Erfahrung.

Nächstes Projekt

Angebot für Ihr Projekt.

Ihre Anfrage geht direkt an Talha Aslan und Team: Strategie von Talha, Umsetzung durch ein erfahrenes Team. Wir melden uns am selben Tag und senden Umfang, Zeitplan und Preis innerhalb von 1 Werktag als schriftliches Angebot.