Signatur
Beschreibung
Die Eigenschaft hreflang des HTMLAnchorElement-Interfaces spiegelt das gleichnamige HTML-Attribut des <a>-Elements wider. Sie enthält ein Sprach-Tag nach BCP 47 (z. B. "de", "en-US", "pt-BR"). Das Tag gibt an, in welcher Sprache das Linkziel verfasst ist.
Der Wert ist ein reiner Hinweis: Der Browser ändert dadurch weder die Navigation noch den Accept-Language-Header. Nützlich ist er für Sprachwähler, für Hilfstechniken und Suchmaschinen sowie für CSS-Selektoren wie a[hreflang="en"], mit denen sich fremdsprachige Links optisch kennzeichnen lassen.
Fehlt das Attribut, gibt die Eigenschaft einen leeren String zurück. Wenn Sie einen Wert zuweisen, wird das Attribut sofort im DOM gesetzt. Der Browser prüft dabei nicht, ob das Sprach-Tag gültig ist.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | string | "" | Beim Setzen: ein BCP-47-Sprach-Tag wie "de" oder "en-GB". Der Wert wird als Attribut hreflang übernommen. |
Rückgabewert
hreflang. Ist das Attribut nicht vorhanden, ein leerer String "".Beispiele
Sprache eines Links auslesen
// HTML: <a id="doku" href="https://example.com/en/docs" hreflang="en">Docs</a>
const link = document.getElementById('doku');
console.log(link.hreflang);
// Link ohne Attribut
const leer = document.createElement('a');
console.log(JSON.stringify(leer.hreflang));Sprachwähler dynamisch aufbauen
const sprachen = [
{ code: 'de', label: 'Deutsch', url: '/de/' },
{ code: 'en', label: 'English', url: '/en/' },
{ code: 'fr', label: 'Français', url: '/fr/' }
];
const nav = document.createElement('nav');
for (const { code, label, url } of sprachen) {
const a = document.createElement('a');
a.href = url;
a.hreflang = code; // setzt das Attribut hreflang
a.lang = code; // Sprache des Linktexts selbst
a.textContent = label;
nav.append(a, ' ');
}
document.body.append(nav);
console.log(nav.innerHTML);Fremdsprachige Links kennzeichnen
const seitenSprache = document.documentElement.lang || 'de';
document.querySelectorAll('a[hreflang]').forEach((a) => {
const ziel = a.hreflang.toLowerCase().split('-')[0];
if (ziel !== seitenSprache.toLowerCase().split('-')[0]) {
a.textContent += ` (${ziel.toUpperCase()})`;
a.title = `Inhalt in Sprache: ${a.hreflang}`;
}
});// Wichtig · Fallstricke
- Nur ein Hinweis:
hreflanghat keinen Einfluss auf die Navigation und legt auch nicht fest, in welcher Sprache der Server antwortet. - Keine Prüfung: Ungültige Tags wie
"deutsch"werden ohne Fehlermeldung übernommen. Zur Prüfung können SieIntl.getCanonicalLocales()verwenden. Diese Funktion wirft bei einem ungültigen Tag einenRangeError. - Groß-/Kleinschreibung: Der Wert wird genau so zurückgegeben, wie er gesetzt wurde. Für Vergleiche sollten Sie ihn normalisieren, z. B. mit
toLowerCase(). - Verwechseln Sie
hreflangnicht mitlang:langbeschreibt die Sprache des Linktexts,hreflangdie Sprache des Linkziels. - Für SEO-Alternativen (hreflang-Annotationen) werten Suchmaschinen vor allem
<link rel="alternate" hreflang="…">im<head>aus, weniger<a>-Elemente. - Die Eigenschaft wird von allen gängigen Browsern seit Langem unterstützt.