hreflang: Das HTML-Attribut für mehr­spra­chi­ge Websites

Wer seine Web­prä­senz in­ter­na­tio­na­li­siert und in ver­schie­de­nen Sprachen anbieten will, steht vor mehreren Aufgaben, inklusive der Such­ma­schi­nen­op­ti­mie­rung der ver­schie­de­nen Sprach­ver­sio­nen. Nur auf Basis sprach- bzw. län­der­spe­zi­fi­scher SEO-Maßnahmen ist es den Crawlern der Such­ma­schi­nen nämlich möglich, die un­ter­schied­li­chen Sprach­ver­sio­nen der Website korrekt zu ka­te­go­ri­sie­ren und später dem passenden Publikum aus­zu­spie­len. Eines der wir­kungs­volls­ten 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 Such­ma­schi­ne über die Be­zie­hun­gen al­ter­na­ti­ver Website-Varianten zu in­for­mie­ren. Das Attribut si­gna­li­siert den Crawlern der Such­an­wen­dung, dass der Inhalt der aktuellen Seite in ver­schie­de­nen Sprach­ver­sio­nen verfügbar ist. Zu diesem Zweck wird es innerhalb eines Link-Elements im HTML-Dokument gesetzt – inklusive der je­wei­li­gen Sprach­kür­zel. Will man bei­spiels­wei­se eine spanische Seite als solche kenn­zeich­nen, im­ple­men­tiert man hreflang mit dem Län­der­kür­zel „es“. Das komplette Element sieht dann fol­gen­der­ma­ßen aus:

<link rel="alternate" hreflang="es" href="URL der Website" />

Ist dieses Element bei­spiels­wei­se auf einer deutsch­spra­chi­gen Seite ein­ge­bun­den, verweist die Such­ma­schi­ne Nutzende mit IP-Adressen, die auf einen spa­nisch­spra­chi­gen Hin­ter­grund schließen lassen, au­to­ma­tisch auf das spanische Pendant.

hreflang lässt sich darüber hinaus auch nutzen, um Varianten einer einzigen Sprache aus­zu­zeich­nen. In diesem Fall wird das Attribut einfach um die Angabe der an­ge­streb­ten Ziel­re­gi­on erweitert. Für die bereits auf­ge­grif­fe­ne spanische Variante ist zum Beispiel eine Auf­tei­lung in Nutzende in Spanien ("hreflang="es-ES") und in Mexiko ("hreflang="es-MX") denkbar. Die möglichen Sprach- und Län­der­kür­zel sind in den Standards ISO 639 und ISO 3166 definiert.

Warum ist hreflang für SEO relevant?

Der Haupt­grund für den Einsatz von At­tri­bu­ten wie Canonical oder hreflang ist der, dass Duplicate Content bei mehr­spra­chi­gen Web­pro­jek­ten vermieden werden soll. Häufig sollen ver­schie­de­ne Märkte bedient werden, ohne dass sich die Inhalte – mit Ausnahme der Über­set­zung – grund­le­gend un­ter­schei­den. Für Länder, in denen die gleiche Sprache ge­spro­chen wird, ist die Situation sogar noch kom­pli­zier­ter: Einigen wenigen Ver­än­de­run­gen aufgrund kul­tu­rel­ler oder re­gio­na­ler Un­ter­schie­de (Wort­schatz, Währung, Kon­takt­in­for­ma­tio­nen etc.) stehen hier größ­ten­teils iden­ti­sche Inhalte gegenüber. Da in der Regel auch die gleiche Domain verwendet wird, ist es von großer Bedeutung, den Such­ma­schi­nen ein­deu­ti­ge Signale zu senden, um eine negative Ein­stu­fung zu ver­hin­dern.

Während das Canonical-Attribut eine URL zur do­mi­nie­ren­den Variante erklärt und alle al­ter­na­ti­ven Versionen von der In­de­xie­rung aus­schließt, si­gna­li­siert das hreflang-Attribut, welche Version einer be­stimm­ten Ziel­grup­pe (Sprache und/oder Land) bei der Such­ma­schi­nen­re­cher­che prä­sen­tiert werden soll. Aus diesem Grund eignet sich die HTML-Aus­zeich­nung immer dann, wenn Sie mit Ihrer Website in­ter­na­tio­nal er­folg­reich sein wollen und über die ent­spre­chen­den mul­ti­l­in­gua­len Inhalte verfügen. Auch wenn das Attribut keinen direkten Einfluss auf das Such­ma­schi­nen­ran­king hat, wird sich die korrekte Nutzung lang­fris­tig auszahlen, weil sowohl die Crawler als auch die User in un­ter­schied­li­chen 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 an­ge­ge­be­ne URL mit ent­spre­chen­den At­tri­bu­ten zu be­zeich­nen. Es kann aus­schließ­lich im Head-Bereich, dafür aber beliebig oft ein­ge­setzt werden. Um die ver­schie­de­nen Sprach­ver­sio­nen mit hreflang zu ver­knüp­fen, sind zu­sätz­lich zu dem hreflang-Attribut die zwei Attribute rel und href von Nöten. Die drei ver­schie­de­nen Be­stand­tei­le haben folgende Funktion:

• rel: rel spe­zi­fi­ziert die Be­zie­hun­gen zwischen dem zu­grun­de­lie­gen­den Dokument und dem ver­link­ten Dokument. Der Wert alternate verrät der Such­ma­schi­ne, dass das externe Dokument eine al­ter­na­ti­ve Version der Website be­inhal­tet.
• hreflang: hreflang selbst be­schreibt, in welcher Sprache das ver­knüpf­te Dokument verfasst ist, und kann optional kenn­zeich­nen, für welches Land es besonders relevant ist. Eine über­sicht­li­che Auf­lis­tung aller möglichen Kom­bi­na­tio­nen finden Sie auf lingoes.net.
• href: Das href-Attribut gibt stan­dard­mä­ßig die URL der al­ter­na­ti­ven Sprach­ver­si­on an.

Folgendes hreflang-Beispiel dient zur Ver­an­schau­li­chung:

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

Sollten Nutzende keiner ge­eig­ne­ten Sprach­ver­si­on zu­ge­ord­net werden, ent­schei­det das Ranking darüber, welche der Sprach­va­ri­an­ten angezeigt wird. Als Kon­se­quenz können Sie in solch einem Fall po­ten­zi­el­le Lesende schon nach wenigen Sekunden verlieren, da sie auf der falschen Sprach­ver­si­on landen. Google stellt mit "x-default" al­ler­dings eine Option bereit, mit der Sie diese Situation ent­schär­fen können. Dieses Element si­gna­li­siert der Such­ma­schi­ne, dass die verlinkte URL als Stan­dard­lö­sung für alle Nutzende gilt, für die keine explizit aus­ge­wie­se­ne Sprach­ver­si­on existiert. Ein Beispiel:

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

In Googles Blog-Beitrag zur Ein­füh­rung von “x-default hreflang” für in­ter­na­tio­na­le Webseiten wird das Element genauer be­spro­chen.

Wie im­ple­men­tiert man hreflang?

Das Link-hreflang-Tag kann auf drei Weisen im­ple­men­tiert werden: Am häu­figs­ten geschieht dies über die Ein­bin­dung in den Head-Bereich des je­wei­li­gen HTML-Do­ku­men­tes. Für Dokumente, die nicht im HTML-Format vorliegen (z. B. eine PDF-Datei), kann das Element al­ter­na­tiv im HTTP-Header ein­ge­setzt werden. Zuletzt gibt es auch die Mög­lich­keit, das sprach- bzw. län­der­spe­zi­fi­sche Attribut in die Sitemap ein­zu­bau­en.

Die Ein­bin­dung in einen HTTP-Header funk­tio­niert im Prinzip nach dem gleichen Muster, denn auch dort gilt es, alle vor­han­de­nen Sprach­ver­sio­nen zu re­fe­ren­zie­ren. Lediglich in der Syntax gibt es ein paar kleinere Un­ter­schie­de:

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

Die Aus­zeich­nung des hreflang-Attributs in einer XML-Sitemap ist ins­be­son­de­re dann eine sinnvolle Al­ter­na­ti­ve zur einfachen Aus­zeich­nung in den einzelnen Seiten, wenn Sie ein großes, in­ter­na­tio­na­les Web­pro­jekt betreiben. Bieten Sie nämlich im großen Stil mehr­spra­chi­ge Inhalte an, wäre der Aufwand bei der ge­wöhn­li­chen HTML-Im­ple­men­tie­rung relativ hoch. Auch in einer Sitemap müssen alle Sprach­ver­sio­nen einzeln auf­ge­führt werden, indem die jeweilige URL angegeben wird. Jede URL wird zu­sätz­lich durch ein xhtml:link-Element spe­zi­fi­ziert, das auf die anderen ver­füg­ba­ren Varianten re­fe­ren­ziert:

<?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 Sprach­ver­si­on Ihres Artikels wie­der­ho­len.

Für das Ver­ständ­nis der Funk­ti­ons­wei­se von hreflang ist eine Ei­gen­schaft des Attributs von ele­men­ta­rer Bedeutung: Es verlinkt zwei oder mehrere Dokumente bi­di­rek­tio­nal und nicht – wie bei einer Wei­ter­lei­tung – uni­di­rek­tio­nal. Es reicht also nicht, wenn die deutsch­spra­chi­ge Website eine hreflang-Ver­lin­kung auf die spa­nisch­spra­chi­ge Variante enthält, diese aber nicht ebenso auf die deutsch­spra­chi­ge Seite verweist. Nur wenn die hreflang-HTML-Anmerkung in allen Do­ku­men­ten in alle vor­han­de­nen Rich­tun­gen (Sprach­ver­sio­nen) gesetzt wird, kann die Such­ma­schi­ne die Struktur Ihres Web­pro­jekts erkennen und die Er­geb­nis­se für die Suchenden ent­spre­chend anpassen.

Der folgende hreflang-Beispiel-Code für die Web­prä­senz beispieldomain.de mit den Sprach­ver­sio­nen Deutsch, Ita­lie­nisch, Spanisch und Englisch müsste also in den Header aller vier HTML-Dokumente ein­ge­tra­gen 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 Ein­bin­dung des hreflang-Tags

Die auf­ge­führ­ten hreflang-Beispiele für HTML und Co. zeigen, dass es sich bei der Im­ple­men­tie­rung der prak­ti­schen, au­to­ma­ti­schen Nut­zer­zu­tei­lung für mul­ti­l­in­gua­le Web­prä­sen­zen kei­nes­wegs um Hexenwerk handelt. Sie machen aber auch den nicht zu un­ter­schät­zen­den Aufwand und das Feh­ler­po­ten­zi­al deutlich, das mit der Angabe der zahl­rei­chen, wech­sel­sei­ti­gen Verweise ein­her­geht. Daraus re­sul­tie­ren ge­le­gent­lich kleinere oder größere Fehler, die teilweise nur einzelne Seiten betreffen, teilweise aber auch die Funk­tio­na­li­tät von hreflang für das gesamte Web­pro­jekt gefährden. Einige der häu­figs­ten Feh­ler­quel­len haben wir aus diesem Grund im Folgenden zu­sam­men­ge­fasst:

hreflang nicht auf URL-Ebene im­ple­men­tiert

Da die hreflang-Aus­zeich­nung immer mit einer konkreten URL verknüpft ist, muss sie immer auch auf dieser Ebene vor­ge­nom­men werden. Mit anderen Worten: Wenn Sie lediglich die Ausgangs-URL Ihrer ver­schie­de­nen Sprach­ver­sio­nen mit dem Attribut aus­zeich­nen, greift die au­to­ma­ti­sche Nut­zer­zu­ord­nung auch nur für diese Start­sei­ten und nicht für das komplette Web­pro­jekt. Es ist also Ihre Aufgabe, das Link-Element für sämtliche mehr­spra­chi­gen Seiten bzw. URLs einzeln zu im­ple­men­tie­ren oder al­ter­na­tiv mit der erwähnten Sitemap-Variante zu arbeiten.

Eine oder mehrere Sprach­ver­sio­nen verweisen nicht auf sich selbst

Viele Website-Be­trei­ben­de zeichnen die URLs der anderen Sprach­ver­sio­nen 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 Ver­lin­kungs­struk­tur un­voll­stän­dig und für Google und andere Such­ma­schi­nen nicht in­ter­pre­tier­bar.

Auch auf die Angabe einer Default-Seite mittels hreflang x-default sollten Sie nicht ver­zich­ten, da Sie sonst einiges Op­ti­mie­rungs­po­ten­zi­al un­aus­ge­schöpft lassen.

Falsche ISO-Codes

Wenn es um die Länder- und Sprach­kür­zel 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 im­ple­men­tier­te hreflang-Code feh­ler­haft ist. So scheint die Kom­bi­na­ti­on "en-uk" zwar eine treffende Wahl zu sein, wenn sich der Inhalt der Seite explizit an Publikum aus Groß­bri­tan­ni­en richtet – korrekt wäre al­ler­dings die Ver­bin­dung "en-gb". Prüfen Sie Ihre ver­wen­de­ten Län­der­kür­zel immer mit dem ISO-Standard 639-1 nach.

Referenz auf alte oder nicht-existente URLs

Eine häufige Ursache für feh­ler­haf­te hreflang-Tags ist die Ver­wen­dung von URLs, die nicht mehr exis­tie­ren. Dies geschieht in erstere Linie dann, wenn die Aus­zeich­nun­gen au­to­ma­ti­siert auf allen Un­ter­sei­ten ein­ge­bun­den werden, aber nicht alle dieser Seiten in jeder an­ge­bo­te­nen Sprach­va­ri­an­te vorliegen. Veraltete URLs treten lo­gi­scher­wei­se immer dann auf, wenn Sie Ver­än­de­run­gen an der URL-Struktur vornehmen und diese An­pas­sun­gen nicht in die Link-Elemente über­tra­gen.

Wi­der­sprüch­li­cher Einsatz von Canonical- und hreflang-Tag

Viele An­bie­ten­de in­ter­na­tio­na­ler Websites greifen auf das Canonical-Tag zurück, damit Such­ma­schi­nen-Crawler Seiten mit gleichem Inhalt nicht doppelt in­de­xie­ren. Dieses Vorgehen ist zwar eine erst­klas­si­ge Option, um die Duplicate-Content-Pro­ble­ma­tik zu umgehen, verträgt sich jedoch nicht mit der Ver­wen­dung des hreflang-Attributs. Enthält eine Seite nämlich beide Tags, erhalten die Such­ma­schi­nen wi­der­sprüch­li­che In­for­ma­tio­nen und igno­rie­ent beide Signale. Die hreflang-Aus­zeich­nung sollten Sie folglich nur für Seiten einsetzen, die nicht via Canonical-Attribut auf eine andere Seite verweisen.

Ein­stel­lun­gen in den Google Webmaster Tools senden wi­der­sprüch­li­che Signale

Wer seine Website in den Google Webmaster Tools (Search Console) anmeldet, kann die in­ter­na­tio­na­le Aus­rich­tung einer Domain bzw. einer URL de­fi­nie­ren, sofern ge­ne­ri­sche Top-Level-Domains zum Einsatz kommen. Bei län­der­spe­zi­fi­schen Do­main­endun­gen übernimmt Google diese Zuordnung sogar selbst. Es steht außer Frage, dass Sie als Website-Betreiber bzw. -Be­trei­be­rin von dieser Funktion pro­fi­tie­ren: Google nutzt diese In­for­ma­tio­nen, um Ihre Seiten optimal zu ka­te­go­ri­sie­ren. Es lohnt sich also auf jeden Fall, Google über lo­ka­li­sier­te Versionen deiner Seite zu in­for­mie­ren.

Sie sollten al­ler­dings niemals vergessen, diese Ein­stel­lun­gen in Ihre SEO-Maßnahmen ein­zu­be­zie­hen. Wenn Sie also zu­sätz­lich Seiten mit dem hreflang-Attribut aus­zeich­nen, sollte dabei keinerlei Wi­der­spruch entstehen. So kann es bei­spiels­wei­se schnell passieren, dass eine Seite nur mit einem Sprach­kür­zel und ohne regionale Spe­zi­fi­zie­rung aus­ge­zeich­net wird, während gleich­zei­tig in den Webmaster Tools ein konkretes Land angegeben ist.

Nützliche hreflang-Tools

Es ist bereits deutlich geworden, dass die Ein­bin­dung des hreflang-Tags in alle re­le­van­ten HTML-Seiten mit einem gewissen Aufwand und einer Menge Code verbunden ist. Je komplexer Ihre mehr­spra­chi­ge Website ist, desto wahr­schein­li­cher ist es daher auch, dass sich bei der Im­ple­men­tie­rung Fehler ein­schlei­chen – selbst wenn Sie die vor­ge­stell­ten, po­ten­zi­el­len Feh­ler­quel­len kennen und im Hin­ter­kopf behalten. Aus diesem Grund ist es emp­feh­lens­wert, Tools zu verwenden, um die Tags zu erstellen und deren Funk­ti­ons­fä­hig­keit in re­gel­mä­ßi­gen Abständen zu über­prü­fen. Einige in­ter­es­san­te Tools finden Sie in der folgenden Auf­lis­tung:

• SISTRIX hreflang Generator: Mit dem kos­ten­frei­en hreflang-Generator aus dem Hause SISTRIX erstellen Sie pro­blem­los Link-Elemente mit hreflang-Attribut für den HTML-Header Ihrer mehr­spra­chi­gen Inhalte. Zu diesem Zweck geben Sie einfach die be­tref­fen­den URLs sowie die ge­wünsch­ten Länder- und Sprach­kür­zel an und ge­ne­rie­ren den Code an­schlie­ßend mit einem Klick auf „Code erstellen“. Zudem ist es möglich, eine Default-Seite zu de­fi­nie­ren.
• SISTRIX hreflang Validator: Wenn Sie Re­fe­ren­zen für ver­schie­de­ne Sprach­ver­sio­nen in Ihr Web­pro­jekt im­ple­men­tiert haben, können Sie von dem ebenfalls von SISTRIX an­ge­bo­te­nen hreflang-Validator Gebrauch machen. Der kos­ten­lo­se Web­ser­vice überprüft für eine an­ge­ge­be­ne URL, ob die gesetzten hreflang-Tags korrekt sind.
• flang: Die Marketing-Firma Dejan SEO stellt Ihnen mit flang eine kos­ten­freie Mög­lich­keit für die Ve­ri­fi­zie­rung Ihrer hreflang-Elemente zur Verfügung. Nach einer kurzen Wartezeit erhalten Sie für alle ein­ge­tra­ge­nen Al­ter­na­ti­ven die de­fi­nier­ten Ziel­spra­chen und -regionen und im Pro­blem­fall auch Op­ti­mie­rungs­vor­schlä­ge für die ge­wünsch­te URL prä­sen­tiert.
• Google Search Console: Die Anmeldung bei Google macht Ihre Seite nicht nur leichter für die Such­ma­schi­ne erfassbar, sondern er­mög­licht Ihnen auch den Zugriff auf diverse Ana­ly­se­werk­zeu­ge zur Op­ti­mie­rung Ihres Web­pro­jekts. Unter der Rubrik „In­ter­na­tio­na­le Aus­rich­tung“ liefert das Dashboard bei­spiels­wei­se auch Angaben über die ein­ge­setz­ten hreflang-Tags inklusive einer Auf­lis­tung fehlender Rück­ver­lin­kun­gen.
• Hreflang Checker: Mit diesem hreflang-Checker können Sie die hreflang-Attribute einer ein­ge­ge­be­nen URL schnell und in über­sicht­li­cher Form prä­sen­tiert 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-Im­ple­men­tie­run­gen ver­bes­sern könnten.