Inhaltsverzeichnis

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.

2011 EinfĂŒhrung des Hreflang-Attributs

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.

YouTube

Mit dem Laden des Videos akzeptieren Sie die DatenschutzerklÀrung von YouTube.
Mehr erfahren

Video laden

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.

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

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.

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

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", ...

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

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.

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.  

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

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.

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.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert