Was ist hreflang?

Hreflang ist ein wichtiges HTML-Tag für Websites mit mehrsprachigen Inhalten. Hreflang-Tags ermöglichen es Suchmaschinen, den Inhalt Ihrer Website in der bevorzugten Sprache der Benutzer:innen anzuzeigen. Die Implementierung von hreflang ist also wichtig für die Benutzungsfreundlichkeit und Sichtbarkeit Ihrer Website.

In diesem Guide gehen wir auf die Vorteile von hreflang-Tags ein und zeigen Ihnen, wie Sie sie in Ihre Website einfügen können.

Warum sind hreflang-Tags wichtig für SEO?

Hreflang-Tags spielen eine entscheidende Rolle für die Suchmaschinenoptimierung (SEO), wenn Sie Nutzer:innen in mehreren Ländern erreichen möchten. Denn das Tag sorgt dafür, dass Suchmaschinen den Inhalt in der richtigen Sprache anzeigen und hilft Ihnen, Duplicate Content zu vermeiden.

Inhalte in mehreren Sprachen anzeigen

Erwägen Sie das Erstellen eines mehrsprachigen Onlineshops, in dem Sie an Kund:innen in mehreren Ländern verkaufen? Dann ist es notwendig, dass Sie hreflang-Tags hinzufügen, da Suchmaschinen hreflang-Tags verwenden, wenn sie bestimmen, in welcher Sprache der Inhalt angezeigt werden soll.

Nehmen wir an, Sie besuchen Netflix von Spanien aus. Selbst wenn Sie Netflix.com in das Suchfeld eingeben, werden Sie die Inhalte der Website wahrscheinlich auf Spanisch sehen. So sollten hreflang-Tags funktionieren, wenn sie korrekt eingefügt werden.

Das Gleiche gilt für den Inhalt Ihrer Website oder Ihres Onlineshops. Wenn auf Ihrer Seite hreflang-Tags fehlen, riskieren Sie, dass Ihre übersetzten Inhalte nicht den richtigen Nutzer:innen angezeigt werden.

Vermeiden Sie Duplicate Content

Mit Hreflang können Sie auch verhindern, dass Suchmaschinen den Inhalt Ihrer übersetzten Seiten als Duplicate Content registrieren. Duplicate Content ist Content, also Inhalt, der mit Inhalten identisch ist, die bereits auf anderen Seiten vorhanden sind.

Dies gilt sowohl für Inhalte auf Ihrer Website als auch anderen Websites. Duplicate Content ist ein Problem, denn Websites mit nicht eindeutigen Inhalten riskieren eine schlechte Platzierung in den Suchergebnissen.

Hreflang-Tags sind wichtig für diese Thematik, weil sie den Suchmaschinen signalisieren, dass die verschiedenen Sprachversionen des Inhalts für Nutzer:innen in mehreren Ländern oder Regionen bestimmt sind.

Stellen Sie sich vor, Sie haben eine Produktbeschreibung für eine handgefertigte Keramikvase geschrieben, die in Ihrem Onlineshop verkauft wird. Die Beschreibungen lassen Sie ins Schwedische, Norwegische und Finnische übersetzen. Dann verhindert das hreflang-Tag, dass Ihre fast identischen Texte als Duplicate Content registriert werden.

Wie sehen hreflang-Tags aus?

Hreflang-Tags bestehen aus einer einfachen und einheitlichen Syntax. Ein gutes Verständnis der hreflang-Struktur ist für die Implementierung der richtigen Tags auf Ihrer Website aber unerlässlich. Nachfolgend sehen wir uns drei konkrete Beispiele für hreflang-Tags an, die in unterschiedlichen Kontexten verwendet werden können.

Hreflang – 3 Beispiele

1. Angenommen, Sie haben einen Reiseblog, in dem Sie spannende Beiträge über Ihre Reisen auf Deutsch, Englisch und Spanisch schreiben. Sie haben viel Zeit mit dem Schreiben und Übersetzen verbracht und möchten sichergehen, dass Ihre Blogbeiträge in den Suchmaschinen korrekt angezeigt werden.
   
   In diesem Fall verwenden Sie diese hreflang-Tags, um zwischen den drei Sprachen zu unterscheiden:
   
   <link rel=”alternate” href=”https://example.com/de/page” hreflang=”de”>
   <link rel=”alternate” href=”https://example.com/en/page” hreflang=”en”>
   <link rel=”alternate” href=”https://example.com/es/page” hreflang=”es”>
   
2. Ein anderes Beispiel wäre eine Zahnklinik in Spanien, die kürzlich den Inhalt ihrer Website ins Portugiesische übersetzt hat, um portugiesische Kund:innen zu gewinnen. Wenn die Zahnklinik auch Seiten auf Englisch hat, sollten ihre hreflang-Tags wie folgt aussehen:
   
   <link rel=”alternate” href=”https://example.com/en/page” hreflang=”en”>
   <link rel=”alternate” href=”https://example.com/es/page” hreflang=”es”>
   <link rel=”alternate” href=”https://example.com/pt/page” hreflang=”pt”>
   
3. Betrachten wir zum Schluss ein Beispiel, bei dem für mehrere Varianten derselben Sprache unterschiedliche Tags erforderlich sind. Stellen Sie sich eine große Online-Nachrichtenplattform vor, die Artikel in britischem, amerikanischem und indischem Englisch verfasst.
   
   Diese Varianten des Englischen haben die folgenden regionalen Sprachcodes: EN-GB, EN-US und EN-IN. Die hreflang-Tags dieser Nachrichtenplattformen sollten wie folgt aussehen:
    
   <link rel=”alternate” href=”https://example.com/en-gb/page” hreflang=”en-gb”>
   <link rel=”alternate” href=”https://example.com/en-in/page” hreflang=”en-us”>
   <link rel=”alternate” href=”https://example.com/en-us/page” hreflang=”en-in”>

Wie sind hreflang-Tags aufgebaut?

Wir haben gerade drei Beispiele dafür gesehen, wie hreflang-Tags aussehen können. Jetzt werden wir ein Tag in kleinere Teile zerlegen und uns ansehen, was die einzelnen Teile bedeuten.

Schauen wir uns ein Tag vom Reiseblog aus den vorherigen Beispielen genauer an.

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

link rel=”alternate”: Der Link in diesem Tag ist eine alternative Version dieser Seite.

hreflang=”es”: Es ist eine Alternative, weil der Inhalt in einer anderen Sprache geschrieben ist, in diesem Fall ist die Sprache Spanisch.

href=”https://example.com/es/page”: Die alternative Seite kann unter dieser URL gefunden werden.

Hreflang-Sprachcodes

Wenn Sie hreflang-Tags für Ihre eigene Website oder Ihren Onlineshop zusammenstellen, können Sie die gleiche Syntax wie in den Beispielen verwenden. Das Einzige, was Sie ändern müssen, ist der Sprachcode, sprich die beiden Buchstaben, die angeben, in welchen Sprachen der Inhalt verfügbar ist. Die Sprachcodes richten sich nach der ISO-Norm 639-1, die weltweit verwendet wird.

Hier ist eine Liste mit einigen davon:

• Deutsch: DE
• Dänisch: DA
• Schwedisch: SE
• Norwegisch: NO
• Arabisch: AR
• Englisch: EN
• Britisches Englisch: EN-GB
• Amerikanisches Englisch: EN-US
• Japanisch: JA

Sie können die Sprachcodes für alle Sprachen leicht online finden.

Hreflang-Tag-Generator

Der eigentliche Prozess der Erstellung von hreflang-Tags ist recht einfach, aber wenn Sie Tags für viele Sprachen und Seiten verwenden müssen, kann das sehr zeitaufwändig sein. Hier können Sie Zeit sparen, indem Sie einen hreflang-Tag-Generator wie diesen verwenden.

3 Tipps, bevor Sie hreflang-Tags einsetzen

Bevor wir uns damit befassen, wie Sie hreflang-Tags in Ihre Website einfügen, sollten wir drei Faustregeln beachten, die das Fehlerrisiko minimieren. Obwohl die Tags selbst recht einfach sind, kann es leicht zu Fehlern kommen, wenn Sie sie falsch einfügen.

1. Hreflang-Tags sind bidirektional: Das bedeutet, dass sie immer in beide Richtungen zeigen müssen. Konkret heißt das, dass wenn das Tag auf Ihrer dänischen Seite auf die französische Seite verweist, das Tag auf der französischen Seite zurück auf die dänische Seite verweisen muss. Auf diese Weise signalisieren Sie den Suchmaschinen, dass Sie beide Seiten verwalten und dass die beiden Seiten miteinander verbunden sind.

2. Selbstreferenzierende hreflang-Tags sind eine gute Idee: Das bedeutet auf gut Deutsch, dass hreflang-Tags nicht nur auf andere Sprachen, sondern auch auf sich selbst verweisen sollten. 
   
   Nehmen wir an, Sie haben dieselbe Kategorieseite in Ihrem Onlineshop auf Englisch (https://example.com/cat-food) und auf Schwedisch (example.com/kattmat). Jede dieser Seiten muss dann diese hreflang-Tags haben:
   
   <link rel=”alternate” hreflang=”en” href=”https://example.com/cat-food”/> 
   <link rel=”alternate” hreflang=”se” href=”https://example.com/kattmat”/> 
    

3. Verwenden Sie x-default-Tags, für mehr Benutzungsfreundlichkeit: Dieses Tag ist sehr nützlich, wenn Sie eine Website mit Inhalten auf Deutsch, Schwedisch und Englisch haben, aber regelmäßig zum Beispiel Besucher:innen aus Dänemark erhalten. 
   
   Hier können Sie hreflang x-default-Tags verwenden, um sicherzustellen, dass Ihre dänischsprachigen Besucher:innen auf die englische Seite geleitet werden, die sie wahrscheinlich besser verstehen als die deutsche.
   
   Die hreflang x-default-Tags sorgen für die Nutzer:innen also für eine bessere Erfahrung auf Ihrer Website, da sie nicht auf einer Seite mit unverständlichem Inhalt landen.
   
   Dieser Tag sieht wie folgt aus:
   
   <link rel=”alternate” hreflang=”x-default” href=”https://example.com/”/> 

Wie werden hreflang-Tags implementiert?

Nachdem wir nun gesehen haben, wie hreflang-Tags aussehen, wollen wir uns ansehen, wie sie implementiert werden. Dazu gibt es je nach Kontext und Inhaltstyp drei Methoden.

Mittels HTML

Die einfachste Methode, um Suchmaschinen zu signalisieren, dass Ihre Seite in mehreren Sprachen vorliegt, ist das Einfügen des hreflang-Tags in den HTML-Code einer Website. Das Tag muss am Anfang des Codes im <head>-Element eingefügt werden.

<head>- ist ein Container für Metadaten und wird zwischen dem <html>-Tag und dem <body>-Tag eingefügt.

Hier ist ein Beispiel für eine Seite, die auf Deutsch, Englisch und Spanisch verfügbar ist.

<!DOCTYPE html> 
< > 
<head> 
  <title>Ihr fantastischer Seitentitel</title> 

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

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

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

 
</head> 
<body> 
 
Ihr magischer Seiteninhalt
 
</body> 
</html> 

Jedes Mal, wenn Sie eine Seite übersetzen, muss ein neues hreflang-Tag zu allen Versionen der Seite hinzugefügt werden. Wenn Sie zum Beispiel die Seite bereits auf Deutsch, Englisch und Spanisch haben, aber beschließen, sie ins Dänische zu übersetzen, muss das dänische hreflang-Tag in den HTML-Code aller Seiten eingefügt werden.

Das bedeutet, dass Sie nun insgesamt vier Tags auf jeder Seite haben, da alle Versionen bidirektional sein müssen und sowohl aufeinander als auch auf sich selbst verweisen.

Diese Methode kann sehr zeitaufwendig sein, vor allem, wenn Sie viele Seiten und Sprachen auf Ihrer Website haben. Hier kann es von Vorteil sein, den oben erwähnten hreflang-Generator zu verwenden.

Verwendung des HTTP-Headers

Wenn Sie Seiten mit Content haben, der nicht im HTML-Format vorliegt, können Sie Ihr hreflang-Tag vorteilhaft in den HTTP-Header der Seite einfügen. Ein Beispiel für diese Art von Inhalt sind PDF-Dateien.

HTTP-Header-Codes enthalten Informationen über die Daten, die von einem Server an einen Client gesendet werden, wie das Datum und die bevorzugte Sprache.

Nehmen wir an, Sie haben die gleiche PDF-Datei in drei verschiedenen Sprachen: Englisch, Deutsch und Schwedisch. Der HTTP-Header in jeder der Dateien sollte dann wie folgt aussehen:

HTTP/1.1 200 OK 

Content-Type: application/pdf 

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

<https://example.com/de/doc.pdf>; rel=”alternate”; hreflang=”de”

<https://example.com/se/doc.pdf>; rel=”alternate”; hreflang=”se”

Über die XML-Sitemap

Die dritte Methode, mit der Sie Ihre hreflang-Tags implementieren können, besteht darin, sie in die XML-Sitemap Ihrer Seite einzufügen. Mehr über Sitemaps können Sie hier lesen. Kurz gesagt ist eine XML-Sitemap eine Datei, die Suchmaschinen Informationen über die einzelnen Seiten Ihrer Website liefert.

Der Hauptvorteil dieser Methode ist, dass Sie alle hreflang-Tags an einem Ort bearbeiten können. Bei der HTML-Methode und der HTTP-Header-Methode müssen Sie jedes Mal, wenn Sie bestehende Inhalte in eine neue Sprache übersetzen, ein neues Tag zu jeder Seite hinzufügen. Das kann ziemlich zeitaufwendig sein.

Wenn Sie sich für diese Methode entscheiden, fügen Sie für jede URL ein <loc>-Element hinzu und fügen <xhtml:link> für jede der Sprachen ein, in denen die Seite verfügbar ist.

Hier können Sie die Anweisungen von Google lesen und ein Beispiel sehen.

HTML-lang vs Hreflang 

HTML-lang ist ebenfalls ein Tag, das zur Optimierung von Websites mit Inhalten in mehreren Sprachen eingesetzt werden kann. Allerdings gibt es einen Unterschied zwischen den beiden Tags.

Der Hauptunterschied besteht darin, dass HTML-lang ein Tag ist, das in HTML eingefügt wird, um Suchmaschinen und Nutzer:innen zu signalisieren, in welcher Sprache die gesamte Website verfasst ist.

Hreflang sendet detailliertere Signale, indem es die Sprachen auf allen einzelnen Seiten Ihrer Website angibt. Dies erleichtert die Anpassung der Inhalte an mehrere Länder und Sprachen.

Die Suchmaschine von Google verwendet kein HTML-lang. Daher wird empfohlen, dass Websites mit Inhalten in mehreren Sprachen das hreflang-Tag verwenden. Microsoft Bing und bestimmte Bildschirmlesegeräte verwenden jedoch HTML-lang. Es kann daher sinnvoll sein, beide zu verwenden, wenn Sie Ihre Website für mehrere Suchmaschinen und Screenreader optimieren wollen.

Hreflang-Tags: unerlässlich für mehrsprachige Websites

Wenn Sie durch das Veröffentlichen von Inhalten in mehreren Sprachen die Benutzungsfreundlichkeit Ihrer Website verbessern und die Besuchszahlen erhöhen möchten, sollten Sie unbedingt wissen, wie man hreflang-Tags erstellt und einbaut.

Eine mehrsprachige Website eröffnet Ihnen eine neue Möglichkeiten, neue Nutzer:innen, neue Leser:innen und mehr Conversions. Wir hoffen, dass dieser Leitfaden Ihnen den Einstieg erleichtert!