Hreflang: Vollständiger Leitfaden für Anfänger
Jeden Tag besuchen Millionen von französischen Nutzern globale Websites wie Amazon.com. Obwohl die offizielle Seite, Amazon.com, Inhalte in englischer Sprache hat, können die Nutzer immer noch Texte und Produktbeschreibungen in französischer Sprache sehen. Und warum? Die globale Website hat eine lokalisierte Version für Frankreich, so dass allen französischen Nutzern die Inhalte der Website automatisch auf Französisch angezeigt werden.
Wenn Deine Website in mehrere Sprachen lokalisiert ist, kannst du wie Amazon die Sprache für jede Seite mit hreflang-Attributen angeben..
Mit hreflang können Suchmaschinen leicht erkennen, dass Deine Website Inhalte in verschiedenen Sprachen enthält, und die Besucher auf die Seite umleiten, die ihrer Region entspricht.
Was ist hreflang?
Hreflang ist ein HTML-Attribut, das für Websites mit Inhalten in mehreren Sprachen und für Besucher aus verschiedenen Regionen verwendet wird.
Mit anderen Worten: Wenn die Homepage beispiel.com ins Deutsche und Englische übersetzt wird, kannst du dieses Attribut verwenden, um die Sprache und/oder die Region für Deine Seiten anzugeben. Je nach Standort des Nutzers wählt Google dann die richtige Version der Seite aus und zeigt sie an.
Wie Websites das hreflang-Attribut verwenden
Wenn du in Frankreich lebst und “Samsung official site” googelst, erhältst du die folgenden Ergebnisse:
Wenn du auf den Link klickst, wirst du zu https://… weitergeleitet. Google erkennt deinen Standort und leitet dich auf die französische Version der Website weiter.
Struktur des Attributs Hreflang
Schauen wir uns an, wie hreflang auf der Website von SE Ranking implementiert ist:
<link rel="alternate" hreflang="fr" href="https://seranking.com/fr/">
Was bedeuten diese Elemente?
- link rel = “alternate”: Der Wert “alternate” gibt eine alternative Version der Seite an, in unserem Fall französisch.
- hreflang = “fr“: Dieser alternative Link verweist auf “fr”, den Code der französischen Sprache.
- href =”https://seranking.com/fr/”: Die Seite in französischer Sprache ist unter der angegebenen URL zu finden.
Wie viele Sprachversionen Deine Website wirklich braucht
Bevor wir ins Detail gehen, wollen wir herausfinden, ob alle Websites Sprachversionen benötigen, wie viele Sprachen eine Seite braucht und wie man mehrsprachige Seiten verwaltet.
Auf den ersten Blick könnte man meinen, dass die Erstellung lokalisierter Seiten für alle möglichen Regionen die beste Lösung für die Nutzererfahrung ist. Durch die Anzeige der Seiten in ihrer Muttersprache verbringen die Besucher in der Regel mehr Zeit auf der Website, was sich positiv auf das Nutzerverhalten auswirkt.
In Diskussionen auf Reddit rät John Mueller jedoch, sich nicht auf Dutzende verschiedener Sprachen zu konzentrieren, nur weil man es kann. “Lasst uns alle Sprachen erstellen! Lasst uns Seiten für alle Länder erstellen! Was ist, wenn jemand in Japan es auf Suaheli lesen möchte? Lasst uns noch mehr Seiten erstellen!”
Laut John Müller werden all diese Seiten möglicherweise nur sehr wenig Traffic erhalten, wenig Wert für Deine Website schaffen und einen enormen Mehraufwand verursachen – sowohl für dich als auch für die Suchmaschinen. Treffe Deine Entscheidung daher sorgfältig: Wenn du viele Nutzer aus einer bestimmten Region hast und die Seite wichtige Informationen enthält, solltest du sie übersetzen. Wenn du eine Sprachversion “für alle Fälle” haben willst, verschwende keine Ressourcen dafür.
John rät, sich auf die wichtigsten Seiten zu konzentrieren und nicht zu versuchen, alle Seiten der Website zu lokalisieren.
Wie man mehrsprachige Seiten erstellt
Es gibt mehrere Möglichkeiten, Google mit Hilfe von hreflang-Anmerkungen über mehrere Sprachversionen einer Seite zu informieren.
Getrennte Domains für verschiedene Sprachen
Die einfachste, aber auch teuerste Option ist die Erstellung verschiedener Websites in verschiedenen Sprachen:
- https://beispiel.fr/
- https://beispiel.com
Als Ergebnis hast du zwei individuelle Domains, die als unabhängige Websites beworben werden sollten. Außerdem musst du dafür sorgen, dass alle Änderungen in beiden Projekten umgesetzt werden..
Subdomain
- https://en.beispiel.com/
- https://fr.beispiel.com/
Wie im vorherigen Fall sehen Suchmaschinen eine Subdomain als eine separate Website an; die Nachteile dieser Methode sind also dieselben.
Subfolders
Diese Methode ist kostengünstig und einfach einzurichten. Die verschiedenen Seitenversionen befinden sich innerhalb derselben Domain, was bedeutet, dass alle Bearbeitungen an einem Ort vorgenommen werden können.
- https://beispiel.com/ ist die Hauptversion der Website in englischer Sprache
- https://beispiel.com/es/ ist die spanische Version
Wir empfehlen die dritte Option, da dies die einfachste Methode in Bezug auf SEO und Website-Pflege ist.
Wann du das hreflang-Attribut benötigst
Bevor du hreflang verwendest, solltest du herausfinden, wann du es brauchst:
- Auf einer Webseite wird nur die Vorlage, z. B. eine Kopf- oder Fußzeile oder Navigationselemente, übersetzt.
- Die Website hat unterschiedliche Inhalte für verschiedene Regionen. Zum Beispiel gibt es englische Inhalte für US-Nutzer und französische Inhalte für kanadische Nutzer.
- Die Website ist vollständig in mehrere Sprachen lokalisiert:
- Eine portugiesische Website hat 2 verschiedene Versionen,
- für Portugal: <link rel=”alternate” href=”https://beispiel.com/pt” hreflang=”pt-PT” />
- und für Brasilien: <link rel=”alternate” href=”https://beispiel.com/br” hreflang=”pt-BR” />
- Eine portugiesische Website hat 2 verschiedene Versionen,
- Globale Websites mit mehreren Versionen für verschiedene Regionen in einer Sprache: für das Vereinigte Königreich, die USA und Kanada.
- Websites in verschiedenen Sprachen: Englisch, Italienisch und Chinesisch.
- Websites in englischer und russischer Sprache, aber nur für Besucher aus dem Vereinigten Königreich.
Wenn Deine Website einem der oben genannten Beispiele ähnelt, musst du das hreflang-Attribut implementieren.
Wann du hreflang nicht verwenden solltest
Lass uns einige Szenarien analysieren, in denen du hreflang nicht benötigst oder es vorsichtig einsetzen solltest.
Für Websites mit ähnlichem Inhalt in derselben Sprache
Websites mit gleichem oder ähnlichem Inhalt in der gleichen Sprache, auch für verschiedene Regionen, benötigen keinen hreflang.
Auf der englischsprachigen Website sind beispielsweise unterschiedliche Preise für die USA und das Vereinigte Königreich (in Dollar und Pfund) angegeben, und es gibt verschiedene Möglichkeiten, eine Bestellung aufzugeben – mit oder ohne Lieferung.
Wenn du dich in solchen Fällen für die Verwendung von hreflang-Anmerkungen entscheidest, empfehlen wir, zusätzlich eine URL zu erstellen, die nicht an eine bestimmte Region gebunden ist. Erstelle beispielsweise zusätzlich zu den Optionen für die USA (en-US) und Großbritannien (en-GB) die Version “en” für Besucher aus anderen englischsprachigen Ländern.
Für nicht-kanonische Seiten
Die falsche Verwendung von rel=canonical zusammen mit dem hreflang-Attribut kann zu Konflikten führen und Suchmaschinen verwirren.
Hreflang kannst du nicht verwenden, wenn die Seite ein Duplikat ist und das kanonische Tag auf eine andere Seite verweist.
Wenn rel=canonical einen Benutzer auf eine andere Seite umleitet, sendet es folgende Signale: “Beachte diese Seite nicht, bitte indiziere stattdessen eine andere kanonische Seite.”
Wenn du hreflang-Attribute auf derselben Seite verwendest, interpretieren die Suchmaschinen sie als: “Bitte indexiere diese Seite, wir haben hier tolle Inhalte. Und vergiss auch nicht die Versionen in anderen Sprachen”.
Um die Suchmaschinen nicht zu verwirren, solltest du hreflang auf nicht-kanonischen Seiten einfach nicht verwenden.
Wie man das hreflang-Attribut einrichtet
Sehen wir uns nun an, wie man hreflang korrekt implementiert und Nutzer und Suchmaschinen auf die relevanteste Version einer Webseite nach Sprache oder Standort bringt.
HTML-Tags
Unten findest du ein Stück HTML-Code von seranking.com, das hreflang-Attribute enthält.
Um Nutzer aus verschiedenen Regionen auf die richtigen Seiten zu bringen, solltest du den <link>-Tag in das <head>-Element einfügen. Beachte, dass du alle Sprachversionen, die eine Seite hat, im Code auflisten solltest.
Jedes Element muss die folgende Struktur aufweisen:
<link rel="alternate" hreflang="lang_code" href="url_of_page" />
Die fettgedruckten Elemente “lang_code” und “url_of_page” sind Variablen, die einen bestimmten Sprachcode und/oder eine Region sowie den entsprechenden Link enthalten. Für Besucher aus Frankreich geben Sie den Sprach- und Regionalcode fr an und fügen den entsprechenden Link hinzu:
<link rel="alternate" hreflang="fr" href="https://seranking.fr/">
Eine vollständige Liste der unterstützten Sprach-/Regionalcodes findest du hier.
HTTP-Kopfzeilen
Bei Nicht-HTML-Dateien, wie z. B. PDF, kannst du einen HTTP-Header verwenden, um Suchmaschinen über Seiten in mehreren Sprachen zu informieren.
Der HTTP-Header muss die folgende Struktur haben:
Link: <url1>; rel="alternate"; hreflang="lang_code_1", <url2>; rel="alternate"; hreflang="lang_code_2", ...
- url – Vollständige URL einer lokalisierten Version deiner Seite
- lang_code-ein unterstützter Code für Sprache/Region
Angenommen, du möchtest den Benutzern zwei deutsche Versionen einer PDF-Datei anzeigen: eine deutsche Version für Benutzer aus dem Vereinigten Königreich und eine deutsche Version für internationale Benutzer. In diesem Fall wird der HTTP-Header wie folgt lauten:
Link: <http://de-gb.beispiel.com/file.pdf>; rel="alternate"; hreflang="de-GB", <http://de.beispiel.com/file.pdf>; rel="alternate"; hreflang="de"
Inhaltsverzeichnis
Sehen wir uns an einem Beispiel an, wie man eine Sitemap verwendet, um Suchmaschinen über alternative Versionen einer Seite zu informieren.
Nehmen wir an, wir haben zwei Seiten: Die erste ist für spanischsprachige Besucher aus Argentinien und die zweite für spanischsprachige Besucher aus anderen Ländern:
- www.beispiel.com/es-ar/page.html-website auf Spanisch für Nutzer aus Argentinien;
- www.beispiel.com/es/page.html-website auf Spanisch für Nutzer aus anderen Ländern.
Die Sitemap wird den folgenden Code enthalten:
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:xhtml="http://www.w3.org/1999/xhtml">
<url>
<loc>http://www.beispiel.com/es/page.html</loc>
<xhtml:link
rel="alternate"
hreflang="es-ar"
href="http://www.beispiel.com/es-ar/page.html"/>
<xhtml:link
rel="alternate"
hreflang="es"
href="http://www.beispiel.com/es/page.html"/>
</url>
<url>
<loc>http://www.beispiel.com/es-ar/page.html</loc>
<xhtml:link
rel="alternate"
hreflang="es"
href="http://www.beispiel.com/es/page.html"/>
<xhtml:link
rel="alternate"
hreflang="es-ar"
href="http://www.beispiel.com/es-ar/page.html"/>
</url>
</urlset>
Sprachen und Regionen
Vielleicht ist dir aufgefallen, dass einige Beispiele einen einzigen Code enthalten (it, en, es, de), andere eine Kombination von Codes (ru-EN, es-AR usw.). Der erste Code gibt die Sprache an (im Format ISO 639-1), der zweite die Region (im Format ISO 3166-1 Alpha 2).
Der Sprachcode ist obligatorisch und steht immer an erster Stelle, während der Ländercode optional ist und an zweiter Stelle steht. Die Codes für Sprache und Region müssen nicht miteinander verbunden sein. Zum Beispiel:
- pl – eine Seite auf Polnisch für Nutzer aus aller Welt
- pl-PL – eine Seite auf Polnisch für Nutzer aus Polen
- pl-DE – eine Seite in polnischer Sprache für Benutzer aus Deutschland
Beachte, dass die Benutzer in einigen Ländern verschiedene Dialekte verwenden können. In China gibt es zum Beispiel 10 Dialektgruppen. Wenn du ein großes Publikum aus einer bestimmten chinesischen Region hast, kannst du den benötigten Code aus der ISO 15924-Liste auswählen.
Was ist x-default
Im folgenden HTML-Beispiel findest du die Zeile, die das Attribut x-default hreflang enthält.
Wenn keine der angegebenen Sprachen mit den Browsereinstellungen deiner Benutzer übereinstimmt, leitet x-default sie automatisch auf die Standardseite um. In der Regel werden die Benutzer auf die Hauptversion der Seite umgeleitet.
Häufige hreflang-Fehler
Wenn du einen einfachen technischen Fehler gemacht hast, werden die Suchmaschinen ungültige hreflang-Tags einfach ignorieren. Dies ist sicherlich nicht das beste Szenario, aber betrachte es als einen kleinen Rückschlag, da hreflang keinen Einfluss auf die Platzierung der Website hat.
Wenn du hingegen alles richtig gemacht hast, aber die falschen Seiten verlinkt hast, kannst du das Nutzererlebnis beeinträchtigen.
In der folgenden Infografik auf Englisch findest du die häufigsten hreflang-Fehler, mit denen Webmaster häufig konfrontiert werden.
Lass uns diese Fehler im Detail erklären.
Fehlende Rückleitungen
Wenn Seite A auf Seite B verlinkt, muss Seite B auf A zurückverweisen. Bei Verwendung eines hreflang-Attributs müssen alle Seiten diesen Backlink enthalten. Andernfalls werden die Suchmaschinen die Richtlinien falsch interpretieren.
Wenn zum Beispiel die französische Seite eine hreflang-Anmerkung verwendet, die eine deutsche Version enthält, muss die deutsche Seite auch auf die französische Seite verweisen.
Die französische Version der Seite sollte wie folgt aussehen:
Seite 1: https://www.beispiel.com/fr
✅<link rel="alternate" href="https://beispiel.com/de" hreflang="de" /> <link rel="alternate" href="https://beispiel.com/en" hreflang="en" /> <link rel="alternate" href="https://beispiel.com/fr" hreflang="fr" />
Die deutsche Version wiederum muss auch die URL der französischen Seite enthalten, die im untenstehenden Beispiel fehlt:
Seite 2: https://www.beispiel.com/de
<link rel="alternate" href="https://beispiel.com/de" hreflang="de" /> <link rel="alternate" href="https://beispiel.com/en" hreflang="en" /> ❌ <link rel="alternate" href="https://www.beispiel.com/fr" hreflang="fr" />
– die deutsche Seite verweist nicht auf die französische Seite
Kein selbstreferenzierender hreflang
Jede Seite sollte nicht nur die URLs der anderen Sprachversionen enthalten, sondern auch auf sich selbst verweisen. In unserem Beispiel enthält die französische Seite eine solche URL, während die deutsche Version keine enthält.
Seite 1: www.beispiel.com/fr
✅<link rel="alternate" href="https://beispiel.com/de" hreflang="de" /> <link rel="alternate" href="https://beispiel.com/en" hreflang="en" /> <link rel="alternate" href="https://beispiel.com/fr" hreflang="fr" />
-die französische Seite verweist selbst in hreflang-Anmerkungen
Seite 2: https://www.beispiel.com/de
<link rel="alternate" href="https://beispiel.com/en" hreflang="en" /> <link rel="alternate" hreflang="fr" href="https://www.beispiel.com/fr"/> ❌ <link rel="alternate" href="https://beispiel.com/de" hreflang="de" />
-die deutsche Seite verweist nicht auf sich selbst in hreflang-Anmerkungen
Nur der Regionalcode ist angegeben (fehlender Sprachcode)
Du kannst entweder die Sprache oder sowohl die Sprache als auch die Region angeben, falls erforderlich. Du kannst nicht nur die Region (Ländercode) verwenden, da die Suchmaschine nicht in der Lage ist, die Sprache beispielsweise nur anhand des Ländercodes zu bestimmen:
- FR – Es ist falsch, nur die Region ohne die Sprache anzugeben;
- fr-FR – du kannst die Sprache und die Region angeben;
- fr gebe nur die Sprache an, wenn du es möchtest, dass Deine Seite für Nutzer aus allen Ländern zugänglich ist.
Falsche kanonische Tags
Wenn du rel = “canonical” und hreflang verwendest, stell sicher, dass das canonical-Tag den Link zur aktuellen Seite enthält. Nicht-kanonische Seiten sollten jedoch keinen hreflang enthalten.
In diesem Beispiel gibt rel = “canonical” die aktuelle Version der Seite an und enthält ein hreflang-Attribut. Suchmaschinen werden diese Richtlinie wie folgt lesen: Dies ist die Hauptversion der Seite, die indiziert werden muss; diese Seite ist auf Französisch, aber es gibt auch eine Seite auf Deutsch, die ebenfalls indiziert werden muss.
In diesem Fall werden die Suchmaschinen beide Seiten crawlen und indexieren.
https://www.example.com/fr
✅ <link rel="canonical" href="https://www.beispiel.com/fr">
-rel=”canonical” enthält die URL der aktuellen Version der Seite.
<link rel="alternate" hreflang="en" href="https://www.beispiel.com/en"/> <link rel="alternate" hreflang="fr" href="https://www.beispiel.com/fr"/>
Betrachten wir ein weiteres Beispiel, bei dem rel = “canonical” zu einer anderen Seite führt:
https://www.example.com/fr
❌ <link rel="canonical" href="https://www.beispiel.com/1/fr">
– rel=”canonical” leitet auf eine andere Seite um.
<link rel="alternate" hreflang="en" href="https://www.beispiel.com/en"/> <link rel="alternate" hreflang="fr" href="https://www.beispiel.com/1/fr"/>
Wie wird Google diese Meldung interpretieren? Hier bitten wir darum, eine andere Seite zu indizieren und die aktuelle Version zu ignorieren. Gleichzeitig sagen wir, dass sowohl französische als auch deutsche Seiten in den Index aufgenommen werden sollten. Google wird solche kontroversen Anweisungen einfach ignorieren.
Mehrere Sprachcodes für eine URL
Wenn mehrere Sprachcodes dieselbe URL haben, ist es unwahrscheinlich, dass die Suchmaschinen herausfinden, welche Sprachversion angezeigt werden soll.
Wenn zum Beispiel hreflang = “fr” und hreflang = “de” zu https://www.beispiel.com/de führen, entsteht ein Konflikt.
Mehrere Seiten mit demselben Sprachcode
Google bevorzugt, dass du nur einen Sprachcode für eine Domain verwendest. Vermeide zum Beispiel zwei verschiedene URLs für die “de”-Version: https://www.beispiel.com/ und https://www.beispiel.com/de.
Fehlendes x-default
Obwohl es nicht notwendig ist, “x-default” zu verwenden, empfehlen wir dies dennoch. Zum Beispiel könnten auch Nutzer aus Ländern außerhalb deiner Kernregionen Deine Website besuchen wollen. Ohne diese angegebene Standardseite wählen Suchmaschinen eine Domain aus, die möglicherweise nicht die von dir beabsichtigte ist. Wenn Deine Website beispielsweise keine französische Version hat, kannst du festlegen, dass alle Besucher aus Frankreich auf die Hauptversion der Seite umgeleitet werden sollen, und zwar in der Regel auf die englische Version, die nicht regionsspezifisch ist.
Wie man hreflang-Fehler findet und behebt
Es kann sehr schwierig (wenn nicht gar unmöglich) sein, alle Seiten manuell zu überprüfen.
Du kannst die häufigsten Probleme auch automatisch mit Hilfe des Website-Audit-Tools von SE Ranking beheben. Das Tool prüft nicht nur Deine hreflang-Attribute und zeigt die Fehlerdetails an, sondern gibt auch Empfehlungen zur Behebung der Probleme.
Das Website-Audit-Tool hilft dir bei der Identifizierung:
- ungültige Sprachcodes
- hreflang-Seiten, die nicht auf sich selbst verweisen
- hreflangs zu nicht-kanonischen Seiten
- hreflang und HTML lang, die nicht übereinstimmen
- fehlende Bestätigungslinks (Return) auf hreflang-Seiten
- mehrere Sprachcodes für eine Seite
- ungültige HTML-Lang-Codes
- Sprachduplikate in hreflang-Attributen
- fehlende HTML-Lang-Codes
- fehlende x-default hreflang-Attribute
Um Fehler zu finden, gehe zu deinem Konto, wähle Dein Projekt und dann Website-Audit → Fehlerbericht → Lokalisierung:
Schlussfolgerung
Das hreflang-Attribut ist eine todsichere Methode, um Suchmaschinen dabei zu helfen, Nutzern, die in einer bestimmten Sprache und Region suchen, die richtigen Seitenergebnisse anzuzeigen. Dank hreflang kannst du Probleme mit doppelten Inhalten vermeiden, die Benutzerfreundlichkeit verbessern und Deine Inhalten einen globalen SEO-Schub geben.
Die Implementierung von hreflang mag nicht einfach sein – selbst der kleinste Fehler kann zu Rankingverlusten und Duplikaten führen –, aber wenn es richtig gemacht wird, sind die Vorteile für Websites und Nutzer enorm.
