hreflang-Guide – Grundlagen und die richtige Implementierung

21.08.2018 | mit Jessica Wermke

Na, sprichst du schon hreflang? – Vermutlich ist dir der Begriff schon einmal irgendwo begegnet, denn er ist seit 2010 ein beliebtes Thema in Foren, Blogs und auf Konferenzen. Schon vor zwei Monaten schrieb meine Teamkollegin Gianna Brachetti-Truskawa einen Blog-Artikel über die zehn häufigsten Probleme mit dem hreflang. Falls ihr diesen verpasst habt (solltet ihr ihn unbedingt lesen!) oder noch einige Fragen offen geblieben sind, so könnt ihr in diesem und den folgenden Blog-Beiträgen alles zum Thema hreflang erfahren. Los geht´s mit …

Was ist der hreflang?

Der hreflang-Tag, auch oft hreflang-Attribut genannt, zählt zum 1×1 eines jeden SEOs, der sich schon einmal mit mehrsprachigen Webseiten beschäftigt hat. Denn das hreflang-Attribut wird als Kennzeichnung für mehrsprachige Webseiten genutzt, um der Suchmaschine die jeweils richtige geografische URL für die richtigen User zu zuordnen. Oder anders gesagt: Mit dem hreflang können Webseiten-Inhalte einer Sprache oder Region eindeutig zugeordnet werden, indem die entsprechenden alternativen URLs für ein bestimmtes Dokument auf einer Webseite benannt werden.
Zwar kann Google theoretisch selbst verschiedensprachige URL-Versionen erkennen und die User der richtigen URL-Sprachversion zuordnen, doch klappt dies wie so vieles in der Praxis nicht immer. Dies liegt vor allem daran, dass in den Google-Suchergebnissen größtenteils die Sprachversion einer URL rankt, die mit der eingestellten Browser-Sprache des Users übereinstimmt. Das Attribut hreflang dient bei richtiger Anwendung als Sprachnavigation für Google und kann auf der gesamten Webseite und allen Sprach- und Regionsversionen angewendet werden oder nur für einzelne Webseiteninhalte genutzt werden.

Warum hreflang nutzen?

Die meisten von euch dürften schon selbst darauf gekommen sein (oder wussten es bereits), warum es wichtig es den hreflang zu nutzen. Zum einen, wie im oberen Abschnitt schon kurz angesprochen, ist der hreflang ein deutliches Signal für Google den Sprach- und Ländercode jeder URL richtig zu zuordnen. So kann Google die richtige Webseiten-Version (je nach eingestellter Browsersprache) in den SERPs ranken und den Usern ausspielen. Aber man könnte doch einfach die User über ein Pop-up fragen, welche Sprache sie wollen? Jein. Erstens kann das schnell zu einer schlechten User Experience führen – immerhin reden wir hier von nervigen Pop-ups – und zudem sieht so etwas Google auch nicht gerne. Aber das soll nicht heißen, dass es nicht gut ist, wenn man dem User die Möglichkeit bietet die Sprache zu wechseln. Für Unterseiten, auf denen das möglich ist, wurde der hreflang-Wert „x-default“ eingeführt (hierzu mehr im zweiten Teil der hreflang-Reihe). Zweitens kommen die meisten User über die organischen Suchergebnisse auf eine Webseite. Das bedeutet, dass die User als erstes mit dem Snippet in Berührung kommen. Rankt jetzt in Deutschland statt der deutschen die englische oder gar spanische Webseiten-Version, kann das zu Klickeinbußen führen, da ein spanischer Title und eine spanische Description vielleicht nicht so gut bei den Usern ankommen. Weniger Klicks bedeuten eine schlechtere CTR (Click-trough-Rate) und das führt langfristig zu weniger Impression und zu einem schlechteren Ranking. Na, kommt die Erkenntnis? Natürlich gibt es Fälle, in denen internationale Webseiten gut in den Suchergebnissen ohne hreflang unterwegs sind, doch sollte man sich da nie zu sicher fühlen. Google und andere Suchmaschinen wandeln sich stetig.
Ein zweiter wichtiger Grund ist die Vermeidung von Duplicate Content. Dieser kann bei mehrsprachigen oder regionsspezifischen Webseiten sehr schnell geschehen und then you have the salad ;-). Dies tritt besonders dann oft zu, wenn man die gleiche Webseite in unterschiedlichen Sprachen unter verschiedenen Domains laufen hat, also z.B. https://example.de und https://example.com. Duplicate Content ist eines der häufigsten auftretenden Gründe für einen Rankingabfall, weshalb ihn jeder fürchtet. Daher sollte, sobald der Satz fällt „Wir wollen mir der Webseite in mehr als einem Land ranken“, über einen hreflang-Auszeichnung nachgedacht werden.

Die wichtigsten Richtlinien bei hreflang

Bei der Anwendung des hreflang-Attributs ist es sehr wichtig vorher zu wissen, was man alles beachten muss. Besonders wenn man bisher keinerlei Erfahrungen sammeln konnte oder man mehr als zwei Webseiten-Versionen auszeichnen möchte oder es sich um eine Webseite mit sehr vielen URLs handelt.

Die Richtlinien von Google zum hreflang sind hier zusammengefasst:

Bei jeder hreflang-Auszeichnung muss jeweils die Seite selbst (bei der die Auszeichnung vorgenommen wird) sowie alle anderen Sprachversion aufgelistet werden
es muss eine bidirektionale Verlinkung vorliegen, d.h. verweist Seite A-de auf Seite A-en, muss Seite A-en auch auf Seite A-de verweisen
- hier liegt die häufigste Fehlerquelle rund um den hreflang, besonders wenn man mehr als zwei Sprachversionen hat
- Wenn die bidirektionale Verlinkung fehlt, wird die Verlinkung zwischen den Seiten vollständig ignoriert
Alle Alternativ-URLs, die mit dem hreflang ausgezeichnet werden, müssen vollständig qualifiziert werden
- https://example.com/seite-2/ – richtig!
- nicht ~~//example.com/seite-2/~~
- nicht ~~/seite-2/~~
es müssen nicht alle Sprachen ausgezeichnet werden (falls das bei der Erstimplementierung von hreflang zu aufwendig ist)
es wird empfohlen eine Fallback-URL zu bestimmen. User, die keinem Land oder keiner Sprache zugeordnet werden können, werden auf diese Seite weitergeleitet (oft eine englische Seitenversion). Hierzu vergibt man den hreflang-Wert x-default
Es dürfen einer URL mehrere Sprach- und Ländercodes zugeordnet werden
- <link rel=“alternate” hreflang=“en” href=“https://www.example.com/”/>
- <link rel=“alternate” hreflang=“en-US” href=“https://www.example.com/”/>
- <link rel=“alternate” hreflang=“en-GB” href=“https://www.example.com/”/>

Wer sollte einen hreflang-Tag nutzen?

Oft liegt es auf der Hand, für welche Webseiten der Einsatz von hreflang empfehlenswert ist. Doch ist es vielen Webseiten-Betreibern gar nicht bewusst, dass auch für ihre Webseite ein hreflang-Tag geeignet oder sogar nötig wäre. Denn oft entstehen mehrsprachige Webseiten über mehrere Jahre und keiner hat an das hreflang-Attribut gedacht. Erst, wenn die falsche URL-Version in den SERPs eines Landes rankt oder Google die Webseite aufgrund Duplicate Contents abstraft, fällt das Versäumnis auf. Daher habe ich fünf Einsatzfälle aufgeschrieben, bei denen sich der hreflang positiv auswirken wird:

Verschiedensprachige Webseiten: Internationale Webseiten mit verschiedenen Sprachversionen, in beispielsweise deutsch, englisch und spanisch.
Globale Webseiten: Webseiten-Versionen für Europa, für Asien und für Amerika, welche alle in englisch sind.
Regionale Webseiten: Gleichsprachige Webseiten, welche jedoch für verschiedene Länder sind, wie eine deutsche Webseite für Deutschland, eine für Österreich und eine für den Rest der Welt.
Verschiedene Landessprachen: Eine US-Webseite, welche in englisch und spanisch verfügbar ist.
Länder-Domains: Eine Webseite, die unter verschiedenen Länder-Domains (ccTLDs) erreichbar ist und einige Domain-Versionen in mehr als einer Sprache verfügbar sind.

Aufbau eines hreflang-Tags

Ein hreflang-Tag ist folgendermaßen aufgebaut: hreflang=“[language](-[country])“. Die Groß- und Kleinschreibung ist hierbei Google egal. Üblicherweise werden die Ländercodes in Großbuchstaben geschrieben, damit auf einem Blick klar ist, was der Sprach- und was der Ländercode ist. Die Sprache muss im ISO 639-1 Format angegeben werden. Die optionale Länderkennung wird im ISO 3166-1 Alpha 2 Format angegeben.
Der hreflang-Wert [language] ist ein Pflichtwert und gibt den Sprachcode wieder. Wohingegen der Ländercode [country] optional mit angegeben werden kann. Getrennt werden der Sprach- und Ländercode mit einem Bindestrich. Möchte man zum Beispiel eine englischsprachige Seite auszeichnen, sähe der hreflang-Tag wie folgt aus: hreflang=“en“. Solche hreflang-Auszeichnungen sind für unspezifische Sprach-URLs, d.h. die URL ist für alle englischsprachigen User. Möchte man hingegen, dass möglichst alle englischsprachigen Kanadier auf die ausgewiesene URL verwiesen werden, dann wäre der hreflang-Tag: hreflang=“en-CA“. Ein häufiger Fehler ist es, einen alleinstehenden Ländercode zu verwenden, wie nur „CA“ – das ist falsch. Google filtert die User nicht alleine nach Ländern und das ist auch gut so, da es viele Länder gibt, in denen unterschiedliche Sprachen gesprochen werden. Zusammengefasst bedeutet das:

Die Auszeichnung des Sprachcodes ist bei hreflang Pflicht
Optional kann ein Ländercode mitgegeben werden
hreflang-Tag mit Sprachcode-Auszeichnung (en)
hreflang-Tag mit Sprach- und Ländercode-Auszeichnung (en-CA)
Kein hreflang-Tag mit alleinstehender Ländercode-Auszeichnung! (ca)
Kombination von Sprach- und Ländercode ist mit Schriftzeichen ebenfalls möglich, z.B. (zh-Hans-TW) für vereinfachtes Chinesisch für taiwanesische Nutzer

Drei Möglichkeiten hreflang zu implementieren

Das hreflang-Attribut kann man auf drei Arten in die Webseite mit einbinden. Alle drei Implementierungsarten haben Vor- und Nachteile, jedoch greifen die meisten auf die Implementierung über HTML-Tags zurück. Die Reihenfolge der hreflang-Auszeichnungen ist hierbei unwichtig. Die Auszeichnung erfolgt immer nach einem bestimmten Schema, welches einfach zu verstehen ist. Die größten Fehler treten auf, wenn man eine bidirektionale Verlinkung vergisst oder eine URL zwei mal verlinkt.
Für die folgenden Beispiele denken wir uns eine dreisprachige Webseite. Eine ist für deutschsprachige User aus Deutschland (https://www.example.de/), eine für alle spanisch sprechenden User aus Spanien (https://www.example.es/) und eine für alle englischsprachigen weltweit (https://www.example.com/, d.h. ohne Ländercode).

HTML-Tags: hreflang im <head>-Bereich

Im <head> von https://www.example.com/

<link rel=“alternate” hreflang=“en” href=“https://www.example.com/”/>
<link rel=“alternate” hreflang=“es-ES” href=“https://www.example.es/”/>
<link rel=“alternate” hreflang=“de-DE” href=“https://www.example.de/”/>

Im <head> von https://www.example.es/

<link rel=“alternate” hreflang=“es-ES” href=“https://www.example.es/”/>
<link rel=“alternate” hreflang=“en” href=“https://www.example.com/”/>
<link rel=“alternate” hreflang=“de-DE” href=“https://www.example.de/”/>

Im <head> von https://www.example.de/

<link rel=“alternate” hreflang=“de-DE” href=“https://www.example.de/”/>
<link rel=“alternate” hreflang=“en” href=“https://www.example.com/”/>
<link rel=“alternate” hreflang=“es-ES” href=“https://www.example.es/”/>

Der Block aus den drei Link-Elementen wird nun weit oben im <head>-Bereich von jeder der drei URLs angegeben (bidirektionale Verlinkung!).

hreflang im HTTP-Header

Link: <https://www.example.com/>; rel=“alternate“; hreflang=“en“,
<https://www.example.es/>; rel=“alternate“; hreflang=“es-ES“,
<https://www.example.de/>; rel=“alternate“; hreflang=“de-DE“

Per GET-Antwort kann man einen HTTP-Header auf die Seite zurückgeben. Diese Implementierungsmöglichkeit wird meistens verwendet, wenn man Seiten mit hreflang auszeichnen will, diese jedoch keinen Quellcode haben, wie bei PDF-Dokumenten.

Link: <https://www.example.com/file.pdf>; rel=“alternate“; hreflang=“en“,
<https://www.example.es/file.pdf>; rel=“alternate“; hreflang=“es-ES“,
<https://www.example.de/file.pdf>; rel=“alternate“; hreflang=“de-DE“

hreflang in Sitemap

Entscheidet man sich für die Implementierung von hreflang über eine Sitemap, sollte man sich auf etwas Schreibarbeit gefasst machen, denn die Sitemap kann dementsprechend größer werden. Vor der Einreichung der Sitemap sollte diese in der Google Search Console oder anderweitig auf Fehler überprüft werden.

Jede Seite erhält ein separates <url>-Element
dem <url>-Element wird das <loc>-Elemente zugeordnet
jede Alternativ-URL plus die Seite selbst, werden jeweils einem <xhtml:link>-Element zugeordnet

<?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/</loc>
<xhtml:link
rel=“alternate“
hreflang=“en“
href=“https://www.example.com/“/>
<xhtml:link
rel=“alternate“
hreflang=“es-ES“
href=“https://www.example.es/“/>
<xhtml:link
rel=“alternate“
hreflang=“de-DE“
href=“https://www.example.de/“/>
</url>
<url>
<loc>https://www.example.es/</loc>
<xhtml:link
rel=“alternate“
hreflang=“en“
href=“https://www.example.com/“/>
<xhtml:link
rel=“alternate“
hreflang=“es-ES“
href=“https://www.example.es/“/>
<xhtml:link
rel=“alternate“
hreflang=“de-DE“
href=“https://www.example.de/“/>
</url>
<url>
<loc>https://www.example.de/</loc>
<xhtml:link
rel=“alternate“
hreflang=“en“
href=“https://www.example.com/“/>
<xhtml:link
rel=“alternate“
hreflang=“es-ES“
href=“https://www.example.es/“/>
<xhtml:link
rel=“alternate“
hreflang=“de-DE“
href=“https://www.example.de/“/>
</url>
</urlset>

hreflang verstanden – und jetzt?

Nun wo die Grundlagen geklärt sind und wir alle hreflang reden, geht es an die komplizierten Fälle, wie die richtige Verwendung vom hreflang-Wert x-default oder der Einsatz von hreflang mit dem Canonical-Tag. Und wie verhält sich die hreflang-Verlinkung zwischen Desktop, Mobile und AMP? Diese Fragen und noch einige mehr werden in den folgenden Teilen geklärt und in unseren FAQs zum hreflang-Tag geklärt. Fragen oder Anmerkungen zum Blog-Artikel? Schreibt sie gerne in die Kommentare :-)