hreflang: Das HTML-Attribut für mehrsprachige Websites
Wer seine Webpräsenz internationalisiert und in verschiedenen Sprachen anbieten will, steht vor mehreren Aufgaben: So gilt es beispielsweise, alle entsprechenden Inhalte zu übersetzen und das Angebot an den jeweiligen Markt anzupassen, eine passende (eventuell länderspezifische) Lösung für die einzelnen Domains und Domainendungen zu finden oder die geeigneten Serverstrukturen für eine konstante Ladezeit der Website zu schaffen. Darüber hinaus erweist sich immer wieder auch die Suchmaschinenoptimierung der verschiedenen Sprachversionen als kniffliges, aber notwendiges Aufgabenfeld. Nur auf Basis sprach- bzw. länderspezifischer SEO-Maßnahmen ist es den Crawlern der Suchmaschinen nämlich möglich, die unterschiedlichen Sprachversionen der Website korrekt zu kategorisieren und später dem passenden Publikum auszuspielen.
Eines der wirkungsvollsten Mittel, das SEOs zu diesem Zweck zur Verfügung steht, ist das Link-Attribut hreflang.
Was ist hreflang?
Im Dezember 2011 stellte Google hreflang als einfache und effektive Lösung vor, um die Suchmaschine über die Beziehungen alternativer Website-Varianten zu informieren. Das Attribut signalisiert den Crawlern der Suchanwendung, dass der Inhalt der aktuellen Seite in verschiedenen Sprachversionen verfügbar ist. Zu diesem Zweck wird es innerhalb eines Link-Elements im HTML-Dokument gesetzt – inklusive der jeweiligen Sprachkürzel. Will man beispielsweise eine spanische Seite als solche kennzeichnen, implementiert man hreflang mit dem Länderkürzel „es“. Das komplette Element sieht dann folgendermaßen aus:
<link rel="alternate" hreflang="es" href="URL der Website" />
Ist dieses Element beispielsweise auf einer deutschsprachigen Seite eingebunden, verweist die Suchmaschine Nutzer mit IP-Adressen, die auf einen spanischsprachigen Hintergrund schließen lassen, automatisch auf das spanische Pendant.
hreflang lässt sich darüber hinaus auch nutzen, um Varianten einer einzigen Sprache auszuzeichnen. In diesem Fall wird das Attribut einfach um die Angabe der angestrebten Zielregion erweitert. Für die bereits aufgegriffene spanische Variante ist zum Beispiel eine Aufteilung in Nutzer in Spanien ("hreflang="es-ES") und in Mexiko ("hreflang="es-MX") denkbar. Die möglichen Sprach- und Länderkürzel sind in den Standards ISO 639 und ISO 3166 definiert.
hreflang ist keineswegs mit einer Weiterleitung gleichzusetzen und kann daher von anderen Metadaten ausgestochen werden. Damit also nicht trotz des implementierten Attributs die falsche Sprachversion in den Suchergebnissen der User erscheint, sollten auch die anderen Bereiche der internationalen Suchmaschinenoptimierung ausreichend abgedeckt werden.
Aufbau des Link-Elements mit hreflang-Attribut
Das Link-hreflang-Tag kann auf drei Weisen implementiert werden: Am häufigsten geschieht dies über die Einbindung in den Head-Bereich des jeweiligen HTML-Dokumentes. Für Dokumente, die nicht im HTML-Format vorliegen (z. B. eine PDF-Datei) kann das Element alternativ im HTTP-Header eingesetzt werden. Zuletzt gibt es auch die Möglichkeit, das sprach- bzw. länderspezifische Attribut in die Sitemap einzubauen. Der Aufbau des Link-Elements, das grundsätzlich für die Auszeichnung von Beziehungsstrukturen verwendet wird, ist im oben aufgeführten Beispiel für eine spanische Sprachversion bereits kurz präsentiert worden. Um die allgemeine Struktur zu verdeutlichen, präsentieren wir Ihnen an dieser Stelle noch einmal eine unspezifische Form des Codes:
<link rel="alternate" hreflang="Sprachkürzel-Länderkürzel" href="URL der Website" />
Das Link-Element <link /> ist ein leeres Element und lediglich dafür da, die entsprechenden Attribute zu implementieren. Es kann ausschließlich im Head-Bereich, dafür aber beliebig oft eingesetzt werden. Um die verschiedenen Sprachversionen mit hreflang zu verknüpfen, sind zusätzlich zu dem hreflang-Attribut die zwei Attribute rel und href von Nöten. Die drei verschiedenen Bestandteile haben folgende Funktion:
- rel: Bei rel handelt es sich um ein Pflichtattribut, das die Beziehungen zwischen dem zugrundeliegenden Dokument und dem verlinkten Dokument spezifiziert. Der Wert „alternate“ verrät der Suchmaschine, dass das externe Dokument eine alternative Version der Website beinhaltet.
- hreflang: hreflang selbst beschreibt, in welcher Sprache das verknüpfte Dokument verfasst ist und kann optional auch kennzeichnen, für welches Land es besonders relevant ist. Als Werte sind hier die Regions- und Sprachkürzel nach den ISO-Standards 639-1 und 3166-1 zulässig. Wenn beide Angaben gemacht werden, sind diese durch einen Bindestrich zu trennen. Eine übersichtliche Auflistung aller möglichen Kombinationen finden Sie auf lingoes.net.
- href: Das href-Attribut gibt an, wo die alternative Sprachversion zu finden ist, und führt als Wert standardmäßig die absolute URL des externen Dokumentes an.
Meist wird das optionale regionale Kürzel in Großbuchstaben angegeben. Google akzeptiert allerdings auch die Kleinschreibung, weshalb Sie nicht an eine explizite Schreibweise gebunden sind.
Was steckt hinter hreflang="x-default"?
Mit der Verwendung von hreflang bezweckt man, Nutzer zielgerichtet zum sprachlich passenden Webangebot zu führen. Doch natürlich kommt es – selbst bei einer großen Auswahl – auch vor, dass Nutzer weder aufgrund des Sprach- noch des Länderkürzels einer der verfügbaren Varianten zugeordnet werden können. Stoßen diese User über eine Suchmaschine auf Ihre Website, entscheidet das Ranking darüber, welche der Sprachvarianten angezeigt wird. Als Konsequenz können Sie in solch einem Fall potenzielle Leser schon nach wenigen Sekunden verlieren, da sie auf der falschen Sprachversion landen. Google stellt mit "x-default" allerdings eine Option bereit, mit der Sie diese Situation entschärfen können.
Der Wert, den Sie als Alternative zu den ISO-Codes setzen können, signalisiert der Suchmaschine, dass die verlinkte URL als Standardlösung für alle Nutzer gilt, für die keine explizit ausgewiesene Sprachversion existiert. Auf dieser Standardseite können Sie beispielsweise eine Sprachübersicht mit Auswahloption präsentieren, sodass die Entscheidung für eine Variante in den Händen der betreffenden Besucher liegt. Die passende Codezeile, die Sie in diesem Fall dem Header jeder alternativen Version hinzufügen müssen, sieht folgendermaßen aus:
<link rel="alternate" hreflang="x-default" href="URL der „Default“-Seite" />
Wie funktioniert die hreflang-Implementierung?
Für das Verständnis der Funktionsweise von hreflang ist eine Eigenschaft des Attributs von elementarer Bedeutung: Es verlinkt zwei oder mehrere Dokumente bidirektional und nicht – wie bei einer Weiterleitung – unidirektional. Es reicht also nicht, wenn die deutschsprachige Website eine hreflang-Verlinkung auf die spanischsprachige Variante enthält, diese aber nicht ebenso auf die deutschsprachige Seite verweist. Nur wenn die hreflang-HTML-Anmerkung in allen Dokumenten in alle vorhandenen Richtungen (Sprachversionen) gesetzt wird, kann die Suchmaschine die Struktur Ihres Webprojekts erkennen und die Ergebnisse der suchenden Nutzer entsprechend anpassen.
Der folgende hreflang-Beispiel-Code für die Webpräsenz beispieldomain.de mit den Sprachversionen Deutsch, Italienisch, Spanisch und Englisch müsste also in den Header aller vier HTML-Dokumente eingetragen werden:
<link rel="alternate" href="http://beispieldomain.de/" hreflang="de" />
<link rel="alternate" href="http://beispieldomain.de/it/" hreflang="it" />
<link rel="alternate" href="http://beispieldomain.de/es/" hreflang="es" />
<link rel="alternate" href="http://beispieldomain.de/en/" hreflang="en" />
Die Einbindung in einen HTTP-Header funktioniert im Prinzip nach dem gleichen Muster, denn auch dort gilt es, alle vorhandenen Sprachversionen zu referenzieren. Lediglich in der Syntax gibt es ein paar kleinere Unterschiede. Würden Sie zum Beispiel für die vier vorangegangenen Sprachbeispiele Manuals im PDF-Format anbieten und dies den Suchmaschinen signalisieren wollen, sähe der Code folgendermaßen aus:
Link: <http://beispieldomain.de/downloads/manuals.pdf/>; rel="alternate"; hreflang="de"
Link: <http://beispieldomain.de/it/downloads/manuals.pdf/>; rel="alternate"; hreflang="it"
Link: <http://beispieldomain.de/es/downloads/manuals.pdf/>; rel="alternate"; hreflang="es"
Link: <http://beispieldomain.de/en/downloads/manuals.pdf/>; rel="alternate"; hreflang="en"
Die Auszeichnung des hreflang-Attributs in einer XML-Sitemap ist insbesondere dann eine sinnvolle Alternative zur einfachen Auszeichnung in den einzelnen Seiten, wenn Sie ein großes, internationales Webprojekt betreiben. Bieten Sie nämlich im großen Stil mehrsprachige Inhalte an, wäre der Aufwand bei der gewöhnlichen HTML-Implementierung relativ hoch. Auch in einer Sitemap müssen alle Sprachversionen einzeln aufgeführt werden, indem die jeweilige URL angegeben wird. Jede URL wird zusätzlich durch ein xhtml:link-Element spezifiziert, das auf die anderen verfügbaren Varianten referenziert:
<?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://beispieldomain.de/</loc>
<xhtml:link
rel="alternate"
hreflang="de"
href="http://beispieldomain.de/"
/>
<xhtml:link
rel="alternate"
hreflang="it"
href="http://beispieldomain.de/it/"
/>
<xhtml:link
rel="alternate"
hreflang="es"
href="http://beispieldomain.de/es/"
/>
<xhtml:link
rel="alternate"
hreflang="en"
href="http://beispieldomain.de/en/"
/>
</url>
<url>
<loc>http://beispieldomain.de/it/</loc>
<xhtml:link
rel="alternate"
hreflang="it"
href="http://beispieldomain.de/it/"
/>
<xhtml:link
rel="alternate"
hreflang="de"
href="http://beispieldomain.de/"
/>
<xhtml:link
rel="alternate"
hreflang="es"
href="http://beispieldomain.de/es/"
/>
<xhtml:link
rel="alternate"
hreflang="en"
href="http://beispieldomain.de/en/"
/>
</url>
<url>
<loc>http://beispieldomain.de/es/</loc>
<xhtml:link
rel="alternate"
hreflang="es"
href="http://beispieldomain.de/es/"
/>
<xhtml:link
rel="alternate"
hreflang="de"
href="http://beispieldomain.de/"
/>
<xhtml:link
rel="alternate"
hreflang="it"
href="http://beispieldomain.de/it/"
/>
<xhtml:link
rel="alternate"
hreflang="en"
href="http://beispieldomain.de/en/"
/>
</url>
<url>
<loc>http://beispieldomain.de/en/</loc>
<xhtml:link
rel="alternate"
hreflang="en"
href="http://beispieldomain.de/en/"
/>
<xhtml:link
rel="alternate"
hreflang="de"
href="http://beispieldomain.de/"
/>
<xhtml:link
rel="alternate"
hreflang="es"
href="http://beispieldomain.de/es/"
/>
<xhtml:link
rel="alternate"
hreflang="it"
href="http://beispieldomain.de/it/"
/>
</url>
</urlset>
Häufige Fehler bei der Einbindung des hreflang-Tags
Die aufgeführten hreflang-Beispiele für HTML und Co. zeigen, dass es sich bei der Implementierung der praktischen, automatischen Nutzerzuteilung für multilinguale Webpräsenzen keineswegs um Hexenwerk handelt. Sie machen aber auch den nicht zu unterschätzenden Aufwand und das Fehlerpotenzial deutlich, das mit der Angabe der zahlreichen, wechselseitigen Verweise einhergeht. Daraus resultieren gelegentlich kleinere oder größere Fehler, die teilweise nur einzelne Seiten betreffen, teilweise aber auch die Funktionalität von hreflang für das gesamte Webprojekt gefährden. Einige der häufigsten Fehlerquellen haben wir aus diesem Grund im Folgenden zusammengefasst:
hreflang nicht auf URL-Ebene implementiert
Da die hreflang-Auszeichnung immer mit einer konkreten URL verknüpft ist, muss sie immer auch auf dieser Ebene vorgenommen werden. Mit anderen Worten: Wenn Sie lediglich die Ausgangs-URL Ihrer verschiedenen Sprachversionen mit dem Attribut auszeichnen, greift die automatische Nutzerzuordnung auch nur für diese Startseiten und nicht für das komplette Webprojekt. Es ist also Ihre Aufgabe, das Link-Element für sämtliche mehrsprachigen Seiten bzw. URLs einzeln zu implementieren oder alternativ mit der erwähnten Sitemap-Variante zu arbeiten.
Eine oder mehrere Sprachversionen verweisen nicht auf sich selbst
Viele Website-Betreiber begehen den Fehler und zeichnen die URLs der anderen Sprachversionen zwar korrekt mit dem hreflang-Attribut aus, vergessen dabei aber, dass die jeweilige Seite auch auf sich selbst verweisen muss. In diesem Fall ist die Verlinkungsstruktur unvollständig und für Google und andere Suchmaschinen nicht interpretierbar.
Falsche ISO-Codes
Wenn es um die Länder- und Sprachkürzel geht, neigen viele SEOs schnell dazu, kreativ zu werden. Das ist jedoch nicht immer von Erfolg gekrönt und führt häufig dazu, dass der implementierte hreflang-Code fehlerhaft ist. So scheint die Kombination "en-uk" zwar eine treffende Wahl zu sein, wenn sich der Inhalt der Seite explizit an Publikum aus Großbritannien richtet – korrekt wäre allerdings die Verbindung "en-gb". Und auch die Auszeichnung "dk-DK" scheint naheliegend, wenn dänische User angesprochen werden sollen. Doch während der ISO-Ländercode für Dänemark in der Tat "DK" ist, ist der im ISO-Standard 639-1 festgelegte Sprachcode für die dänische Sprache "da", weshalb der korrekte hreflang-Code "da-DK" lautet.
Verzicht auf hreflang x-default
Egal, ob Sie mit einem initialen Sprachauswahlmenü auf der Startseite, Umleitungen auf Basis der IP-Adresse oder automatischen Weiterleitungen aufgrund der Browsersprache arbeiten: Es gibt im Prinzip keinen Anlass dazu, auf die Angabe einer Default-Seite zu verzichten. Als Quasi-Platzhalter hilft Ihnen eine derart ausgezeichnete Seite dabei, auch diejenigen Nutzer zu gewinnen, deren Sprache oder Land auf Ihrer Website nicht repräsentiert sind. Zudem empfiehlt Google den Einsatz dieser Auszeichnungsvariante.
Referenz auf alte oder nicht-existente URLs
Eine häufige Ursache für fehlerhafte hreflang-Tags ist die Verwendung von URLs, die nicht bzw. nicht mehr existieren. Ersteres geschieht in erstere Linie dann, wenn die Auszeichnungen automatisiert auf allen Unterseiten eingebunden werden, aber nicht alle dieser Seiten in jeder angebotenen Sprachvariante vorliegen. Oftmals vergessen Webmaster hierbei eine entsprechende Logik einzubauen, damit nur die tatsächlich existierenden URLs als Alternativziele ausgezeichnet werden. Veraltete URLs treten logischerweise immer dann auf, wenn Sie Veränderungen an der URL-Struktur vornehmen und diese Anpassungen nicht in die Link-Elemente übertragen.
Widersprüchlicher Einsatz von Canonical- und hreflang-Tag
Viele Anbieter internationaler Websites greifen auf das Canonical-Tag zurück, damit Suchmaschinen-Crawler Seiten mit gleichem Inhalt nicht doppelt indexieren. Dieses Vorgehen ist zwar eine erstklassige Option, um die Duplicate-Content-Problematik zu umgehen, verträgt sich jedoch nicht mit der Verwendung des hreflang-Attributs. Enthält eine Seite nämlich beide Tags, erhalten die Suchmaschinen folgende widersprüchlichen Informationen:
- Ignoriere diese Seite und wende dich stattdessen folgender Seite zu (Canonical-Tag).
- Es gibt neben dieser Seite alternative Seiten, die sich unter Umständen besser für den Nutzer eignen. Diese Seite soll dennoch erfasst und als mögliche Option indexiert werden (hreflang-Tag).
Einerseits verweist eine solche URL also auf sich selbst, andererseits aber auf eine andere URL, die ihrerseits wiederum einen Rückverweis beinhalten. Infolgedessen ignoriert die Suchmaschine beide Signale und versucht, die Struktur auf andere Art und Weise zu erfassen. Die hreflang-Auszeichnung sollten Sie folglich nur für Seiten einsetzen, die nicht via Canonical-Attribut auf eine andere Seite verweisen.
Einstellungen in den Google Webmaster Tools senden widersprüchliche Signale
Wer seine Website in den Google Webmaster Tools (Search Console) anmeldet, kann die internationale Ausrichtung einer Domain bzw. einer URL definieren, sofern generische Top-Level-Domains zum Einsatz kommen. Bei länderspezifischen Domainendungen übernimmt Google diese Zuordnung sogar selbst. Es steht außer Frage, dass Sie als Website-Betreiber von dieser Funktion profitieren: Google nutzt diese Informationen, um Ihre Seiten optimal zu kategorisieren. Sie sollten allerdings niemals vergessen, diese Einstellungen in Ihre SEO-Maßnahmen einzubeziehen. Wenn Sie also zusätzlich Seiten mit dem hreflang-Attribut auszeichnen, sollte dabei keinerlei Widerspruch entstehen. So kann es beispielsweise schnell passieren, dass eine Seite nur mit einem Sprachkürzel und ohne regionale Spezifizierung ausgezeichnet wird, während gleichzeitig in den Webmaster Tools ein konkretes Land angegeben ist.
Nützliche hreflang-Tools
Es ist bereits deutlich geworden, dass die Einbindung des hreflang-Tags in alle relevanten HTML-Seiten mit einem gewissen Aufwand und einer Menge Code verbunden ist. Je komplexer Ihre mehrsprachige Website ist, desto wahrscheinlicher ist es daher auch, dass sich bei der Implementierung Fehler einschleichen – selbst wenn Sie die vorgestellten, potenziellen Fehlerquellen kennen und im Hinterkopf behalten. Aus diesem Grund ist es empfehlenswert, Tools zu verwenden, um die Tags zu erstellen und deren Funktionsfähigkeit in regelmäßigen Abständen zu überprüfen. Einige interessante Vertreter finden Sie in der folgenden Auflistung:
- SISTRIX hreflang Generator: Mit dem kostenfreien hreflang-Generator aus dem Hause SISTRIX erstellen Sie problemlos Link-Elemente mit hreflang-Attribut für den HTML-Header Ihrer mehrsprachigen Inhalte. Zu diesem Zweck geben Sie einfach die betreffenden URLs sowie die gewünschten Länder- und Sprachkürzel an und generieren den Code anschließend mit einem Klick auf „Code erstellen“. Zudem ist es möglich, eine Default-Seite zu definieren.
- SISTRIX hreflang Validator: Wenn Sie Referenzen für verschiedene Sprachversionen in Ihr Webprojekt implementiert haben, können Sie von dem ebenfalls von SISTRIX angebotenen hreflang-Validator Gebrauch machen. Der kostenlose Webservice überprüft für eine angegebene URL, ob die gesetzten hreflang-Tags korrekt sind.
- flang: Die Marketing-Firma Dejan SEO stellt Ihnen mit flang eine kostenfreie Möglichkeit für die Verifizierung Ihrer hreflang-Elemente zur Verfügung. Nach einer kurzen Wartezeit erhalten Sie für alle eingetragenen Alternativen die definierten Zielsprachen und -regionen und im Problemfall auch Optimierungsvorschläge für die gewünschte URL präsentiert.
- Google Search Console: Die Anmeldung bei Google macht Ihre Seite nicht nur leichter für die Suchmaschine erfassbar, sondern ermöglicht Ihnen auch den Zugriff auf diverse Analysewerkzeuge zur Optimierung Ihres Webprojekts. Unter der Rubrik „Internationale Ausrichtung“ liefert das Dashboard beispielsweise auch Angaben über die eingesetzten hreflang-Tags inklusive einer Auflistung fehlender Rück-Verlinkungen.
Darum lohnt es sich, hreflang einzusetzen
Der Hauptgrund für den Einsatz von Attributen wie canonical oder hreflang ist der, dass Duplicate Content bei mehrsprachigen Webprojekten vermieden werden soll. Häufig sollen verschiedene Märkte bedient werden, ohne dass sich die Inhalte – mit Ausnahme der Übersetzung – grundlegend unterscheiden. Für Länder, in denen die gleiche Sprache gesprochen wird, ist die Situation sogar noch komplizierter: Einigen wenigen Veränderungen aufgrund kultureller oder regionaler Unterschiede (Wortschatz, Währung, Kontaktinformationen etc.) stehen hier größtenteils identische Inhalte gegenüber. Da in der Regel auch die gleiche Domain verwendet wird, ist es von großer Bedeutung, den Suchmaschinen eindeutige Signale zu senden, um eine negative Einstufung zu verhindern.
Während das Canonical-Attribut eine URL zur dominierenden Variante erklärt und alle alternativen Versionen von der Indexierung ausschließt, signalisiert das hreflang-Attribut, welche Version einer bestimmten Zielgruppe (Sprache und/oder Land) bei der Suchmaschinenrecherche präsentiert werden soll. Aus diesem Grund eignet sich die HTML-Auszeichnung immer dann, wenn Sie mit Ihrer Website international erfolgreich sein wollen und über die entsprechenden multilingualen Inhalte verfügen. Auch wenn das Attribut keinen direkten Einfluss auf das Suchmaschinenranking hat, wird sich die korrekte Nutzung langfristig auszahlen, weil sowohl die Crawler als auch die User in unterschiedlichen Ländern Ihre Website besser erfassen können.
Nicht alle Suchmaschinen greifen auf das hreflang-Attribut zurück. Bing erfasst die Sprachversion einer Seite beispielsweise anhand der content-language-Attribute in den Metatags.