hreflang

Als hreflang bezeichnet man ein HTML-Attribut, mit dessen Hilfe man Suchmaschinen kenntlich macht, ob eine Landingpage in mehreren Sprachversionen vorliegt oder regionale Unterschiede aufweist. Letztlich dient eine solche Anmerkung dazu, die für die Nutzer*innen jeweils relevante Sprachversion einer Seite anzuzeigen. Im Folgenden zeigen wir Euch, wo die genauen Anwendungsgebiete von hreflang liegen, was das für Euer SEO bedeutet und wie Ihr es in Eure Seite implementiert.

Direkt zum Inhalt springen:

Anwendungsgebiete von hreflang

Ein hreflang-Attribut kommt am besten immer dann zum Einsatz, wenn es um die Internationalisierung einer Landingpage geht und Ihr dies den Suchmaschinen kenntlich machen wollt. Google empfiehlt in den folgenden Szenarien die Verwendung von hreflang:

  • Seiten mit nahezu identischen Inhalten: Liegt eine Seite mit nahezu identischen Inhalten vor und weist nur geringfügige, regionale Unterschiede auf, ist der Einsatz von hreflang sinnvoll, um Duplicate Content zu verhindern. Das ist beispielsweise dann der Fall, wenn eine Seite Nutzer*innen in der gesamten DACH-Region ansprechen soll. Mit Hilfe der Anmerkung kann hier gesteuert werden, welche Sprachversion und welche Währung Eure Besucher*innen auf der Landingpage sehen würden.
  • Seiten mit nutzergenerierten Inhalten: Die Verwendung von hreflang bietet sich auch an, wenn nur das Template der Website übersetzt wurde, nicht aber die wesentlichen Seiteninhalte. Dies kann im Falle von Online-Foren sinnvoll sein, bei denen nur Navigationselemente und die Fußzeile übersetzt werden.
  • Seiten mit unterschiedlichen Sprachversionen: Selbstverständlich ergibt das Einbinden von hreflang auch dann Sinn, wenn eine Seite in mehreren Sprachversionen vorliegt, wie es beispielsweise häuft bei Online-Shops der Fall ist.

Bedeutung des Attributs für Euer SEO

Eines direkt vorweg: Aktuell bezieht die Suchmaschine von Google die Verwendung von hreflang nicht als unmittelbaren Rankingfaktor für Eure Website mit ein. Dennoch ergibt es durchaus Sinn, die Attribute bei Eurer Onpage Optimierung zu berücksichtigen. Betrachtet man die oben erwähnten Anwendungsgebiete für ein hreflang Anmerkungen, erkennt man nämlich schnell, dass wie sich die Implementierung positiv auf die Usability Eurer Website auswirken kann: Wenn Nutzer*innen automatisch die für sie relevante Lokalisation ausgespielt bekommen, führt das zu einer besseren User*innen-Experience, was sich beispielsweise in einer erhöhten Verweildauer oder Conversion Rate ausdrücken kann. Das wiederum sendet positive Signale an den Google Crawler, der Eure Seite scannt. Übrigens: Noch mehr Insights zum Thema findet Ihr in unserem Beitrag mit Tipps und Tools für erfolgreiches internationales SEO.

Die Bestandteile von hreflang

Im Wesentlichen folgt der Aufbau eines hreflang-Attributs folgendem Schema: <link rel=”alternate” hreflang=”xx-XX” href=”URL />

Die Funktion der einzelnen Elemente erläutern wir an dieser Stelle kurz:

  • <link: Damit wird ein geöffnetes Link-Element deklariert.
  • rel=”alternate”: Wie die Beschreibung bereits suggeriert, verweist rel=”alternate” darauf, dass eine alternative Version der Website vorliegt. 
  • hreflang=”xx-XX”: Mit diesem Befehl werden die Sprach- und die Regionsversion der Website definiert. Die Angabe einer Sprachversion („xx“) ist dabei Pflicht, das Festlegen einer Region („XX“) ist optional. Die Abkürzungen orientieren sich an den internationalen Ländercodes der ISO.
  • href=”URL”: Dies ist die absolute URL des Dokuments in der alternativen Sprachversion.
  • />: Dieser Befehl weist auf ein geschlossenes Link-Element hin.

Für eine Seite, die zusätzlich zur standardmäßigen, deutschen Version zusätzlich noch eine österreichische und schweizer-deutsche Variante enthält, würde die Anmerkung folglich so aussehen: 

Österreichische Version:

<link rel=”alternate” hreflang=”de-AT” href=”https://beispiel-seite.de/at/>

Schweizer Version:

<link rel=”alternate” hreflang=”de-CH” href=”https://beispiel-seite.de/ch/>

Wie Ihr die Attribute implementiert

Es existieren unterschiedliche Herangehensweisen, wenn Ihr hreflang auf Eurer Seite einbauen möchtet. Eine Möglichkeit besteht darin, das Attribut per HTML auf Eurer Website einzubinden. Für Dokumente, die nicht auf HTML basieren, könnt Ihr Eure hreflang-Attribute alternativ in den http-Header einsetzen. Die dritte Option für das Setzen einer hreflang Anmerkung ist die Nutzung einer XML Sitemap. Wie die Varianten funktionieren, zeigen wir Euch im Folgenden:

hreflang per HTML-Tags implementieren

Die vermutlich einfachste Option, um hreflang auf Eurer Website einzubauen, ist die Nutzung von HTML-Tags. Dazu fügt Ihr dem HTML-Code Eurer Website einfach die entsprechenden Sprachversionen-Tags nach dem unten gezeigten Muster hinzu. Bei einer Website, die neben einer deutschen Version auch eine englische und eine spanische Fassung enthalten soll, würde das beispielsweise wie folgt aussehen:

<link rel=”alternate” hreflang=”de” href=”https://example.com />

<link rel=”alternate” hreflang=”es” href=”https://example.com/es />

<link rel=”alternate” hreflang=”en” href=”https://example.com/en />

hreflang im http-Header implementieren

Handelt es sich bei Eurem Dokument nicht um eine HTML-Seite, wie es beispielsweise bei einem PDF der Fall ist, könnt Ihr logischerweise keine HTML-Tags verwenden, um das hreflang-Attribut einzubauen. In einem solchen Fall schafft die Implementierung in den http-Header der Seite Abhilfe. Diese Variante funktioniert übrigens ebenso gut bei gängigen HTML-Seiten. Analog zum oben genannten Beispiel würden also folgende Zeilen ihren Weg in den http-Header Eures Dokuments finden:

Link:

< https://example.com/file.pdf; rel=”alternate”; hreflang=”de” ,

< https://es.example.com/file.pdf; rel=”alternate”; hreflang=”es”,

< https://en.example.com/file.pdf; rel=”alternate”; hreflang=”en” />

hreflang per XML Sitemap implementieren

Die dritte Möglichkeit, um Eure Seiten zu internationalisieren, besteht darin, die einzelnen Varianten in der XML Sitemap zu hinterlegen. Bei dieser Variante muss der Code zusätzlich um das Element xhtml:link ergänzt werden:

<xhtml:link rel=”alternate” hreflang=”de” href=”https://example.com />

<xhtml:link rel=”alternate” hreflang=”es” href=”https://example.com/es />

<xhtml:link rel=”alternate” hreflang=”en” href=”https://example.com/en />

Habt Ihr Eure Seite mit WordPress erstellt? Dann habt Ihr neben den oben genannten Lösungen noch die Option, Eure hreflang-Attribute mittels Plugin einzusetzen. 

Die Alternative zu hreflang

Falls Euch die oben genannten Lösungsansätze zu technisch sind, bietet sich auch eine toolgestützte Variante an, um unterschiedliche Sprachversionen mittels hreflang für Suchmaschinen kenntlich zu machen. Inzwischen existieren nämlich auch verschieden Anbieter, die Eure Website automatisiert übersetzen und ausspielen lassen, ohne, dass Ihr dafür in den HTML-Code oder den http-Header Eurer Seiten eingreifen müsst. Ein Beispiel hierfür ist der Anbieter Weglot, der mittels API-Schnittstelle Eure Websites mit unterschiedlichen Regions- und Sprachfassungen versorgen kann.

Die beliebtesten hreflang Checker

Wollt Ihr die Implementierung in die eigenen Hände nehmen, ist es wichtig, einen Überblick über die Funktionalität Eurer hreflang-Attribute zu behalten. Dabei helfen Euch sogenannte hreflang Checker. Diese Tools überprüfen, ob die in Euren URLs hinterlegten Anmerkungen korrekt funktionieren. Checker für hreflang gibt es zum Teil kostenlos im Internet, bei vielen kostenpflichtigen Softwares sind sie zudem Teil des Funktionsumfangs. Einige Tools aus der OMR Reviews-Community, die eine solche Überprüfungs-Funktion für hreflang enthalten, haben wir für Euch der Einfachheit halber hier schon einmal aufgelistet:

Fazit: Wann Ihr die Attribute benötigt

Fassen wir noch einmal zusammen: Ein hreflang-Attribut benötigt Ihr immer dann, wenn Ihr den Suchmaschinen kenntlich machen wollt, dass Euer Online-Dokument in unterschiedlichen Sprach- oder Regionsversionen vorliegt. Auch wenn die Verwendung einer hreflang Anmerkung keinen direkten Rankingfaktor darstellt, ist sie doch ein wichtiges Instrument, um die Usability für Eure Besucher*innen zu optimieren. Die Implementierung von hreflang findet entweder per HTML, im http-Header Eures Dokuments oder per XML Sitemap statt.