So fügen Sie Ihrer Website einen Sprachwähler hinzu: 2 Methoden

Fassen Sie diesen Beitrag zusammen mit: 8 Minuten Lesezeit

ChatGPT Ratlosigkeit Grok Google AI

Sie können einer Website auf zwei Arten einen Sprachwähler hinzufügen. Erstellen Sie es selbst als Liste mit Links zu jeder Sprachversion der aktuellen Seite oder verwenden Sie ein Website-Übersetzungstool, das einen Umschalter hinzufügt, den Sie konfigurieren können. Egal, wofür Sie sich entscheiden, der Selektor sollte auf jeder Seite erscheinen und jede Sprache in dieser Sprache (Deutsch, Spanisch, Französisch) beschriften. Außerdem sollte der Besucher beim Wechsel auf derselben Seite bleiben und den Leuten die Wahl lassen, anstatt ihn umzuleiten.

Beide Methoden sind unten Schritt für Schritt aufgeführt, mit Code, den Sie kopieren können, und den von W3C und Google empfohlenen Designregeln.

Wichtige Erkenntnisse

• Ein Sprachwähler sollte für jede Sprache auf eine echte, separate URL verlinken, anstatt Text durch ein Skript zu ersetzen. Separate URLs ermöglichen es Suchmaschinen, jede Version zu indizieren.
• Beschriften Sie Sprachen mit ihren eigenen Namen (“Deutsch”, nicht “Deutsch”) und verlassen Sie sich nicht allein auf Flaggen. W3C rät davon ab, Länderflaggen zur Identifizierung von Sprachen zu verwenden.
• Platzieren Sie den Selektor auf jeder Seite an der gleichen Stelle, normalerweise in der Kopfzeile oder einer festen Ecke, und halten Sie die Besucher beim Wechsel auf der entsprechenden Seite.
• Zwingen Sie Besucher nicht durch IP-Adresse oder Browsereinstellungen in eine Sprache. Google rät von automatischen Weiterleitungen zwischen Sprachversionen ab und schlägt stattdessen vor, diese zu verknüpfen.
• Übersetzungstools wie ConveyThis fügen den Selektor automatisch hinzu und ermöglichen Ihnen die Gestaltung (Flags, Beschriftungen, Position, Farben) ohne Code.

Was einen guten Sprachwähler ausmacht

Diese Regeln stammen aus den W3C-Leitlinien zur Internationalisierung und der Google-Dokumentation zu mehrsprachigen Websites:

1. Platzieren Sie es auf jeder Seite. W3C sagt: “Es ist immer am besten, Links zu alternativen Sprachversionen hinzuzufügen, und zwar auf jeder Seite” (W3C).
2. Benennen Sie jede Sprache in ihrer eigenen Sprache. Ein Deutschsprachiger, der eine englische Seite scannt, sucht nach “Deutsch”, nicht nach “Deutsch.” W3C empfiehlt, dass Links “in der Sprache der Seite sein sollten, auf die sie verweisen.”
3. Behandeln Sie Flaggen als optionale Dekoration, niemals als Etikett. W3C sagt: “Widerstehen Sie der Versuchung, Länderflaggen zur Identifizierung von Sprachen zu verwenden. Einige Länder haben mehr als eine Sprache und einige Sprachen werden in mehr als einem Land gesprochen.” Wenn Sie Flaggen aus Stilgründen verwenden, zeigen Sie immer den Sprachnamen daneben an.
4. Halten Sie den Besucher auf derselben Seite. Umstellung auf Spanisch von /pricing sollte landen auf /es/pricing, nicht auf der spanischen Homepage.
5. Erzwingen Sie keine Weiterleitungen. Google rät: “Vermeiden Sie es, Benutzer automatisch von einer Sprachversion einer Website auf eine andere Sprachversion einer Website umzuleiten” und schlägt stattdessen vor, Hyperlinks zu anderen Sprachversionen hinzuzufügen (Google Search Central). Wenn Sie eine browserbasierte Sprache vorschlagen möchten, verwenden Sie anstelle einer Weiterleitung ein Banner, das der Besucher ablehnen kann.
6. Machen Sie es leicht zu finden und zu verwenden. Platzieren Sie es an einem vertrauten Ort (oben rechts in der Kopfzeile oder in der Fußzeile auf inhaltslastigen Websites), machen Sie es groß genug, um auf ein Telefon zu tippen, und stellen Sie sicher, dass es mit einer Tastatur funktioniert.

Methode 1: Erstellen Sie den Sprachwähler selbst

Verwenden Sie dies, wenn Sie Ihr eigenes HTML oder Theme verwalten und jede Sprache bereits ihre eigene URL hat.

Schritt 1: Stellen Sie sicher, dass jede Sprache ihre eigene URL hat

Ein Selektor verknüpft zwischen Versionen, daher müssen zuerst die Versionen vorhanden sein: example.com/about, example.com/de/about, example.com/es/about. Wenn Sie sich noch für eine Struktur entscheiden, siehe Unterverzeichnisse vs. Subdomains für mehrsprachige SEO.

Schritt 2: Fügen Sie das Selektor-Markup hinzu

Der einfachste zugängliche Selektor ist eine Liste von Links. Jeder Link gibt an, zu welcher Sprache er führt (hreflang) und in welcher Sprache sein Text verfasst ist (lang):

<nav aria-label="Language">
  <ul class="lang-switcher">
    <li><a href="/about" hreflang="en" lang="en" aria-current="true">English</a></li>
    <li><a href="/de/about" hreflang="de" lang="de">Deutsch</a></li>
    <li><a href="/es/about" hreflang="es" lang="es">Español</a></li>
    <li><a href="/fr/about" hreflang="fr" lang="fr">Français</a></li>
  </ul>
</nav>

Dieses Markup funktioniert aus drei Gründen:

• Einfache Links sind crawlbar, sodass Suchmaschinen jede Sprachversion entdecken.
• lang Auf jedem Link können Bildschirmleseprogramme “Deutsch” richtig aussprechen.
• aria-current markiert die Sprache, die der Besucher jetzt liest.

Bei mehr als etwa fünf Sprachen spart ein Dropdown Platz. Verwenden Sie eine Schaltfläche, die die Liste öffnet, und nicht eine <select> das bei Änderungen navigiert, was für Tastaturbenutzer umständlich ist.

Schritt 3: Generieren Sie die Links für die aktuelle Seite

Jeder Link muss auf die aktuelle Seite in der anderen Sprache verweisen. In einem CMS stammt dies normalerweise von Ihrem mehrsprachigen Plugin oder Ihren Vorlagenvariablen. Generieren Sie die Liste auf einer statischen Site zum Build-Zeitpunkt aus einer Karte gleichwertiger URLs. Codieren Sie keine Links zur Homepage der einzelnen Sprachen fest.

Schritt 4: Fügen Sie hreflang-Tags im Seitenkopf hinzu

Der sichtbare Selektor ist für Personen. Suchmaschinen benötigen außerdem <link rel="alternate" hreflang="…"> Tags in der <head> jeder Seite, mit Auflistung aller Sprachversionen einschließlich der Seite selbst, plus einer x-default. Unser vollständiger hreflang-führer Zeigt das genaue Markup an.

Schritt 5: Test

• Wechseln Sie die Sprache von einer tiefen Seite (nicht der Homepage) und bestätigen Sie, dass Sie auf der entsprechenden Seite landen.
• Tab zum Selektor mit der Tastatur und öffnen Sie ihn ohne Maus.
• Überprüfen Sie es auf einem Telefon und stellen Sie sicher, dass Sie jede Sprache einfach antippen können.
• Sehen Sie sich die Quelle auf einer übersetzten Seite an und bestätigen Sie, dass die hreflang-Tags vorhanden sind.

Sie erhalten die volle Kontrolle über Design und Verhalten. Die Kosten bestehen darin, dass Sie die URL-Zuordnung, die hreflang-Tags und die Übersetzungen selbst pflegen.

Methode 2: Verwenden Sie den Selektor eines Website-Übersetzungstools

Ein Übersetzungstool erstellt die Sprachversionen, ihre URLs, die hreflang-Tags und den Selektor zusammen, wodurch sie alle synchron bleiben. Mit ConveyThis, der Umschalter wird hinzugefügt, wenn Sie das Plugin, die App oder das Skript installieren, und Sie passen ihn über die Dashboard-Einstellungen an, ohne Code zu schreiben.

Dies sind die Einstellungen, die Sie ändern können:

So folgen Sie den oben genannten Best Practices mit ConveyThis:

1. Legen Sie die Bezeichnung auf den einheimischen Namen der Sprache fest. Behalten Sie Flaggen als visuelles Extra oder schalten Sie sie aus.
2. Platzieren Sie den Umschalter in Ihrer Kopfzeile, indem Sie die ID des Elements angeben, wo es erscheinen soll, sodass es dort sitzt, wo Besucher es erwarten.
3. Lassen Sie die optionale automatische Weiterleitung per Browsersprache ausgeschaltet, es sei denn, Sie haben einen triftigen Grund, sie zu verwenden. Das Dashboard selbst warnt davor, dass Suchmaschinen-Crawler solchen Weiterleitungen folgen könnten.
4. Wählen Sie eine URL-Struktur (Unterordner, Subdomains oder ?lang; Domänen der zweiten Ebene im Extreme-Plan). Hreflang-Tags werden automatisch hinzugefügt.

Lesen Sie mehr über das aktuelle Design in Lernen Sie das neue Sprachumschalter kennen, oder siehe die Plattformführer für WordPress „ Shopify.

Sie schreiben keinen Code, der Selektor, die URLs und hreflang bleiben automatisch synchron und es funktioniert auf den meisten Plattformen. Sie haben weniger Kontrolle über das Markup als bei einem vollständig benutzerdefinierten Build, können den Umschalter jedoch weiterhin platzieren und gestalten.

Welche Methode sollten Sie wählen?

Häufige Fehler bei der Sprachauswahl

• Nur Flags verwenden. Bedeutet die spanische Flagge Spanien, Mexiko oder Argentinien? Ist die Schweizer Flagge deutsch, französisch oder italienisch? Fügen Sie immer ein Etikett hinzu.
• Auflistung der Sprachen nur auf Englisch. Ein japanischer Besucher erkennt das Wort “Japanisch” möglicherweise nicht.
• Besucher nach dem Wechsel auf der Homepage absetzen.
• Verstecken Sie die Auswahl in einem Hamburger-Menü auf dem Desktop oder hinter einem winzigen Symbol.
• Automatische Umleitung per IP oder Browsersprache, ohne Rückweg.
• Wechseln der Sprachen nur per Skript, ohne separate URLs, sodass Suchmaschinen nur eine Sprache sehen.

Häufig gestellte Fragen

Wohin soll ein Sprachwähler gehen? Die meisten Websites platzieren es oben rechts in der Kopfzeile, wo Besucher es erwarten. Inhaltsintensive Websites wiederholen es häufig in der Fußzeile. Bewahren Sie es auf jeder Seite an der gleichen Stelle auf.

Soll ich Flags in meinem Sprachumschalter verwenden? Nur neben Sprachnamen. Flaggen repräsentieren Länder, nicht Sprachen, und verwirren daher allein Besucher in mehrsprachigen Ländern und Sprecher weit verbreiteter Sprachen.

Soll meine Website je nach Browser automatisch die Sprache wechseln? Besser, man zwingt es nicht. Google rät von automatischen Weiterleitungen zwischen Sprachversionen ab. Wenn Sie Besuchern helfen möchten, zeigen Sie einen Vorschlag, den sie annehmen oder ablehnen können, und halten Sie den Selektor immer sichtbar.

Hilft eine Sprachauswahl bei SEO? Der Selektor selbst hilft Suchmaschinen, Ihre Sprachversionen über crawlbare Links zu entdecken. Rankings in jeder Sprache hängen davon ab, dass es separate URLs, hreflang-Tags und übersetzte Metadaten gibt.

Um einen Umschalter zu erhalten, übersetzten Sie Seiten und hreflang gemeinsam, Versuchen Sie ConveyThis kostenlos. Pläne sind auf der Preisseite.