rel=noopener noreferrer

Definition von rel=noopener noreferrer

Im Quellcode der Seite findet man öfters den Tag rel=noopener noreferrer. Doch was bedeutet das eigentlich genau? Dafür müssen wir zuerst den Aufbau eines Link-Tags in HTML

Wenn Sie einen Link in den Inhalt der Webseite einfügen, sieht der Code so aus:

• Die Link-Syntax target=“_blank“ warnt den Browser, den Link in einer neuen Registerkarte zu öffnen, und Ihre Website bleibt in einer eigenen Registerkarte geöffnet.
• Das rel-Attribut des Anker-Tags gibt die Beziehung zwischen dem aktuellen Dokument/der aktuellen Webseite und der verlinkten Webseite/Dokument an.
• Das Attribut rel=noopener ist anwendbar, wenn ein Link ausgewählt wurde, der in einem neuen Browser-Tab geöffnet werden soll. Die gleiche Attributqualität kann auch mit einem rel=noreferrer erreicht werden.

Diese Eigenschaft wurde in ein Anker-Tag aufgenommen, um Sicherheitsaspekte zu berücksichtigen, die von bösartigen Websites ausgenutzt werden können. Mit Hilfe von JavaScript-Funktionen können wir zulassen, dass eine neue Registerkarte über das zugehörige Fenster gesteuert wird.

Wenn Sie mit einer externen Website verlinkt sind, die von dem bösartigen Code betroffen sein könnte, dann kann diese Website die window.opener JavaScript-Eigenschaft nutzen, um digitale Informationen Ihrer Zielgruppe zu stehlen, indem sie auf dem gleichen Prozess Ihrer Seite läuft.

Wenn Sie also rel=“noopener“ oder rel=“noreferrer“ zum Link hinzufügen, wird verhindert, dass der neue Tab die Vorteile der JavaScript window.opener-Funktion nutzt.

In diesem Fall könnnen Sie target=“_blank“ für einen externen Seitenlink in Ihrem Webseiteninhalt verwenden, dann schließen Sie immer rel=“noopener“ oder rel=“noreferrer“ Attribute ein.

Ein rel=“noopener“-Attribut schützt die neue Seite, auf die die Eigenschaft window.opener zugreifen soll, und stellt sicher, dass sie in einem separaten Prozess ausgeführt wird.
Das rel=“noreferrer“ hat eine ähnliche Qualität, verhindert aber auch die Weitergabe der Referrer-Informationen an die neue Seite.

Wie beeinflusst rel=“noopener noreferrer“ Ihre Website?

Das Attribut anchor tag rel=“noopener“ oder rel=“noreferrer“ verbessert die Sicherheit der Website, aber einige Leute wollen es ignorieren, weil sie denken, dass es ihr organisches SERP-Ranking beeinflussen wird.

Es hat keinen Einfluss auf das SEO-Ranking der Website oder die Gesamtleistung Ihrer Website. Tatsächlich schützt es die Vertraulichkeit Ihres Website-Publikums und verhindert externe Websites durch die Verbreitung von schädlichem Code.

Die Suchmaschinen und Analysetools interagieren nicht mit dem Tag rel=“noopener“. Es enthält eine Anweisung an den Browser, die Verwendung des Javascript-Objekts window.opener zu stoppen und einen neuen Thread zur Verarbeitung zu erstellen.

Unterschied zwischen rel=noopener und rel=nofollow

Die meisten Menschen verbinden noopener mit nofollow, aber sie sind völlig getrennt.

Zudem wird Cross-Site-Hacking durch No-Opener-Attribute verhindert und verbessert auch die Sicherheit Ihrer Website. Suchmaschinen betrachten noopener oder noreferrer nicht als SEO-Rankingfaktoren. Der SEO Link Juice Ihrer Webseite wird nicht an die verlinkte Webseite weitergegeben, wenn Sie das Attribut nofollow hinzufügen. Die Verbindung mit der nofollow-Beziehung wird von Suchmaschinen-Crawlern nicht berücksichtigt.

Vorteile von rel=noopener und rel=nofollow

Der größte Vorteil von rel noopener rel noreferrer ist, dass sie einen zusätzlichen Sicherheitsschutz bieten, indem sie die Möglichkeit eines Angriffs durch Cross-Origin-Ressourcenfreigabe (COR) verhindern. COR-Angriffe können ausnutzen, dass der Browser Informationen über den ursprünglichen Link speichert, und beinhalten, dass ein Angreifer das Opfer verfolgt.

Nachteile von rel=noopener und rel=nofollow

Der einzige Nachteil des Einsatzes von rel noopener rel noreferrer ist, dass sie den Benutzer manchmal davon abhalten, Links innerhalb des Browsers zu öffnen, z.B. wenn er auf einer Seite einen Link anklickt, der sich nicht in einem neuen Tab öffnen soll.

Anwendungsfälle

rel noopener rel noreferrer werden in der Regel verwendet, wenn Links auf externe Websites geöffnet werden, z.B. beim Verlinken von Social-Media-Konten oder beim Verlinken auf Seiten, die nicht mit der Website verbunden sind.

Beispiele

Beispiel 1: Wenn Sie einen Link auf eine externe Website hinzufügen, können Sie rel noopener rel noreferrer verwenden, um sicherzustellen, dass der Link in einem neuen Tab geöffnet wird, z.B. `<a href=“https://example.com“ target=“_blank“ rel=“noopener noreferrer“>Link</a>`.

Beispiel 2: Wenn Sie einen Link auf eine interne Seite hinzufügen, können Sie „rel noopener rel noreferrer“ verwenden, um sicherzustellen, dass der Link in demselben Tab geöffnet wird, z.B. `<a href=“https://example.com“ rel=“noopener noreferrer“>Link</a>`.

Fazit

„rel noopener rel noreferrer“ sind HTML-Attribute, die beim Hinzufügen von Links zu externen und internen Seiten verwendet werden können, um Sicherheitsprobleme zu verhindern. Sie sind einfach zu verwenden, bieten jedoch einen zusätzlichen Schutz vor COR-Angriffen und können den Benutzern auch dabei helfen, Links in ihrem Browser zu öffnen.

Es besteht kein Grund zur Sorge um rel=“noopener“ rel=“noreferrer“ Tag, da es Ihr Publikum lediglich vor potenziell schädlichen Links schützt, die seine Tabs entführen könnten.

Dieses Tag-Attribut wird allen internen und externen Links automatisch hinzugefügt, wenn Sie sie in einem neuen Browserfenster öffnen. Ich glaube, Sie werden dieses Tag-Attribut nur entfernen wollen, wenn Sie die Vorteile der JavaScript window.opener-Funktion nutzen wollen.