hreflang-Attribut: Der Leitfaden für mehrsprachige Webseiten (inkl. Video)
In 2018 schrieb John Müller, dass hreflang eines der komplexesten Aspekte von SEO ist und es sehr schnell schwierig werden kann.
TBH hreflang is one of the most complex aspects of SEO (if not the most complex one). Feels as easy as a meta-tag, but it gets really hard quickly.
— 🐄 John 🐄 (@JohnMu) February 19, 2018
Heißt das jetzt also, dass du lieber die Finger von mehrsprachigen Webseiten lassen solltest? Keineswegs! Schaue dir dazu das folgende Video an.
Was bedeutet hreflang?
Hreflang ist ein Attribut, welches im Dezember 2011 von Google eingeführt wurde. Hreflang ist ein HTML-Meta-Element, welches wie folgt aufgebaut ist:
rel=“alternate“ hreflang=“x“
Das Linkattribut sagt Google, dass es den gleichen Inhalt einer Webseite in mehreren Sprach- und Ländervarianten gibt. Die Nutzer bekommen dadurch die Inhalte ihrer Sprache und aus ihrem Land angezeigt.
Um Google mitzuteilen, welche Sprachversion auf einer Seite genutzt wird gibt es verschiedene Wege.
Zum einen können die Länderversionen auf länderspezifische Domains platziert werden, wie test.de (DE) oder test.fr (FR). Google erkennt die Sprache der Webseite mithilfe der TLD (Top-Level-Domain).
Zum anderen kann eine mehrsprachige Webseite auf der gleichen Domain dargestellt werden. Meistens wird eine länderneutrale Domain gewählt, wie z.B. test.com oder test.org und verwendet Länderverzeichnisse, wie z.B. test.com/de, test.com/fr oder test.com/es.
Damit Google weiß, in welchem Sprachverzeichnis sich welche Version befindet, ist es wichtig, dies im Quellcode anzuzeigen.
Das machst du mithilfe des hreflang-Attributs wie folgt: rel=“alternate“ hreflang=“x“
Damit sagst du Google nun, welche Sprache auf der jeweiligen Seite verwendet wird.
Beispiel:
<link rel="alternate" href="http://www.test.com/de/" hreflang="de-DE" />
oder
<link rel="alternate" href="http://www.test.com/fr/" hreflang="fr-FR" />
Wie wird hreflang erstellt?
Im nächsten Schritt tauchen wir tiefer in die Materie ein und zerlegen das hreflang-Attribut in seine Einzelteile. Hierfür nehmen wir eines der vorherigen Beispiele:
<link rel="alternate" href="http://www.test.com/de/" hreflang="de-DE" />
- <link –> Öffnung des Links
- rel=“alternate“ –> weist darauf hin, dass mindestens eine andere Version des Inhalts vorhanden ist
- href=http://www.test.com/de/ –> unter dieser URL befindet sich eine andere Version des Inhalts
- hreflang=“de –> in dieser anderen Sprache wird der Inhalt verbindlich angezeigt.
- -DE“ –> hierbei handelt es sich um die Ländererkennung von ähnlichen Inhalten in der gleichen Sprache für verschiedene Regionen
- /> –> Schließung des Links
Für die Erstellung eines hreflang Link-Attribut Markup für eine mehrsprachige Webseite gibt es verschiedene nützliche hreflang-Generatoren, die dir die Arbeit abnehmen.
Wo wird das hreflang-Attribut implementiert?
Es gibt drei Möglichkeiten, wo das hreflang-Attribut platziert werden kann. Entweder in der Sitemap, im HTTP-Header oder im Seiten-Markup.
Implementierung in der Sitemap
<?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>https://www.example.com/english/page.html</loc>
<xhtml:link
rel="alternate"
hreflang="de"
href="https://www.example.com/deutsch/page.html"/>
<xhtml:link
rel="alternate"
hreflang="de-ch"
href="https://www.example.com/schweiz-deutsch/page.html"/>
<xhtml:link
rel="alternate"
hreflang="en"
href="https://www.example.com/english/page.html"/>
</url>
</urlset>
Anwendungsbeispiele
- Deutsche Sprachvariante
<link rel=“alternate“ href=”https://test.de” hreflang=”de-DE“ />
- Schweizerdeutsche Sprachvariante
<link rel=“alternate“ href=”https://test.ch” hreflang=”de-CH“ />
- Österreichische Deutsche Sprachversion
<link rel=“alternate“ href=”https://test.ch” hreflang=”de-AT“ />
Handelt es sich bei deiner URL um eine mehrsprachige Version, kannst du Google mit einer Sitemap mitteilen, dass deine URL über Sprach- und Regionsvarianten verfügt. Wichtig ist, dass du das <loc>-Attribut hinzufügst. Zudem solltest du darauf achten, dass du jeder einzelnen URL einen untergeordneten <xhtml:link>-Eintrag für jede Sprachversion erstellst. Wenn deine Seite fünf Sprachversionen hat, hat deine Sitemap fünf Einträge mit untergeordneten Einträgen, die identisch sind.
Implementierung im HTTP-Header
Link: <url1>; rel="alternate"; hreflang="lang_code_1", <url2>; rel="alternate"; hreflang="lang_code_2", ...
Anwendungsbeispiel
Link: <https://test.de>; rel="alternate"; hreflang="de", <https://test.de/en>; rel="alternate"; hreflang="en", ...
Die Seite, die mit hreflang verknüpft wird, muss sich in den Klammern < > befinden. Das sieht dann zum Beispiel so aus: <https://www.abcd.com> Zudem muss ein Sprachcode lang_code_x mit der jeweiligen Sprache implementiert werden. Eine Übersicht mit den Sprachcodes findest du hier.
Implementierung im Seiten-Markup
<link rel="alternate" hreflang="lang_code" href="url_of_page" />
Anwendungsbeispiele
<link rel="alternate" hreflang="de" href="https://test.de" />
<link rel="alternate" hreflang="en" href="https://test.de/en" />
Mit dem Einfügen des Link-Elements im Header <link rel="alternate" hreflang="
lang_code"... >
wird Google mitgeteilt, dass deine URL über Sprach- und Regionsvarianten verfügt. Für jede Sprachversion benötigst du bestimmte <link>-
-Elemente, wie lang_code und url_of_page. Die Link-Elemente müssen sehr weit oben ins <head>
-Element platziert werden.
Das “x-Default hreflang“-Attribut
Am 15. April 2013 hat Google den „x-default hreflang“ Verweis eingeführt. Dieser signalisiert den Google Algorithmen, dass die Webseite weder einer bestimmten Sprachversion noch einer Länderversion ausgerichtet ist. Sie wird gleichzeitig als Hauptseite angesehen und jede Seite verweist dann mit dem“ x-default hreflang“-Attribut auf diese Hauptseite. Ideal für .com-Domains, die über mehrere Sprachvarianten verfügen und einen globalen Fokus haben.
So sieht der x-default Verweis in der Praxis aus:
<link rel="alternate" href="http://example.com/de-ch" hreflang="de-ch" /> (mit Spracherkennung)
<link rel="alternate" href="http://example.com/" hreflang="x-default" /> (ohne Spracherkennung)
Der x-default wird in den hreflang-Code eingesetzt und durch die Spracherkennung ersetzt.
Der x-default Verweis wird nicht nur von der Google Suchmaschine akzeptiert, sondern auch von Yandex.
Welchen Nutzen hat das hreflang-Attribut?
Allen voran profitieren die Nutzer von hreflang. Diese bekommen nämlich den Content ihrer Sprache ausgespielt. Das führt dazu, dass die Verweildauer auf der Seite steigt, da z.B. spanischsprachige Nutzer die spanische Version angezeigt bekommen und nicht die englische oder finnische Version, von der sie sich zügig abwenden würden.
Zudem wird durch hreflang Duplicate Content verhindert und das Google-Ranking kann sich aufgrund der positiven Usersignals, positiv auswirken.
Bei hreflang handelt es sich nur um eine Anweisung für die Suchmaschine und keinen verbindlichen Befehl. Das heißt, dass es keine 100-prozentige Sicherheit gibt, dass trotz richtiger Einbindung, identischen Inhalte ausgespielt werden bzw. die Ausspielung der richtigen Landingpage von Google selbst bestimmt wird.
hreflang vs. Canonicals – Wo liegt der Unterschied?
Ob und wie hreflang und Canonicals gleichzeitig verwendet werden können, ist vielen oftmals nicht klar. Im Grunde gibt es nur zwei Dinge, die du beachten musst. Zum einen zeigt das Canoncial auf sich selbst, da jede Sprachvariante ihr Original für die jeweilige Sprache ist. Zum anderen bekommt nur das Original das hreflang-Attribut.
So sieht das dann beispielsweise in der Praxis aus:
- Deutsche Version
<link rel=“canonical“ href=“https://test.de/“>
<link rel=“alternate“ href=“ https://test.de/“ hreflang=“de-DE“ />
<link rel=“alternate“ href=“ https://test.ch/“ hreflang=“de-CH“ />
- Schweizer Version
<link rel=“canonical“ href=“https://test.ch/“>
<link rel=“alternate“ href=“ https://test.de/“ hreflang=“de-DE“ />
<link rel=“alternate“ href=“ https://test.ch/“ hreflang=“de-CH“ />
Binde die Canonicals nicht übergreifend auf unterschiedlichen Sprach- und Ländervarianten ein, sondern den hreflang. Allerdings kann innerhalb der Sprach- und Ländervariante (DE-Verzeichnisse) der Canonical eingesetzt werden.
hreflang-Fehler? So löst du sie!
Kein Selbstverweis
Was häufig vergessen wird, ist die Verknüpfung aller Sprachversionen. Es müssen immer mindestens zwei hreflang-Attribute vorhanden sein.
Beispiel:
Falsch:
<link rel=“alternate“ hreflang=“en“ href=“https://www.test.com/en/“>
<link rel=“alternate“ hreflang=“fr“ href=“https://www.test.de/fr/“>
Richtig:
<link rel=“alternate“ hreflang=“de“ href=“https://www.test.de/“>
<link rel=“alternate“ hreflang=“en“ href=“https://www.test.com/en/“>
<link rel=“alternate“ hreflang=“fr“ href=“https://www.test.de/fr/“>
Hreflang führt zu broken URLs
Suchmaschinen wie Google können den Nutzern keine Inhalte anzeigen, die es nicht gibt. Wenn das hreflang-Attribut zu broken URLs führt, werden diese womöglich übersehen von den Suchmaschinen. Kontrolliere die infizierten Seiten. Prüfe das eingebundene hreflang-Attribut und nehme ggf. entsprechende Änderungen vor.
Hreflang-Auszeichnungen nicht gültig
Du bekommst diese Fehlermeldung, wenn die Syntax bei der Code-Angabe (Sprach- oder Lokalitätscodes) fehlerhaft ist. Ungültige hreflang-Tags werden von Suchmaschinen wie Google nicht beachtet und können somit alternative Seitenversionen übersehen. Beachte, dass du nur Codes benutzt, die den Standards ISO 3166-1 oder ISO 639-1 entsprechen. Prüfe die infizierten Seiten und untersuche die Spalte „Ist gültiger hreflang“ und entferne die unwirksamen hreflang-Tags.
Fazit
Auf den ersten Blick mag hreflang kompliziert erscheinen. Doch wenn du erst einmal verstanden hast, wie du hreflang einsetzt und weißt, was du beachten musst, bist du auf dem richtigen Weg. Sei dir dennoch bewusst, dass die Umsetzung einige Fallstricke bereithält. Arbeite dich also gut in das Thema ein und informiere dich, welche Fehler auftreten können, um diese schnell beheben oder gar vermeiden zu können.