HTMLAnchorElement.rel — Eigenschaft · JavaScript-Referenz

Signatur

HTMLAnchorElement.rel

Beschreibung

Die Eigenschaft rel spiegelt das HTML-Attribut rel eines <a>-Elements wider. Der Wert ist ein String mit einem oder mehreren Linktypen, die durch Leerzeichen getrennt sind, zum Beispiel "noopener noreferrer", "nofollow", "external" oder "next". Diese Angaben beschreiben, wie das verlinkte Dokument zur aktuellen Seite steht.

Der Wert beeinflusst sowohl die Sicherheit als auch Suchmaschinen und Browserfunktionen:

noopener verhindert, dass die neu geöffnete Seite über window.opener auf die ursprüngliche Seite zugreift.
noreferrer unterdrückt zusätzlich den Referer-Header und schließt noopener mit ein.
nofollow, ugc und sponsored sind Hinweise für Suchmaschinen.

Beim Lesen erhältst du immer den vollständigen Attributwert als String. Fehlt das Attribut, ist das ein leerer String "". Beim Setzen wird das Attribut vollständig ersetzt. Wenn du einzelne Linktypen hinzufügen oder entfernen willst, ohne andere zu überschreiben, ist relList (eine DOMTokenList) meist die bessere Wahl.

Parameter

Name	Typ	Default	Beschreibung
$value	string	""	Nur beim Setzen: ein oder mehrere Linktypen, getrennt durch Leerzeichen, z. B. `"noopener noreferrer"`. Andere Werte als Strings werden in einen String umgewandelt.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Wert des rel-Attributs. Fehlt das Attribut, ist es ein leerer String "".

Beispiele

rel-Wert eines Links auslesen

// HTML: <a id="doku" href="https://example.com" rel="external nofollow">Doku</a>
const link = document.getElementById('doku');
console.log(link.rel);
console.log(link.rel.split(' ').includes('nofollow'));

external nofollow true

Externe Links mit target="_blank" absichern

// Alle Links, die in einem neuen Tab öffnen, erhalten noopener noreferrer
const links = document.querySelectorAll('a[target="_blank"]');

for (const a of links) {
  const isExternal = a.origin !== location.origin;
  if (isExternal) {
    a.rel = 'noopener noreferrer';
  }
}
console.log(`${links.length} Links geprüft`);

z. B. 5 Links geprüft

Linktyp ergänzen, ohne bestehende Werte zu verlieren

const a = document.createElement('a');
a.href = 'https://partner.example/angebot';
a.textContent = 'Zum Angebot';
a.rel = 'external';

// Falsch: a.rel = 'sponsored' würde 'external' überschreiben
// Richtig per String:
const addRel = (el, token) => {
  const tokens = new Set(el.rel.split(/\s+/).filter(Boolean));
  tokens.add(token);
  el.rel = [...tokens].join(' ');
};
addRel(a, 'sponsored');
console.log(a.rel);

// Einfacher mit relList:
a.relList.add('noopener');
console.log(a.rel);
document.body.append(a);

external sponsored external sponsored noopener

Nutzerinhalte (z. B. Kommentare) kennzeichnen

const comment = document.querySelector('.kommentar');
comment?.querySelectorAll('a[href]').forEach((a) => {
  a.rel = 'ugc nofollow noopener';
  a.target = '_blank';
});

// Wichtig · Fallstricke

Überschreiben: Wenn du rel setzt, wird der komplette Attributwert ersetzt. Zum Hinzufügen oder Entfernen einzelner Linktypen verwendest du relList.add() bzw. relList.remove().
Sicherheit (Tabnabbing): Ohne noopener kann eine per target="_blank" geöffnete fremde Seite über window.opener.location deine Seite umleiten, zum Beispiel auf eine Phishing-Seite. Moderne Browser (Chrome 88+, Firefox 79+, Safari 12.1+) behandeln target="_blank" automatisch so, als wäre noopener gesetzt. Für ältere Browser solltest du noopener trotzdem ausdrücklich angeben.
Datenschutz: noreferrer unterdrückt den Referer-Header. Das kann Statistik- und Affiliate-Auswertungen auf der Zielseite beeinträchtigen.
Keine Prüfung: Der Browser prüft nicht, ob die Linktypen gültig sind. Tippfehler wie "noopenner" führen zu keiner Fehlermeldung und haben einfach keine Wirkung.
Groß-/Kleinschreibung: Linktypen werden ohne Beachtung der Groß-/Kleinschreibung ausgewertet. Die Eigenschaft gibt den Wert aber genau so zurück, wie er im Attribut steht.
Kompatibilität: rel wird von allen Browsern unterstützt. relList gibt es erst in neueren Browsern (im Internet Explorer fehlt es).

Siehe auch

HTMLAnchorElement.relList HTMLAnchorElement.target HTMLAnchorElement.href HTMLAnchorElement.referrerPolicy HTMLLinkElement.rel DOMTokenList Window.opener