hreflang-Attribut: Der Leitfaden für mehrsprachige Webseiten (inkl. Video)

Du hast eine mehrsprachige Webseite und weißt aber nicht was du in Bezug auf SEO alles beachten musst? Warum spielt das hreflang-Attribut dabei eine so große Rolle?

In diesem Guide erfährst du alles Wichtige rund um dieses Thema. Angefangen mit dem allgemeinen Konzept, der Einbindung des HTML-Meta-Element bis hin zur Problemvermeidung.

hreflang-Attribut: Der Leitfaden für mehrsprachige Webseiten (inkl. Video)

In 2018 schrieb John Müller, dass hreflang eines der komplexesten Aspekte von SEO ist und es sehr schnell schwierig werden kann.

Heißt das jetzt also, dass du lieber die Finger von mehrsprachigen Webseiten lassen solltest? Keineswegs! Schaue dir dazu das folgende Video an.

Video: In diesem Video erfährst du, was du als Webmaster:in einer mehrsprachigen Webseite alles beachten musst.

Was bedeutet hreflang?

Hreflang ist ein Attribut, welches im Dezember 2011 von Google eingeführt wurde. Hreflang ist ein HTML-Meta-Element, welches wie folgt aufgebaut ist:

rel=“alternate“ hreflang=“x“

Das Linkattribut sagt Google, dass es den gleichen Inhalt einer Webseite in mehreren Sprach- und Ländervarianten gibt. Die Nutzer bekommen dadurch die Inhalte ihrer Sprache und aus ihrem Land angezeigt.

Um Google mitzuteilen, welche Sprachversion auf einer Seite genutzt wird gibt es verschiedene Wege.

Zum einen können die Länderversionen auf länderspezifische Domains platziert werden, wie test.de (DE) oder test.fr (FR). Google erkennt die Sprache der Webseite mithilfe der TLD (Top-Level-Domain).

Zum anderen kann eine mehrsprachige Webseite auf der gleichen Domain dargestellt werden. Meistens wird eine länderneutrale Domain gewählt, wie z.B. test.com oder test.org und verwendet Länderverzeichnisse, wie z.B. test.com/de, test.com/fr oder test.com/es.

blank

Damit Google weiß, in welchem Sprachverzeichnis sich welche Version befindet, ist es wichtig, dies im Quellcode anzuzeigen.

Das machst du mithilfe des hreflang-Attributs wie folgt: rel=“alternate“ hreflang=“x“

Damit sagst du Google nun, welche Sprache auf der jeweiligen Seite verwendet wird.

Beispiel:

<link rel="alternate" href="http://www.test.com/de/" hreflang="de-DE" />

oder

<link rel="alternate" href="http://www.test.com/fr/" hreflang="fr-FR" />

Wie wird hreflang erstellt?

Im nächsten Schritt tauchen wir tiefer in die Materie ein und zerlegen das hreflang-Attribut in seine Einzelteile. Hierfür nehmen wir eines der vorherigen Beispiele:

<link rel="alternate" href="http://www.test.com/de/" hreflang="de-DE" />
  1. <link –> Öffnung des Links
  2. rel=“alternate“ –> weist darauf hin, dass mindestens eine andere Version des Inhalts vorhanden ist
  3. href=http://www.test.com/de/ –> unter dieser URL befindet sich eine andere Version des Inhalts
  4. hreflang=“de –> in dieser anderen Sprache wird der Inhalt verbindlich angezeigt.
  5. -DE“ –> hierbei handelt es sich um die Ländererkennung von ähnlichen Inhalten in der gleichen Sprache für verschiedene Regionen
  6. /> –> Schließung des Links
blank

Für die Erstellung eines hreflang Link-Attribut Markup für eine mehrsprachige Webseite gibt es verschiedene nützliche hreflang-Generatoren, die dir die Arbeit abnehmen.

blank

Wo wird das hreflang-Attribut implementiert?

Es gibt drei Möglichkeiten, wo das hreflang-Attribut platziert werden kann. Entweder in der Sitemap, im HTTP-Header oder im Seiten-Markup.

Implementierung in der Sitemap

<?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/english/page.html</loc>
    <xhtml:link
               rel="alternate"
               hreflang="de"
               href="https://www.example.com/deutsch/page.html"/>
    <xhtml:link
               rel="alternate"
               hreflang="de-ch"
               href="https://www.example.com/schweiz-deutsch/page.html"/>
    <xhtml:link
               rel="alternate"
               hreflang="en"
               href="https://www.example.com/english/page.html"/>
  </url>
</urlset>

Anwendungsbeispiele

  • Deutsche Sprachvariante
<link rel=“alternate“ href=”https://test.de” hreflang=”de-DE“ />
  • Schweizerdeutsche Sprachvariante
<link rel=“alternate“ href=”https://test.ch” hreflang=”de-CH“ />
  • Österreichische Deutsche Sprachversion
<link rel=“alternate“ href=”https://test.ch” hreflang=”de-AT“ />
blank

Handelt es sich bei deiner URL um eine mehrsprachige Version, kannst du Google mit einer Sitemap mitteilen, dass deine URL über Sprach- und Regionsvarianten verfügt. Wichtig ist, dass du das <loc>-Attribut hinzufügst. Zudem solltest du darauf achten, dass du jeder einzelnen URL einen untergeordneten <xhtml:link>-Eintrag für jede Sprachversion erstellst. Wenn deine Seite fünf Sprachversionen hat, hat deine Sitemap fünf Einträge mit untergeordneten Einträgen, die identisch sind.

Implementierung im HTTP-Header

Link: <url1>; rel="alternate"; hreflang="lang_code_1", <url2>; rel="alternate"; hreflang="lang_code_2", ...

Anwendungsbeispiel

Link: <https://test.de>; rel="alternate"; hreflang="de", <https://test.de/en>; rel="alternate"; hreflang="en", ...
blank

Die Seite, die mit hreflang verknüpft wird, muss sich in den Klammern < > befinden. Das sieht dann zum Beispiel so aus: <https://www.abcd.com> Zudem muss ein Sprachcode lang_code_x mit der jeweiligen Sprache implementiert werden. Eine Übersicht mit den Sprachcodes findest du hier.

Implementierung im Seiten-Markup

<link rel="alternate" hreflang="lang_code" href="url_of_page" />

Anwendungsbeispiele

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

<link rel="alternate" hreflang="en" href="https://test.de/en" />
blank

Mit dem Einfügen des Link-Elements im Header <link rel="alternate" hreflang="lang_code"... > wird Google mitgeteilt, dass deine URL über Sprach- und Regionsvarianten verfügt. Für jede Sprachversion benötigst du bestimmte <link>--Elemente, wie lang_code und url_of_page. Die Link-Elemente müssen sehr weit oben ins <head>-Element platziert werden.

Das “x-Default hreflang“-Attribut

Am 15. April 2013 hat Google den „x-default hreflang“ Verweis eingeführt. Dieser signalisiert den Google Algorithmen, dass die Webseite weder einer bestimmten Sprachversion noch einer Länderversion ausgerichtet ist. Sie wird gleichzeitig als Hauptseite angesehen und jede Seite verweist dann mit dem“ x-default hreflang“-Attribut auf diese Hauptseite. Ideal für .com-Domains, die über mehrere Sprachvarianten verfügen und einen globalen Fokus haben.

So sieht der x-default Verweis in der Praxis aus:

<link rel="alternate" href="http://example.com/de-ch" hreflang="de-ch" /> (mit Spracherkennung)

<link rel="alternate" href="http://example.com/" hreflang="x-default" /> (ohne Spracherkennung)

Der x-default wird in den hreflang-Code eingesetzt und durch die Spracherkennung ersetzt.

blank

Der x-default Verweis wird nicht nur von der Google Suchmaschine akzeptiert, sondern auch von Yandex.

Welchen Nutzen hat das hreflang-Attribut?

Allen voran profitieren die Nutzer von hreflang. Diese bekommen nämlich den Content ihrer Sprache ausgespielt. Das führt dazu, dass die Verweildauer auf der Seite steigt, da z.B. spanischsprachige Nutzer die spanische Version angezeigt bekommen und nicht die englische oder finnische Version, von der sie sich zügig abwenden würden. 

Zudem wird durch hreflang Duplicate Content verhindert und das Google-Ranking kann sich aufgrund der positiven Usersignals, positiv auswirken.  

blank

Bei hreflang handelt es sich nur um eine Anweisung für die Suchmaschine und keinen verbindlichen Befehl. Das heißt, dass es keine 100-prozentige Sicherheit gibt, dass trotz richtiger Einbindung, identischen Inhalte ausgespielt werden bzw. die Ausspielung der richtigen Landingpage von Google selbst bestimmt wird.

hreflang vs. Canonicals – Wo liegt der Unterschied?

Ob und wie hreflang und Canonicals gleichzeitig verwendet werden können, ist vielen oftmals nicht klar. Im Grunde gibt es nur zwei Dinge, die du beachten musst. Zum einen zeigt das Canoncial auf sich selbst, da jede Sprachvariante ihr Original für die jeweilige Sprache ist.  Zum anderen bekommt nur das Original das hreflang-Attribut.

So sieht das dann beispielsweise in der Praxis aus:

  • Deutsche Version
<link rel=“canonical“ href=“https://test.de/“>

<link rel=“alternate“ href=“ https://test.de/“ hreflang=“de-DE“ />

<link rel=“alternate“ href=“ https://test.ch/“ hreflang=“de-CH“ />
  • Schweizer Version
<link rel=“canonical“ href=“https://test.ch/“>

<link rel=“alternate“ href=“ https://test.de/“ hreflang=“de-DE“ />

<link rel=“alternate“ href=“ https://test.ch/“ hreflang=“de-CH“ />
blank

Binde die Canonicals nicht übergreifend auf unterschiedlichen Sprach- und Ländervarianten ein, sondern den hreflang. Allerdings kann innerhalb der Sprach- und Ländervariante (DE-Verzeichnisse) der Canonical eingesetzt werden. 

hreflang-Fehler? So löst du sie!

Kein Selbstverweis

Was häufig vergessen wird, ist die Verknüpfung aller Sprachversionen. Es müssen immer mindestens zwei hreflang-Attribute vorhanden sein.

Beispiel:

https://www.test.de/

Falsch:

<link rel=“alternate“ hreflang=“en“ href=“https://www.test.com/en/“>
<link rel=“alternate“ hreflang=“fr“ href=“https://www.test.de/fr/“>

Richtig:


<link rel=“alternate“ hreflang=“de“ href=“https://www.test.de/“>
<link rel=“alternate“ hreflang=“en“ href=“https://www.test.com/en/“>
<link rel=“alternate“ hreflang=“fr“ href=“https://www.test.de/fr/“>

Hreflang führt zu broken URLs

Suchmaschinen wie Google können den Nutzern keine Inhalte anzeigen, die es nicht gibt. Wenn das hreflang-Attribut zu broken URLs führt, werden diese womöglich übersehen von den Suchmaschinen. Kontrolliere die infizierten Seiten. Prüfe das eingebundene hreflang-Attribut und nehme ggf. entsprechende Änderungen vor.

Hreflang-Auszeichnungen nicht gültig

Du bekommst diese Fehlermeldung, wenn die Syntax bei der Code-Angabe (Sprach- oder Lokalitätscodes) fehlerhaft ist. Ungültige hreflang-Tags werden von Suchmaschinen wie Google nicht beachtet und können somit alternative Seitenversionen übersehen. Beachte, dass du nur Codes benutzt, die den Standards ISO 3166-1 oder ISO 639-1 entsprechen. Prüfe die infizierten Seiten und untersuche die Spalte „Ist gültiger hreflang“ und entferne die unwirksamen hreflang-Tags.

Fazit

Auf den ersten Blick mag hreflang kompliziert erscheinen. Doch wenn du erst einmal verstanden hast, wie du hreflang einsetzt und weißt, was du beachten musst, bist du auf dem richtigen Weg. Sei dir dennoch bewusst, dass die Umsetzung einige Fallstricke bereithält. Arbeite dich also gut in das Thema ein und informiere dich, welche Fehler auftreten können, um diese schnell beheben oder gar vermeiden zu können.

blank Gesina Kunkel
Die Leidenschaft fürs Online Marketing habe ich 2017 während meiner Zeit als Regisseurin entdeckt. Wenige Jahre später habe ich mich dem Online Marketing voll und ganz hingegeben. Die Suchmaschine Google befindet sich im stetigen Wandel mit dem Ziel die Nutzer bestmöglich zu verstehen. Das hat zur Folge, dass Suchmaschinenoptimierung deutlich anspruchsvoller und technisch komplexer wird. Um weiterhin unsere Kunden erstklassige zu betreuen und mit ihnen zu arbeiten, bilde ich mich stetig weiter, gebe regelmäßig Vorträge zu Themen wie Content Distribution auf internationalen Fachkonferenzen und trete als Autorin im MEGA-Magazin in Erscheinung. Privat halte ich mich mental wie körperlich fit, mache Ausdauer- und Krafttraining, höre klassische Musik und habe eine Vorliebe für gutes veganes Essen.