Das hreflang-Tag richtig nutzen

15. Oktober 20183. April 2020 Nils Wessel 0 Kommentare international, webdesign

Vor allem bei multilingualen Websites, ist es wichtig, die Nutzer auf die für sie passende Sprachversion umzuleiten. Abhilfe schafft dabei das hreflang-Tag. Bei falschem Einsatz von hreflang kann der komplette Seitenzugriff verhindert werden. Ein korrekter Einsatz allerdings hilft nicht nur den Usern sich zurechtzufinden, sondern auch dem Google-Bot und somit dem Suchmaschinen-Ranking. Daher folgt hier eine übersichtliche und einfache Anleitung zur Nutzung des hreflang-Attributs.

Inhaltsverzeichnis

Struktur und Aufbau von hreflang

Das hreflang-Attribut ist wie folgt aufgebaut:

<link rel="alternate" hreflang="xx-XX" href="LINK" />

xx–XX: Sprachcode plus optionalen Ländercode

LINK: kanonische URL, auf die verwiesen wird

Es gibt den jeweiligen Sprachcode und die dazugehörige URL an:

<link rel="alternate" hreflang="de" href="https://example.de/" /> <link rel="alternate" hreflang="pl" href="https://example.pl/" />

Der Sprachcode ist nach ISO 639-1 genormt.

Für Websites in der selben Sprache, aber mit länderspezifichen Inhalten werden zusätzlich die entsprechenden Ländercodes eingefügt:

<link rel="alternate" hreflang="de-DE" href="https://example.de/" /> <link rel="alternate" hreflang="de-AT" href="https://example.at/" /> <link rel="alternate" hreflang="de-CH" href="https://example.ch/" />

Die Ländercodes sind nach ISO 3166 genormt. Wikipedia bietet eine Kodierliste aller ISO-3166-1-Codes an. Groß- oder Kleinschreibung der Ländercodes ist für Google nicht relevant. Beides wird akzeptiert und verarbeitet. Der Übersicht halber sind Ländercodes hier groß geschrieben.

Das war bereits alles, was es grundsätzlich zur einfachen Struktur von hreflang zu wissen gibt.

Eine weitere Ergänzung stellt lediglich der x-default-Wert dar:

<link rel="alternate" hreflang="x-default" href="https://example.de/" />

Wenn es für das Land oder für die Sprache keine Regelung gibt, greift dieser Standardwert.

Wann und wo implementiere ich hreflang?

Wenn du eine Website mit verschiedenen Länderversionen hast, hilft das hreflang-Attribut, auf die korrekte länderspezifische Seite zu verweisen. Die entsprechende Länder-Website wird direkt von Google bevorzugt ausgegeben. Befindet sich deine Website noch im Aufbau oder in einer Neustrukturierung für einen Relaunch, kannst du direkt eine sinnvolle Domain-Struktur beachten. Es wird allgmein empfohlen, die jeweilige länderspezifische Top-Level-Domain (TLD) zu registrieren und diese entweder einzeln zu nutzen oder entsprechende Unterverzeichnisse der .com-Domain zu erstellen. Wenn du eine detailliertere Anleitung und Tipps für internationales SEO benötigst, schreibe deine Wünsche und Fragen gerne in die Kommentare.

Eine länderspezifische Unterscheidung ist zum Beispiel sinnvoll, wenn du jeweils eine englische Version deiner Website hast, auf der zum einen die Preise in britischen Pfund und zum anderen die Preise in US-Dollar notiert sind. Um duplicate content zu vermeiden, sollten keine identischen Inhalte unter verschiedenen Domains zu erreichen sein. Daher solltest du nur die Länderversionen erstellen, die Unterschiede enthalten und auf eigene Versionen verweisen. Ein Negativbeispiel sähe wie folgt aus:

<link rel="alternate" hreflang="fr-FR" href="https://example.com/fr/" /> <link rel="alternate" hreflang="fr-NL" href="https://example.com/fr/" /> <link rel="alternate" hreflang="fr-BE" href="https://example.com/fr/" />

Die im Negativbeispiel gezeigten Zeilen verweisen alle auf die selbe Seite. Wenn es keine Unterschiede gibt und auf die selbe URL verwiesen wird, benötigt man auch keine einzelnen hreflang-Attribute. Es genügt für die französische Version in diesem Beispiel eine Zeile:

<link rel="alternate" hreflang="fr" href="https://example.com/fr/" />

Wenn also nur drei Sprachversionen existieren (Beispiel: Deutsch, Französisch und Englisch), dann genügen diese drei Einträge plus x-default und gegebenenfalls zusätzlich zu länderspezifischen Verweisen ein Standardwert für die Sprache – hier der englische Wert zusätzlich zur länderspezifischen britischen Seite:

<link rel="alternate" hreflang="x-default" href="https://example.com/" /> <link rel="alternate" hreflang="en" href="https://example.com/" /> <link rel="alternate" hreflang="en-GB" href="https://example.co.uk/" /> <link rel="alternate" hreflang="de" href="https://example.de/" /> <link rel="alternate" hreflang="fr" href="https://example.fr/" />

Die Codezeilen mit hreflang-Attribut werden händisch in die Website eingefügt. Alternativ gibt es für Content Management Systeme (CMS) wie WordPress geeignete Plugins. Mit dem Editor können diese simpel eingefügt werden. Die Reihenfolge der Zeilen spielt dabei keine Rolle. Der Übersicht halber empfehle ich allerdings auf allen Länderversionen den identischen Code-Block zu verwenden, um Fehler zu vermeiden. Wichtig ist: Die kompletten hreflang-Attribute müssen im head-Bereich aller Seiten eingefügt werden.

hreflang mit XML-Sitemap implementieren

Eine weitere Möglichkeit ist es, die hreflang-Verweise mittels XML-Sitemap einzupflegen. Dies vereinfacht die Pflege enorm. Gerade bei vielen vorhandenen Unterseiten, in die sonst überall die entsprechenden Codezeilen eingefügt und auf die jeweiligen URLs verwiesen werden muss. Für die pflegeleichtere Variante müssen innerhalb der XML-Sitemap zu jeder URL die Referenzen zu allen Sprachversionen eingefügt werden.

Der Aufbau innerhalb der XML-Sitemap sieht wie folgt aus:

<url> <loc>https://example.de/testseite/</loc> <xhtml:link rel="alternate" hreflang="de-DE" href="https://example.de/testseite/" /> <xhtml:link rel="alternate" hreflang="de-AT" href="https://example.at/testseite/" /> <xhtml:link rel="alternate" hreflang="en" href="https://example.com/testpage/" /> </url> <url> <loc>https://example.at/testseite/</loc> <xhtml:link rel="alternate" hreflang="de-DE" href="https://example.de/testseite/" /> <xhtml:link rel="alternate" hreflang="de-AT" href="https://example.at/testseite/" /> <xhtml:link rel="alternate" hreflang="en" href="https://example.com/testpage/" /> </url> <url> <loc>https://example.com/testpage/</loc> <xhtml:link rel="alternate" hreflang="de-DE" href="https://example.de/testseite/" /> <xhtml:link rel="alternate" hreflang="de-AT" href="https://example.at/testseite/" /> <xhtml:link rel="alternate" hreflang="en" href="https://example.com/testpage/" /> </url> ...

Die Einträge müssen zu jeder URL erstellt werden. Das loc-Element gibt die Location, also die URL an. Danach folgen die einzelnen Verweise zu den Sprachversionen. Dazu wird das xhtml:link-Element verwendet. Der Aufbau innerhalb dieses Elements mittels hreflang ist bereits bekannt. Auch die jeweilige URL selbst muss innerhalb der Verweise enthalten sein (im Beispiel oben: example.com hat einen Verweis auf example.com bei Sprache Englisch).

Besonderheiten und Anwendungsbeispiel von hreflang

Das hreflang-Tag funktioniert nur, wenn es auf kanonische URLs zeigt. Dazu äußerte sich vor Kurzem erneut John Müller von Google auf Twitter .

Wichtig für Google ist auch, dass zu jedem hreflang-Verweis ein Verweis zurück existieren muss. Sprich, auf jeder Seite, auf die verwiesen wird, muss auch ein Verweis zurück auf die verweisende Seite existieren.
Wird zum Beispiel von example.com/de-DE/ auf example.com/de-AT/ verwiesen, so muss auch auf example.com/de-AT/ ein Verweis auf example.com/de-DE/ existieren. Das hreflang-Attribut muss also vollständig auf allen Seiten eingefügt werden.

Hier ein Beispiel für einen umfangreichen Einsatz des hreflang-Tags: