hreflang: Das HTML-Attribut für mehrsprachige Websites

Wer seine Webpräsenz internationalisiert und in verschiedenen Sprachen anbieten will, steht vor mehreren Aufgaben, inklusive der Suchmaschinenoptimierung der verschiedenen Sprachversionen. 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 Nutzende 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 Nutzende 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.

Warum ist hreflang für SEO relevant?

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.

Wie ist hreflang aufgebaut?

Das Link-hreflang-Tag basiert auf dem HTML-Link-Element. Das Link-Element <link /> ist ein leeres Element und lediglich dafür da, eine angegebene URL mit entsprechenden Attributen zu bezeichnen. 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: rel spezifiziert die Beziehungen zwischen dem zugrundeliegenden Dokument und dem verlinkten Dokument. 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 kennzeichnen, für welches Land es besonders relevant ist. Eine übersichtliche Auflistung aller möglichen Kombinationen finden Sie auf lingoes.net.
• href: Das href-Attribut gibt standardmäßig die URL der alternativen Sprachversion an.

Folgendes hreflang-Beispiel dient zur Veranschaulichung:

<link rel="alternate" hreflang="Sprachkürzel-Länderkürzel" href="URL der Website" />

Sollten Nutzende keiner geeigneten Sprachversion zugeordnet werden, entscheidet das Ranking darüber, welche der Sprachvarianten angezeigt wird. Als Konsequenz können Sie in solch einem Fall potenzielle Lesende 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. Dieses Element signalisiert der Suchmaschine, dass die verlinkte URL als Standardlösung für alle Nutzende gilt, für die keine explizit ausgewiesene Sprachversion existiert. Ein Beispiel:

<link rel="alternate" hreflang="x-default" href="URL der „Default“-Seite" />

In Googles Blog-Beitrag zur Einführung von “x-default hreflang” für internationale Webseiten wird das Element genauer besprochen.

Wie implementiert man hreflang?

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.

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:

Link: <http://beispieldomain.de/es/downloads/manuals.pdf/>; rel="alternate"; hreflang="es"

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>
</urlset>

Den <url>-Tag müssen Sie dann nach demselben Muster für jede Sprachversion Ihres Artikels wiederholen.

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 für die Suchenden 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" />

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-Betreibende 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.

Auch auf die Angabe einer Default-Seite mittels hreflang x-default sollten Sie nicht verzichten, da Sie sonst einiges Optimierungspotenzial unausgeschöpft lassen.

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". Prüfen Sie Ihre verwendeten Länderkürzel immer mit dem ISO-Standard 639-1 nach.

Referenz auf alte oder nicht-existente URLs

Eine häufige Ursache für fehlerhafte hreflang-Tags ist die Verwendung von URLs, die nicht mehr existieren. Dies geschieht in erstere Linie dann, wenn die Auszeichnungen automatisiert auf allen Unterseiten eingebunden werden, aber nicht alle dieser Seiten in jeder angebotenen Sprachvariante vorliegen. 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 Anbietende 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 widersprüchliche Informationen und ignorieent beide Signale. 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 bzw. -Betreiberin von dieser Funktion profitieren: Google nutzt diese Informationen, um Ihre Seiten optimal zu kategorisieren. Es lohnt sich also auf jeden Fall, Google über lokalisierte Versionen deiner Seite zu informieren.

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 Tools 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ückverlinkungen.
• Hreflang Checker: Mit diesem hreflang-Checker können Sie die hreflang-Attribute einer eingegebenen URL schnell und in übersichtlicher Form präsentiert bekommen. Das Werkzeug gibt sogar an, aus welcher Quelle die hreflang-Attribute entnommen wurden (HTML, HTTP usw.), und schlägt Ihnen vor, wie Sie Ihre hreflang-Implementierungen verbessern könnten.