technisches-seo

Hreflang & HTML-Sprachattribut

Das HTML-Lang-Attribut deklariert die Sprache einer Seite, während Hreflang-Tags Suchmaschinen auf alternative Sprachversionen hinweisen – beides ist unverzichtbar für internationale SEO und Barrierefreiheit.

Autor: ClariSEO-Team

Was ist das HTML-Lang-Attribut?

Das HTML-Lang-Attribut teilt Browsern, Screenreadern und Suchmaschinen mit, in welcher Sprache der Inhalt einer Seite verfasst ist. Es wird direkt im öffnenden <html>-Tag gesetzt:

<html lang="de">

Dieses einfache Attribut hat weitreichende Auswirkungen:

Suchmaschinen nutzen es, um die Seite der richtigen Sprachversion im Index zuzuordnen
Screenreader verwenden es, um die korrekte Aussprache zu wählen – ohne lang="de" wird deutscher Text möglicherweise mit englischer Phonetik vorgelesen
Browser nutzen es für Rechtschreibprüfung, Silbentrennung und Textformatierung

Das richtige Format

Das Lang-Attribut folgt dem BCP 47-Standard der IETF. In der Praxis bedeutet das:

Nur Sprache: Zweistelliger ISO 639-1 Code → lang="de", lang="en", lang="fr"
Sprache + Region: Sprachcode + Regionscode → lang="de-AT" (österreichisches Deutsch), lang="en-US" (amerikanisches Englisch)

Häufige Sprachcodes:

Code	Sprache
`de`	Deutsch
`en`	Englisch
`fr`	Französisch
`es`	Spanisch
`it`	Italienisch
`nl`	Niederländisch
`pt`	Portugiesisch
`ja`	Japanisch
`zh`	Chinesisch

Achtung – veraltete Codes: Einige Sprachcodes wurden ersetzt und sollten nicht mehr verwendet werden: iw → he (Hebräisch), in → id (Indonesisch), ji → yi (Jiddisch). Browser erkennen die alten Codes teilweise noch, aber neuere Tools und Services können Probleme haben.

Was sind Hreflang-Tags?

Hreflang-Tags sind HTML-Elemente im <head> einer Seite, die Suchmaschinen mitteilen, dass alternative Sprachversionen derselben Seite existieren. Sie verhindern, dass Google übersetzte Seiten als Duplicate Content behandelt, und sorgen dafür, dass Nutzer die richtige Sprachversion angezeigt bekommen.

<link rel="alternate" hreflang="de" href="https://example.com/de/seite">
<link rel="alternate" hreflang="en" href="https://example.com/en/page">
<link rel="alternate" hreflang="fr" href="https://example.com/fr/page">
<link rel="alternate" hreflang="x-default" href="https://example.com/en/page">

Jeder Tag sagt: „Diese URL ist die Version für Sprache X." Suchmaschinen verwenden diese Information, um Nutzern je nach Standort und Spracheinstellung die passende Version auszuliefern.

Google beschreibt Regeln, Implementierungsvarianten (HTML, HTTP-Header, Sitemap) und Fehlerquellen in der offiziellen Anleitung zu lokalisierten Seiten.

Zusammenspiel von Lang-Attribut und Hreflang

Die beiden Mechanismen ergänzen sich:

lang-Attribut: Deklariert die Sprache dieser Seite → „Dieser Inhalt ist auf Deutsch"
Hreflang-Tags: Verweisen auf andere Sprachversionen → „Es gibt diese Seite auch auf Englisch und Französisch"

Beide sollten konsistent sein. Eine Seite mit lang="de" sollte in den Hreflang-Tags als hreflang="de" auf sich selbst verweisen.

Warum sind Sprachattribute wichtig für SEO?

Internationale Indexierung

Ohne klare Sprachsignale muss Google selbst erkennen, in welcher Sprache eine Seite geschrieben ist. Das funktioniert bei klar unterscheidbaren Sprachen gut, aber bei ähnlichen Sprachen (Deutsch/Niederländisch, Spanisch/Portugiesisch) oder bei gemischtsprachigen Seiten kann es zu Fehlzuordnungen kommen.

Duplicate-Content-Vermeidung

Wenn du dieselbe Seite in drei Sprachen anbietest, sieht Google zunächst drei sehr ähnliche Seiten mit ähnlicher Struktur. Ohne Hreflang-Tags könnte Google sie als Duplikate werten und nur eine Version indexieren. Hreflang signalisiert: „Das sind keine Duplikate – das sind bewusste Sprachversionen."

Geotargeting

Hreflang mit Regionscodes (de-AT vs. de-DE vs. de-CH) ermöglicht gezieltes Targeting für Länder mit der gleichen Sprache. So sehen österreichische Nutzer die österreichische Version und deutsche Nutzer die deutsche.

Barrierefreiheit

Das lang-Attribut ist kein reines SEO-Element – es ist ein Barrierefreiheits-Standard. Screenreader wie JAWS oder VoiceOver benötigen die Sprachinformation, um Texte korrekt vorzulesen. Fehlt das Attribut, wählt der Screenreader die Systemsprache des Nutzers – mit möglicherweise unverständlicher Aussprache.

Das HTML-Lang-Attribut richtig setzen

Grundregeln

Jede Seite braucht ein Lang-Attribut – es gibt keinen guten Grund, es wegzulassen
Verwende den kürzesten passenden Code – de statt de-DE, es sei denn, du unterscheidest bewusst zwischen Regionen
Regionscodes nur bei Bedarf – nutze de-AT oder de-CH nur, wenn du tatsächlich unterschiedliche Inhalte für diese Regionen anbietest
Konsistenz mit xml:lang – wenn deine Seite beide Attribute hat, müssen sie identisch sein

xml:lang-Attribut

In XHTML-Dokumenten existiert neben lang auch das xml:lang-Attribut:

<html lang="de" xml:lang="de">

In modernem HTML5 ist xml:lang überflüssig – das lang-Attribut allein reicht. Wenn du aber beide verwendest (z. B. für XHTML-Kompatibilität), müssen sie identisch sein. Unterschiedliche Werte verwirren Parser und können die Spracherkennung beeinträchtigen.

Hreflang-Tags richtig implementieren

Pflicht: Selbstreferenz

Jede Seite in einem Hreflang-Set muss einen Tag enthalten, der auf sich selbst verweist. Ohne diese Selbstreferenz kann Google das gesamte Hreflang-Set ignorieren.

<!-- Auf der deutschen Seite: -->
<link rel="alternate" hreflang="de" href="https://example.com/de/seite">  <!-- Selbstreferenz -->
<link rel="alternate" hreflang="en" href="https://example.com/en/page">

x-default als Fallback

Der spezielle Code x-default definiert eine Standardversion für Nutzer, deren Sprache oder Region keinem Hreflang-Tag entspricht:

<link rel="alternate" hreflang="x-default" href="https://example.com/en/page">

Wann x-default nötig ist: Bei drei oder mehr Sprachversionen dringend empfohlen. Er zeigt typischerweise auf die englische Version oder eine Sprachauswahlseite.

Absolute URLs verwenden

Google verlangt ausdrücklich absolute URLs in Hreflang-Tags. Relative Pfade wie /de/seite werden möglicherweise falsch aufgelöst, besonders bei Subdomains oder CDN-Konfigurationen.

<!-- Falsch: -->
<link rel="alternate" hreflang="de" href="/de/seite">

<!-- Richtig: -->
<link rel="alternate" hreflang="de" href="https://example.com/de/seite">

Eine Sprache, ein Tag

Jede Sprach-Region-Kombination darf nur einmal im Hreflang-Set vorkommen. Zwei Tags mit demselben Code, die auf unterschiedliche URLs zeigen, erzeugen einen Konflikt – Google weiß nicht, welche Version die richtige ist.

Erlaubt: - hreflang="en-US" + hreflang="en-GB" → zwei verschiedene Regionsvarianten

Nicht erlaubt: - Zwei Tags mit hreflang="en", die auf unterschiedliche URLs zeigen

Hreflang und Canonical URLs

Die Selbstreferenz-URL im Hreflang-Tag muss exakt mit der Canonical-URL der Seite übereinstimmen. Wenn die Canonical-URL https://example.com/de/seite lautet, darf die Hreflang-Selbstreferenz nicht auf https://www.example.com/de/seite oder http://example.com/de/seite verweisen.

Achte auf: - Gleiches Protokoll (https:// vs. http://) - Gleiche Domain (www. vs. ohne www.) - Gleicher Pfad (mit oder ohne Trailing Slash) - Gleiche Query-Parameter

Inkonsistenzen zwischen Hreflang und Canonical senden widersprüchliche Signale, die dazu führen können, dass Google die Hreflang-Annotationen komplett ignoriert.

Vollständiges Beispiel

Eine dreisprachige Website (Deutsch, Englisch, Französisch) mit korrektem Setup:

<!-- Deutsche Seite: https://example.com/de/ueber-uns -->
<html lang="de">
<head>
  <link rel="canonical" href="https://example.com/de/ueber-uns">
  <link rel="alternate" hreflang="de" href="https://example.com/de/ueber-uns">
  <link rel="alternate" hreflang="en" href="https://example.com/en/about-us">
  <link rel="alternate" hreflang="fr" href="https://example.com/fr/a-propos">
  <link rel="alternate" hreflang="x-default" href="https://example.com/en/about-us">
</head>

Wichtig: Die englische und die französische Seite brauchen die gleichen Hreflang-Tags – jede Seite im Set muss alle Versionen auflisten, einschließlich sich selbst.

Häufige Fehler

Fehlendes oder leeres Lang-Attribut

Der häufigste Fehler: Das <html>-Tag hat gar kein lang-Attribut oder ein leeres (lang=""). Browser und Screenreader können die Seitensprache nicht erkennen, und Suchmaschinen müssen sie erraten.

Ungültiger Sprachcode

Tippfehler im Sprachcode (z. B. lang="deu" statt lang="de" oder lang="jp" statt lang="ja") werden von Browsern ignoriert. Die Seite hat dann effektiv kein deklariertes Sprachattribut.

Ungültiger Regionscode

Ein gültiger Sprachcode mit ungültigem Regionscode (z. B. lang="de-XX") kann Probleme bei lokalisierungsabhängigen Funktionen wie Datumsformat und Zahlenformat verursachen.

Veralteter Sprachcode

Codes wie iw (Hebräisch), in (Indonesisch) oder ji (Jiddisch) sind veraltet und durch he, id bzw. yi ersetzt. Sie funktionieren teilweise noch, bergen aber Kompatibilitätsrisiken.

xml:lang-Diskrepanz

Wenn lang="de" und xml:lang="en" gleichzeitig gesetzt sind, empfängt die Suchmaschine widersprüchliche Signale. Lösung: Beide identisch setzen oder xml:lang komplett entfernen.

Fehlende Hreflang-Selbstreferenz

Jede Seite im Hreflang-Set muss einen Tag mit der eigenen URL enthalten. Fehlt die Selbstreferenz, kann Google das gesamte Hreflang-Set für diese Seite ignorieren.

Fehlendes x-default

Ohne Fallback-Eintrag weiß Google nicht, welche Version Nutzern angezeigt werden soll, deren Sprache nicht im Set enthalten ist. Das kann zu zufälligen Sprachzuweisungen führen.

Doppelte Sprachcodes

Derselbe Sprach-Region-Code in mehreren Tags erzeugt einen Konflikt. Google kann nicht entscheiden, welche URL die korrekte Version ist, und wählt möglicherweise willkürlich eine aus.

Relative URLs in Hreflang-Tags

Relative Pfade wie /de/seite statt https://example.com/de/seite werden von Google möglicherweise falsch aufgelöst. Die Dokumentation verlangt explizit absolute URLs.

Inkonsistente Selbstreferenz-URL

Wenn die Hreflang-Selbstreferenz-URL von der Canonical-URL abweicht (z. B. unterschiedliches Protokoll oder www-Variante), sendet das widersprüchliche Signale an Google.

Zurück zum Glossar