rel=“noopener noreferrer“ – Warum diese zwei Wörter deine Website schützen | OIT GmbH
Kurz & knapp: Wenn du auf deiner Website Links zu anderen Seiten hast, die in einem neuen Tab öffnen (target="_blank"), solltest du IMMER rel="noopener noreferrer" hinzufügen. Warum? Das erklären wir jetzt – ganz ohne Fachchinesisch!
Das Hinzufügen von rel="noopener" ist entscheidend, da es dein Browsingverhalten schützt und die Sicherheit erhöht. Damit verhinderst du, dass externe Seiten dein Verhalten beeinflussen und sicherst deine Daten. Verwende immer rel noopener auf das browsingverhalten für optimale Sicherheit.
Das Problem: Links, die in einem neuen Tab öffnen
Stell dir vor, du hast auf deiner Website einen Link:
<a href="https://example.com" target="_blank">Klick mich</a>Der Link öffnet in einem neuen Tab – super praktisch! Aber: Ohne die richtigen Sicherheitseinstellungen kann die andere Website jetzt auf DEINE Website zugreifen. 😱
Die zwei Sicherheitslücken
Problem 1: window.opener (Sicherheitslücke)
Was passiert ohne noopener?
Wenn jemand auf deinen Link klickt, bekommt die andere Website Zugriff auf ein JavaScript-Objekt namens window.opener. Damit kann diese fremde Seite:
- ❌ Deine Website im ursprünglichen Tab umleiten (z.B. auf eine Phishing-Seite)
- ❌ Informationen über deine Seite auslesen
- ❌ Im schlimmsten Fall: Schadcode ausführen
Beispiel-Angriff (vereinfacht):
// Die fremde Website kann das machen:
if (window.opener) {
window.opener.location = 'https://boese-phishing-seite.com';
}Ergebnis: Der Nutzer kehrt zu deiner Website zurück… aber sieht plötzlich eine gefälschte Login-Seite! 😨
Die Lösung: rel="noopener"
<a href="https://example.com" target="_blank" rel="noopener">Sicherer Link</a>✅ noopener blockiert den Zugriff auf window.opener
✅ Die fremde Seite kann deine Website NICHT mehr manipulieren
✅ Deine Besucher sind geschützt
Problem 2: Referrer-Weitergabe (Datenschutz-Problem)
Was passiert ohne noreferrer?
Wenn jemand auf deinen Link klickt, sendet der Browser automatisch eine Info an die andere Website:
- 📍 Von welcher URL der Besucher kommt
- 📍 Welche Unterseite er besucht hat
- 📍 Manchmal sogar: URL-Parameter (z.B. Suchbegriffe, Session-IDs)
Beispiel:
Dein Besucher ist auf:https://oit.digital/blog/geheimes-angebot?kunde=12345
Wenn er jetzt auf einen externen Link klickt, sieht die andere Website:
Referrer: https://oit.digital/blog/geheimes-angebot?kunde=12345❌ Die fremde Seite weiß jetzt, dass jemand von deinem „geheimen Angebot“ kommt
❌ Die Kunden-ID wird weitergegeben
❌ DSGVO-Problem: Personenbezogene Daten werden ungewollt geteilt
Die Lösung: rel="noreferrer"
<a href="https://example.com" target="_blank" rel="noreferrer">Datenschutz-Link</a>✅ noreferrer verhindert die Weitergabe der Referrer-Info
✅ Die fremde Seite sieht NICHT, von wo der Besucher kommt
✅ Besserer Datenschutz für deine Besucher
✅ DSGVO-konform
Die perfekte Lösung: Beide kombinieren!
<a href="https://example.com"
target="_blank"
rel="noopener noreferrer">
Perfekt geschützter Link
</a>✅ Sicherheit durch noopener
✅ Datenschutz durch noreferrer
✅ SEO-Bonus: Google sieht, dass du auf Sicherheit achtest
Praxis-Beispiele von oit.digital
❌ Vorher (unsicher):
<p>Hier geht es zur Zappelarena:
<a href="https://zappelarena.de/osnabrueck/">
zappelarena.de
</a>
</p>✅ Nachher (sicher & optimiert):
<p>Hier geht es zur Zappelarena:
<a href="https://zappelarena.de/osnabrueck/"
target="_blank"
rel="noopener noreferrer"
title="Besuchen Sie die Zappelarena Osnabrück">
Zappelarena Osnabrück - Indoor-Spielplatz
</a>
</p>Was wurde verbessert?
- ✅
target="_blank"– öffnet in neuem Tab - ✅
rel="noopener noreferrer"– schützt vor Angriffen - ✅
title– hilft Screenreadern - ✅ Beschreibender Linktext statt nackter URL (SEO!)
Wie finde ich unsichere Links auf meiner Website?
Methode 1: Browser-Entwicklertools
- Öffne deine Website
- Drücke F12 (Entwicklertools)
- Console öffnen
- Folgenden Code eingeben:
// Alle Links finden, die target="_blank" haben, aber kein rel="noopener"
document.querySelectorAll('a[target="_blank"]:not([rel*="noopener"])')
.forEach(link => console.log(link.href));Methode 2: WordPress-Plugin
Für WordPress-Nutzer: Moderne WordPress-Versionen fügen noopener automatisch hinzu. Prüfe es mit dem Plugin „Link Checker“.
Methode 3: Screaming Frog SEO Spider
Profi-Tool für große Websites:
- Screaming Frog herunterladen
- Website crawlen
- Filter: „External Links“ → „target=_blank“
- Nach „rel“ Attribut sortieren
Browser-Unterstützung
Gute Nachrichten: Alle modernen Browser unterstützen rel="noopener noreferrer":
- ✅ Chrome 49+ (ab 2016)
- ✅ Firefox 52+ (ab 2017)
- ✅ Safari 12.2+ (ab 2019)
- ✅ Edge 79+ (ab 2020)
- ⚠️ Internet Explorer: Nicht unterstützt (aber: wer nutzt das noch?)
Häufige Fragen (FAQ)
Brauche ich das auch für interne Links?
Nein! Nur für externe Links (zu anderen Domains).
<!-- NICHT nötig: -->
<a href="/impressum" target="_blank">Impressum</a>
<!-- NÖTIG: -->
<a href="https://andere-website.de" target="_blank" rel="noopener noreferrer">
Andere Website
</a>Was ist mit nofollow?
nofollow ist etwas anderes:
noopener noreferrer= Sicherheit & Datenschutznofollow= SEO (sagt Google: „Folge diesem Link nicht“)
Du kannst alle kombinieren:
<a href="https://example.com"
target="_blank"
rel="noopener noreferrer nofollow">
Gesponserte Links
</a>Macht das meine Website langsamer?
Nein! Im Gegenteil: noopener kann die Performance sogar verbessern, weil der neue Tab unabhängig läuft.
Kann ich noreferrer weglassen?
Technisch: Ja (Sicherheit ist durch noopener gewährleistet).
Aber: Für Datenschutz (DSGVO) solltest du noreferrer trotzdem nutzen!
Checkliste: Sichere Links auf deiner Website
✓ Link-Sicherheits-Checkliste
- ☐ Alle externen Links mit
target="_blank"habenrel="noopener noreferrer" - ☐ Linktext ist beschreibend (nicht „hier klicken“ oder nackte URL)
- ☐
title-Attribut für Barrierefreiheit hinzugefügt - ☐ Interne Links funktionieren ohne Fehler
- ☐ Gesponserte/Werbe-Links haben zusätzlich
nofollow - ☐ HTTPS statt HTTP (wo möglich)
Zusammenfassung
| Attribut | Zweck | Schützt vor |
|---|---|---|
noopener |
Sicherheit | window.opener-Attacken |
noreferrer |
Datenschutz | Ungewollter Referrer-Weitergabe |
nofollow |
SEO | PageRank-Weitergabe |
Perfekter Link-Code (Copy & Paste)
<a href="https://externe-website.de"
target="_blank"
rel="noopener noreferrer"
title="Beschreibung der Zielseite">
Beschreibender Linktext
</a>Brauchst du Hilfe bei der Umsetzung?
Die OIT GmbH aus Osnabrück hilft dir gerne dabei, deine Website sicher und DSGVO-konform zu machen:
- ✅ SEO-Audit: Wir finden alle unsicheren Links
- ✅ WordPress-Wartung: Automatische Überprüfung & Fix
- ✅ Security-Check: Komplette Website-Sicherheit
Verwandte Artikel
Hast du eine Frage zu diesem Artikel?
Schreib uns – wir antworten in der Regel innerhalb eines Werktages.