Inhaltsverzeichnis

Hreflang-Attribut – Erklärung & Praxistipps

Lerne, wie das hreflang-Attribut deine mehrsprachige Website erfolgreich macht und deine Inhalte gezielt in den richtigen Sprachen und Regionen platziert.

Auf LinkedIn folgen

Dunkle Grafik mit „SEO-Lexikon“ und „Hreflang-Attribut – Erklärung & Praxistipps“ auf Deutsch, Browser-Icon und Übersetzungssymbole; beyond web Logo unten links. Perfekt zur Erläuterung des Hreflang-Attributs im SEO-Kontext.

‍Hast du dich jemals gefragt, wie es gewisse Websites schaffen, in verschiedenen Sprachen und Regionen optimal gefunden zu werden?

‍In den meisten Fällen liegt das am sogenannten Hreflang-Attribut.

‍Dieses Attribut hilft Suchmaschinen, die richtige Sprachversion deiner Website anzuzeigen.

‍Im folgenden Artikel möchte ich dir nicht nur erklären, was es mit dem Hreflang-Attribut auf sich hat, sondern dir auch in Form eines Anfänger Guide zeigen, wie du diesen für deine Webseite nutzen kannst.

Das Wichtigste in Kürze

  • Das hreflang-Attribut hilft Suchmaschinen, die richtige Sprachversion deiner Website anzuzeigen.
  • Es verbessert die Benutzererfahrung, indem es den Nutzern Inhalte in ihrer bevorzugten Sprache bietet.
  • Eine fehlerhafte Implementierung kann zu SEO-Problemen führen, daher ist Präzision entscheidend.
  • Tools wie die Google Search Console können dir abei helfen, hreflang-Probleme zu identifizieren und zu beheben.

Einleitung

Stell dir vor, du machst eine Reise nach Spanien.

‍In Spanien angekommen, suchst du nach einem guten Restaurant.

‍Du landest auf einer Webseite, und diese zeigt dir automatisch die spanische Version an.

‍Im Normalfall würdest du die Informationen aber lieber auf Deutsch lesen.

‍Genau an diese Stelle kommt das hreflang-Attribut ins Spiel.

‍Es sorgt dafür, dass Nutzer die Inhalte in ihrer bevorzugten Sprache sehen.‍

Was ist das hreflang-Attribut?

Das hreflang-Attribut ist ein HTML-Attribut, das innerhalb eines Link-Elements im HTML-Dokument gesetzt wird und Suchmaschinen mitteilt, welche Sprachversion einer Seite angezeigt werden soll.

‍Der Begriff «link rel alternate hreflang» wird dabei verwendet, um die technische Implementierung dieser Tags zu erläutern.

‍Das Link-Attribut ist besonders nützlich für Websites, die Inhalte in mehreren Sprachen oder für verschiedene Regionen anbieten.

‍Stell dir zum Beispiel vor, dass du eine Website hast, die sowohl englisch als auch deutsche Inhalte aufweist.

‍Mit dem hreflang-Attribut kannst du sicherstellen, dass ein Nutzer aus Deutschland die deutsche Version sieht, während ein Nutzer aus den USA die englische Version angezeigt bekommt.

Die Grafik zeigt zwei Browserfenster mit den Begrüssungen „Good morning“ und „Guten Morgen“, jeweils mit einem Klicksymbol. Links unten befindet sich ein Symbol für die USA und rechts ein Symbol für Deutschland, die jeweils einen Benutzer darstellen. In der Mitte oben steht ein grünes Daumen-hoch-Symbol, das auf Zustimmung oder Zufriedenheit hinweist, vermutlich als Zeichen für eine erfolgreiche sprachliche Anpassung.

‍Die Implementierung von hreflang kann jedoch etwas knifflig sein.

‍Es erfordert eine genaue Angabe der Sprach- und Ländercodes, um sicherzustellen, dass die Suchmaschinen die richtigen Versionen indexieren.

‍Ein kleiner Fehler kann dazu führen, dass die falsche Sprachversion angezeigt wird, was die Benutzererfahrung beeinträchtigen kann.

‍Vor allem die Meta-Elemente spielen hierbei eine wichtige Rolle, da sie den Suchmaschinen Informationen über die sprachliche und geografische Ausrichtung einer Webseite bereitstellen.‍

Warum ist hreflang für SEO relevant?

Hreflang ist für SEO von grosser Bedeutung, da es Suchmaschinen wie Google ermöglicht, die verschiedenen Sprachversionen einer Website zu erkennen und korrekt zu kategorisieren.

‍Das ist vor allem wichtig, wenn deine Webseite in mehreren Sprachen auf unterschiedlichen URLs verfügbar ist.

‍Durch die korrekte Nutzung des hreflang-Attributs kann deine Website besser von Suchmaschinen und Nutzern in verschiedenen Ländern erfasst werden.

‍Das führt nicht nur zu einer verbesserten Sichtbarkeit in den Suchergebnissen, sondern auch zu einer besseren Benutzererfahrung, da die Nutzer Inhalte in ihrer bevorzugten Sprache sehen.

‍Ein gut implementiertes hreflang-Attribut kann somit dazu beitragen, das Problem des Duplicate Content zu vermeiden und die SEO-Leistung deiner Website steigern.‍

Wie ist hreflang aufgebaut?

Das hreflang-Attribut ist ein HTML-Attribut, das innerhalb eines Link-Elements im HTML-Dokument gesetzt wird.

‍Es besteht aus den Attributen rel, href und hreflang, die jeweils eine spezifische Funktion haben.

‍Das Attribut rel gibt an, dass es sich um eine alternative Sprachversion handelt, während href die URL der alternativen Sprachversion enthält.

‍Das hreflang-Attribut selbst enthält die Sprachkürzel, die gemäss den Standards ISO 639 für Sprachen und ISO 3166 für Länder definiert sind.

‍Ein Beispiel für ein hreflang-Tag könnte so aussehen:

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

‍Durch die korrekte Verwendung dieser Attribute können Suchmaschinen die verschiedenen Sprachversionen deiner Website erkennen und entsprechend anzeigen.‍

Praktische Tipps zur Implementierung

Wenn du hreflang auf deiner Website implementieren möchtest, gibt es einiges, was du beachten solltest.

‍Zunächst einmal ist es wichtig, die richtigen Sprach- und Ländercodes zu verwenden.

‍Diese sollten den ISO 639-1 Sprachcodes und den ISO 3166-1 Alpha-2 Ländercodes entsprechen.

‍Du solltest aber auch sicherstellen, dass alle Sprachversionen deiner Seite miteinander verlinkt sind.

‍Das hilft den Suchmaschinen, die Beziehungen zwischen den verschiedenen Versionen zu verstehen.

‍Die Einbindung in den HTML-Head-Bereich erfolgt anschliessend durch das Hinzufügen der entsprechenden Link-Elemente in den Head-Tag deiner HTML-Seiten.‍

Implementierung in HTML, HTTP-Header und XML-Sitemap

Das hreflang-Attribut kann auf drei verschiedene Weisen implementiert werden: im Head-Bereich des HTML-Dokuments, im HTTP-Header oder in der XML-Sitemap.

‍Die Einbindung in den HTML-Head-Bereich erfolgt durch das Hinzufügen der entsprechenden Link-Elemente in den Head-Tag deiner HTML-Seiten.

‍Die Einbindung in einen HTTP-Header funktioniert nach dem gleichen Muster, indem die hreflang-Informationen in den HTTP-Header der Serverantwort eingefügt werden.

‍Die Implementierung des hreflang-Attributs in einer XML-Sitemap ist besonders sinnvoll für grosse, internationale Unternehmen, da sie eine zentrale Verwaltung der Sprachversionen ermöglicht.

‍Jede Methode hat ihre eigenen Vorteile und kann je nach den spezifischen Anforderungen deiner Website gewählt werden.‍

Hreflang-Tags sind bidirektional

Hreflang-Tags sind bidirektional.

‍Doch was bedeutet das?

‍Einfach gesagt, funktionieren diese Tags nur als Gruppe.

‍Das heisst, wenn du einen hreflang-Tag zu einer englischen Seite hinzufügst, und dieser auf eine italienische Variante zeigt, dann muss die italienische Variante ebenfalls ein hreflang-Tag enthalten, der zurück auf die englische Seite zeigt.

‍Diese bidirektionale Verlinkung ist sehr wichtig, damit Suchmaschinen die Beziehungen zwischen den verschiedenen Sprachversionen deiner Website korrekt erkennen können.

‍Ein Beispiel für eine korrekte bidirektionale Verlinkung wäre:

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

‍<link rel=»alternate» href=»https://example.com/it/» hreflang=»it»>

‍Und auf der italienischen Seite:

‍<link rel=»alternate» href=»https://example.com/it/» hreflang=»it»>

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

‍Durch diese gegenseitige Verlinkung stellst du sicher, dass Suchmaschinen die verschiedenen Sprachversionen deiner Website korrekt zuordnen können.‍

X-Default-Tags sind empfehlenswert

Zusätzlich zu den hreflang-Tags sind auch X-Default-Tags sehr empfehlenswert, auch wenn sie nicht verpflichtend sind.

‍X-Default-Tags legen die Standard- oder Fallbackseit fest, die Nutzern angezeigt wird, wenn keine andere Sprachvariante passend ist.

‍Google empfiehlt die Verwendung von X-Default-Tags, um sicherzustellen, dass die richtige Version deiner Website für die richtige Zielgruppe angezeigt wird.

‍Ein Beispiel für ein X-Default-Tag könnte so aussehen:

‍<link rel=»alternate» href=»https://example.com/» hreflang=»x-default»>

‍Durch die Implementierung eines X-Default-Tags kannst du sicherstellen, dass Nutzer, die keine spezifische Sprachversion deiner Website anfordern, dennoch eine passende Version angezeigt bekommen.

‍Das verbessert die Benutzererfahrung und stellt sicher, dass deine Inhalte immer zugänglich sind.‍

Tools und Ressourcen zur Unterstützung

Es gibt verschiedene Tools, die dir bei der Implementierung und Überprüfung von hreflang helfen können.

‍Die Google Search Console ist eines von vielen Tools, dass sich sehr gut eignet, um hreflang-Probleme zu identifizieren.‍

Sie zeigt dir an, ob es Probleme mit der Implementierung gibt und gibt dir Hinweise, wie du diese beheben kannst.

‍Ein weiteres nützliches Tool ist der hreflang-Tag-Generator, der dir hilft, die richtigen Tags für deine Website zu erstellen.

‍Besonders für einen Online-Shop ist es wichtig, hreflang-Tags korrekt zu verwenden, um sicherzustellen, dass auch die Unterschiede in der Währung oder dem CTA-Text berücksichtigt werden.

‍Wenn du dir unsicher bist, wie du hreflang korrekt implementierst, kann es an dieser Stelle sehr hilfreich sein, einen SEO-Experten zu Rate zu ziehen.

‍Jemand, der sich auf diesem Gebiet auskennt, kann dir helfen, unnötige Fehler zu vermeiden und sicherstellen, dass deine Website optimal für die verschiedenen Sprachen und Regionen optimiert ist.‍

Häufige Fehler und wie man sie vermeidet

Bei der Implementierung von hreflang-Attributen kommt es häufiger zu Fehlern.

‍Einer davon ist das Verwenden falscher Sprach- oder Ländercodes.

‍Das kann dazu führen, dass die falsche Sprachversion angezeigt wird oder dass die Seite überhaupt nicht indexiert wird.

‍Um das zu vermeiden, solltest du immer die offiziellen ISO-Codes verwenden und diese sorgfältig überprüfen.

‍Zudem ist es wichtig, Webseiten korrekt in der Google Search Console zu konfigurieren, um sicherzustellen, dass die verschiedenen Sprachversionen richtig zugeordnet werden.

‍Ein weiterer Fehler ist das Fehlen von Rückverweisen.

‍Wenn du eine Seite A hast, die auf Seite B verweist, sollte Seite B auch auf Seite A verweisen.

‍Wenn du das vergisst, kann das dazu führen, dass Suchmaschinen die Beziehungen zwischen den verschiedenen Sprachversionen nicht korrekt verstehen.

‍Stelle also sicher, dass alle Sprachversionen deiner Seite miteinander verlinkt sind, um dieses Problem zu vermeiden.‍

Beyondweb: Dein Partner für SEO-Erfolg

Du möchtest deine Webseite für verschiedene Sprachen und Regionen optimieren und deine Sichtbarkeit in den Suchergebnissen verbessern?

‍Bei Beyondweb bieten wir dir eine kostenlose SEO-Erstanalyse.

‍Durch diese erfährst du nicht nur wie viel Traffic-Potenzial in deiner Website steckt, sondern auch, welche Fehler bessere Google-Rankings verhindern.

‍Wir bieten dir eine umfassende Konkurrenzanalyse und liefern dir konkrete SEO-Tipps, die auf deine Website zugeschnitten sind.

‍Fülle einfach unser Kontaktformular aus – wir freuen uns auf dich!

Erfolgsbeispiel: Airbnb

Es gibt viele Beispiele, die man an dieser Stelle nennen kann, um aufzuzeigen, wie eine erfolgreiche Implementierung von hreflang aussieht.

‍Ein anschauliches Beispiel ist die Website von Airbnb.

‍Airbnb bietet Inhalte in mehreren Sprachen und Regionen an und verwendet hreflang, um sicherzustellen, dass Nutzer die richtige Sprachversion sehen.

‍Die Implementierung von hreflang-Attributen ist demnach für jedes Unternehmen, das mit verschiedenen Sprachen arbeitet, ein wesentlicher Bestandteil der SEO-Strategie.

Du möchtest mehr Kunden?

Durch unsere SEO-Potenzialanalyse gewinnst du Klarheit über den aktuellen Stand deiner Website.

Zwei Männer stehen nebeneinander und zeigen mit beiden Händen nach unten, vor einem weißen Hintergrund.
TeileN auf Social media

Artikel von

Manon Herzig

Ato Herzig ist Mitgründer der Web- und SEO-Agentur Beyondweb GmbH. Er hat über 7 Jahre Erfahrung in den Bereichen Webdesign, SEO und Online-Skalierung im B2C und B2B-Bereich.

Das könnte dich auch interessieren

Eine Person zeigt auf den Bildschirm eines aufgeklappten Laptops, während eine andere Hand über der Tastatur schwebt. Sie arbeitet an einem Projekt für die Content Agentur Basel.
11 Min. Lesezeit
Wie lange dauert es eine Website zu erstellen? Die ehrliche Antwort 2025
Auf vier überlappenden Präsentationsfolien in deutscher Sprache werden SEO-Strategien, Phasen der Customer Journey, aktuelle Ergebnisse der letzten vier Wochen und Methoden zur Erzielung von Klarheit mithilfe von Diagrammen, Schaubildern und Text dargestellt.
11 Min. Lesezeit
Wie läuft der Webdesign Prozess ab?
Mehrere digitale Bildschirme zeigen eine Unternehmenswebseite und die dazugehörigen Werbematerialien für ein Unternehmen namens outecc mit Bildern von Menschen, Text und Markenzeichen in blauen und orangen Farben.
9 Min. Lesezeit
Unterschied Webdesign, UX, UI, Grafikdesign: Was macht wer im Designprozess?
18 Min. Lesezeit
Der perfekte Website-Aufbau 2025
Mehrere Tablets zeigen eine deutschsprachige Nachrichten-Website mit Artikeln, Bildern und einem auffälligen Foto eines Schweizer Flugzeugs, das über verschneite Berge fliegt.
12 Min. Lesezeit
Was ist Webdesign? Ein umfassender Leitfaden
Ein dunkler Laptop-Bildschirm zeigt eine minimalistische Benutzeroberfläche mit verschiedenen Bereichen, Schaltflächen und Rechtecken auf einem schwarzen Hintergrund.
8 Min. Lesezeit
Was ist wichtig beim Webdesign 2025?
Eine Person zeigt auf den Bildschirm eines aufgeklappten Laptops, während eine andere Hand über der Tastatur schwebt. Sie arbeitet an einem Projekt für die Content Agentur Basel.
11 Min. Lesezeit
Wie lange dauert es eine Website zu erstellen? Die ehrliche Antwort 2025
Auf vier überlappenden Präsentationsfolien in deutscher Sprache werden SEO-Strategien, Phasen der Customer Journey, aktuelle Ergebnisse der letzten vier Wochen und Methoden zur Erzielung von Klarheit mithilfe von Diagrammen, Schaubildern und Text dargestellt.
11 Min. Lesezeit
Wie läuft der Webdesign Prozess ab?
Mehrere digitale Bildschirme zeigen eine Unternehmenswebseite und die dazugehörigen Werbematerialien für ein Unternehmen namens outecc mit Bildern von Menschen, Text und Markenzeichen in blauen und orangen Farben.
9 Min. Lesezeit
Unterschied Webdesign, UX, UI, Grafikdesign: Was macht wer im Designprozess?
18 Min. Lesezeit
Der perfekte Website-Aufbau 2025
Mehrere Tablets zeigen eine deutschsprachige Nachrichten-Website mit Artikeln, Bildern und einem auffälligen Foto eines Schweizer Flugzeugs, das über verschneite Berge fliegt.
12 Min. Lesezeit
Was ist Webdesign? Ein umfassender Leitfaden
Ein dunkler Laptop-Bildschirm zeigt eine minimalistische Benutzeroberfläche mit verschiedenen Bereichen, Schaltflächen und Rechtecken auf einem schwarzen Hintergrund.
8 Min. Lesezeit
Was ist wichtig beim Webdesign 2025?

Neue SEO-Insights - alle 2 Wochen!

Zwei Männer stehen zu beiden Seiten eines "Search Experience Journal"-Banners. Darunter wird in einem deutschen Text eine Studie über die Nutzung von künstlicher Intelligenz durch die Generation Z in der Schweiz vorgestellt.

✓ Aktuelle KI- & SEO-Trends auf den Punkt
Praxistipps, Studien & Deep Dives
100% kostenlos & jederzeit kündbar

Eine Gegenüberstellung von acht professionell gekleideten Personen, darunter Männer und Frauen, die von den Schultern aufwärts vor einem hellen Hintergrund gezeigt werden.

Schon 150+ Marketing-Verantwortliche vertrauen auf unsere Insights 🎉