Search
Generic filters
Exact matches only
Filter by Custom Post Type

Link auf neuer Seite öffnen: target_blank und noopener

Lesezeit ca. 10 Minuten

Dass angeklickte Links sich in einem neuen Fenster öffnen, ist keine Seltenheit. Durch diese Einstellung führst Du Deine Besucher zu externen Websites, ohne dass sie Deine Seite vollständig verlassen. Das kann sehr sinnvoll sein, aber leider existiert mittlerweile ein Sicherheitsproblem bei der üblichen Handhabung dieser Funktion. Doch auch dies kann gelöst werden.

Links im neuen Browserfenster öffnen

Wenn Du möchtest, dass ein angeklickter Link sich in einem neuen Browserfenster öffnet muss in dem Standard-HTML-Code für den Link etwas ergänzt werden:

<a href="https://wphelp.de">mein Link</a>

Hinzugefügt wird ein sogenanntes Attribut: target="_blank":

<a target="_blank" href="https://wphelp.de">mein Link</a>

Durch dieses Attribut weiß der Browser, dass beim Klick auf den Link ein neues Browserfenster oder ein neuer Tab geöffnet werden soll.

Wenn Du Dich nicht mit HTML-Code beschäftigen magst, kannst du auch einfach den visuellen Editor in WordPress nutzen und diese Funktion einfach per Klick einschalten. Wir zeigen Dir wie das sowohl im Klassischen Editor als auch dem neuen Gutenberg oder Block Editor geht.

Klassischer Editor

Im Klassischen Editor klickt man zunächst in der visuellen Ansicht auf den Link.

WordPress Links öffnen Classic Editor

Dann erscheint ein kleines Feld (1), das die URL anzeigt mit einem Bleistiftsymbol. Wenn du wiederum auf das Bleistiftsymbol klickst, ändert sich das Feld, so dass Du die URL editieren kannst. Wenn Du nun auf das Zahnradsymbol (2) klickst, erscheint ein größerer Einstellungsbereich in dem sich die Option „Link in einem neuen Tab öffnen“ aktivieren lässt.

Zum Schluss musst Du noch den „Aktualisieren“ Button in dem Fenster klicken und die Änderung für die gesamte Seite „Speichern“ oder „Aktualisieren“.

Gutenberg Editor

Im Gutenberg Editor ist der Ablauf sehr ähnlich. Auch hier klickst Du zunächst auf den Link im Editor.

WordPress Links öffnen Block Editor

Es erscheint ein kleines Feld (1), das die URL anzeigt mit einem Bleistiftsymbol. Wenn du wiederum auf das Bleistiftsymbol klickst, ändert sich das Feld, so dass Du die URL editieren kannst. Wenn Du nun auf das Symbol mit den drei übereinanderliegenden Punkten (2) klickst, erscheint unterhalb ein weiterer Einstellungsbereich in dem sich die Option „In neuem Tab öffnen“ aktivieren lässt (3).

Achtung: Die Änderung wird erst in den Code übernommen, wenn Du abschließend auf das Enter-Symbol links neben den drei übereinanderliegenden Punkten klickst und anschließend die geänderte Seite speicherst bzw. aktualisierst. Klickst Du einfach nur an eine andere Stelle im Editor, verschwindet das Einstellungsfenster einfach und die Änderung wird nicht übernommen.

Es könnte so einfach sein

Sehr lange Zeit brauchtest Du nicht mehr zu dem Thema wissen. Aber leider ergibt sich aus dieser Nutzung von target="_blank" ein Sicherheitsproblem. Deshalb ist seit dem WordPress-Update auf Version 4.7.4 im Frühjahr 2017 zu dem bekannten Attribut noch ein weiteres hinzugekommen.

Das Sicherheitsrisiko „target_blank“

Die einfache Verwendung von target="_blank" öffnet die Möglichkeit für Phishing-Angriffe. Besonders groß ist das Risiko, Opfer eines solchen Phishing-Versuchs zu werden, auf Seiten, die viele von Nutzern generierte Inhalte haben. Facebook ist ein sehr gutes Beispiel dafür. Ein Sicherheitsrisiko ist aber jeder Link, der dieses Attribut ohne Zusätze nutzt.

Jedes Mal, wenn target="_blank" ohne weitere Attribute zum Einsatz kommt, wird im Browser der aufgerufenen neuen Seite eine Referenz zur Ausgangsseite übergeben. Auf diesem Weg kann die neue Seite den Inhalt des Browserfensters der Ausgangsseite manipulieren. Das kann in einigen Fällen gewollt und hilfreich sein, aber es bietet leider auch die Möglichkeit der böswilligen Manipulation.

Beispiel: Du folgst einem Link auf einer Seite wie Facebook zu einer externen Seite. Wenn die aufgerufene Seite entsprechend präpariert wurde, kann, ohne dass Du es bemerkst, die Seite von der Du kommst (Facebook) von Dir unbemerkt verändert werden. Du glaubst später, zu Facebook zurückzukehren, landest aber auf einer ganz anderen Seite, die nur nach Facebook aussieht. Dass jetzt Deine Einloggdaten nochmal abgefragt werden, wundert Dich wahrscheinlich kaum. Schon bist Du ein Phishing-Opfer geworden. Keine Sorge: Facebooklinks sind mittlerweile ebenfalls gegen diese Art der Manipulation abgesichert.

Das Risiko besteht allerdings eher bei Websites, die es vielen verschiedenen Nutzern ermöglichen selbst Links zu veröffentlichen. Trotzdem hat WordPress entschieden das Sicherheitsrisiko für alle zu minimieren.

„noopener noreferrer“ lösen das Problem … eigentlich

Das Sicherheitsproblem lässt sich sehr einfach lösen. Dazu muss neben dem Attribut target="_blank" auch das Attribut rel="noopener" verwendet werden. Auf diese Weise wird dem neuen Fenster der Zugriff auf das aufrufende Browserfenster verweigert.

Deshalb hat WordPress im Frühjahr 2017 mit der Version 4.7.4 eine Funktion ergänzt, die in bestimmten Fällen automatisch für den Zusatz rel="noopener" sorgt:

Kostenloser E-Mail-Kurs: Wir zeigen Dir einsteigerfreundlich die Grundlagen der Suchmaschinenoptimierung - direkt und einfach: Anmelden!

<a target="_blank" rel="noopener" href="https://wphelp.de">mein Link</a>

Da aber der Firefox Browser bis März 2017 rel="noopener" nicht unterstützte, wurde zusätzlich auch das Attribut „noreferrer“ ergänzt:

<a target="_blank" rel="noopener noreferrer" href="https://wphelp.de">mein Link</a>

Wichtig: Zu einer korrekten Verwendung im HTML-Code gehört die Regel, dass es nur ein rel= Attribut pro Link geben soll. D.h. wenn mehrere Befehle ergänzt werden, schreibt man das rel nur einmal und setzt die Angaben getrennt mit Leerzeichen hintereinander in die Klammern:

rel="noopener noreferrer"

Damit ist die Sicherheitslücke auch für ältere Firefoxinstallationen behoben, allerdings können unter Umständen dadurch andere – allerdings weniger sicherheitskritische – Probleme für das Tracking Deiner Website und bei der Verwendung von Affiliateprogrammen entstehen. Falls Dich das interessiert, haben wir das Thema zum Ende dieses Artikels ausführlicher beschrieben.

Verwirrende Updates

Da mittlerweile auch der Firefox Browser die noopener Funktion unterstützt, wurde mit der Veröffentlichung von WordPress 4.8 im Juni 2017 die automatische Ergänzung wieder auf noopener reduziert und damit auf noreferrer verzichtet. Das gilt allerdings nur für den klassischen Editor. Denn erstaunlicherweise erfolgt bei dem mit WordPress 5.0 im Dezember 2018 eingeführten neuen Block oder Gutenberg Editor die automatische Ergänzung wieder mit rel="noopener noreferrer" (Stand Frühjahr 2019).

WordPress ergänzt nicht alle Links

WordPress ergänzt leider nicht alle Links automatisch. Stattdessen werden die Attribute nur in Beiträgen und Seiten automatisch hinzugefügt, die nach der Installation des Updates von Version 4.7.4 im April 2017 erstellt oder bearbeitet wurden. Zudem muss dafür der visuelle Editor von WordPress oder die Link Funktion aus dem Menü des Editors verwendet werden.

Auch Links, die Deine Besucher in den Kommentaren hinterlassen werden nicht automatisch mit rel="noopener" versehen. Darüber hinaus nehmen auch einige Page Builder Plugins diese Änderung nicht vor.

noopener Plugin?

Für Websites, die schon etwas umfangreicher und gut besucht sind, wäre es sehr mühsam alle Links manuell zu überprüfen und ggf. anzupassen. Das kostenfreie Plugin WP External Links ist hier sehr hilfreich.

WordPres Plugin: External Links Screenshot

Mit Hilfe des Plugins lässt sich genau definieren welche Attribute automatisch zugeordnet werden sollen. Dabei können die Einstellungen getrennt für interne und externe Links gesetzt werden und es lassen sich auch Ausnahmen definieren.

Was für Dich zu tun bleibt

Falls Deine WordPress-Installation nicht automatisch die neuen Attribute eingefügt hat, kannst Du dies natürlich selbst angehen. Zuerst solltest Du aber diese Fragen für Dich beantworten, um Dir mitunter viel unnötige Arbeit zu sparen:

  1. Nutzt Du überhaupt target="_blank"? Falls nicht, kannst Du einfach alles beim Alten lassen, denn für Dich ändert sich nichts.
  2. Benutzt Du Analyse-Tools? Diese werden ggf. auch dann durcheinander gebracht, wenn Du interne Links in neuen Fenstern öffnest.
  3. Nutzt Du Affiliate-Programme? Dann solltest Du klären, ob diese Probleme mit „noreferrer“ haben.
  4. Können Fremde Links auf Deiner Seite posten, z. B. in Kommentaren? Solche Links stellen ein höheres Sicherheitsrisiko dar als Links, die Du selbst sorgfältig prüfst, ehe Du sie setzt.

Änderungen manuell oder per Plugin durchführen

Wenn Du die neuen Attribute nutzen willst, musst Du aktiv werden. Am sichersten ist es, jeden Link zu überprüfen, und sich nicht auf eine automatische Änderung zu verlassen. Dies betrifft insbesondere die Kommentarfunktion. Da diese nicht über den Editor läuft, musst Du Links manuell um die neuen Attribute ergänzen.

Einfacher geht es mit dem oben genannten Plugin WP External Links. Es ermöglicht Dir, genau zu definieren, wie interne und externe Links sich verhalten und welche Attribute sie erhalten sollen. Auch Ausnahmen für Affiliate-Links sind möglich.

Das nofollow Problem im Gutenberg Editor

Es gibt ein weiteres Attribut, dass häufig Links beigefügt wird: nofollow. Dies signalisiert Suchmaschinen, dass sie diesem Link nicht folgen sollen. Weitere Infos zu nofollow findest du in dem Artikel „Was bedeutet NoFollow?“ aus der SEO-Küche.

Nun gibt es zwei Probleme, die bei der Nutzung des Block oder Gutenberg Editors auftreten können.

nofollow wird überschrieben

WordPress selbst bietet keine Möglichkeit per Klick einem Link nofollow hinzuzufügen. Dazu muss man in die HTML-Ansicht umschalten (das ist auch nur für einen Block möglich) und dann dem Link das rel="nofollow" hinzufügen:

<a rel="nofollow" href="https://wphelp.de">mein Link</a>

Wenn du aber erst nachdem Du das erledigt hast, über den Menübutton die Einstellung „In neuem Tab öffnen“ für den Link aktivierst, wird Dein rel="nofollow" durch rel="noopener noreferrer" ersetzt.

Dann musst Du nofollow wieder nachtragen, allerdings auf eine bestimmte Weise. Damit kommen wir zu dem zweiten möglichen Problem.

nofollow: Block enthält unerwarteten oder ungültigen Inhalt

Wenn Du im Gutenberg Editor bei aktivierter „In neuem Tab öffnen“ Einstellung einfach rel="nofollow" ergänzt, erscheint plötzlich eine Fehlermeldung an dem Block: „Dieser Block enthält unerwarteten oder ungültigen Inhalt“.

WordPress Gutenberg Editor: unerwarteter ungültiger inhalt

Das kommt daher, dass laut HTML-Syntax für jeden Link nur ein rel="..." gesetzt werden kann.

<a rel="noopener noreferrer" rel="nofollow" href="https://wphelp.de">mein Link</a>

… ist also nicht korrekt!

Du löscht in diesem Fall die rel="nofollow" Angabe und trägst nofollow mit zu den anderen Angaben des vorhandenen rel="noopener noreferrer" Attributes:

<a rel="noopener noreferrer nofollow" href="https://wphelp.de">mein Link</a>

Dann beschwert sich Gutenberg auch nicht mehr.

Achtung: Wenn Du den Link erneut bearbeitest und die Einstellung „In neuem Tab öffnen“ deaktivierst, wird auch das nofollow gelöscht und Du musst es manuell wieder eintragen!

Tücken bei der Nutzung von noreferrer

An dieser Stelle folgen noch ein paar Informationen zu möglichen Problemen bei der Verwendung von noreferrer.

Update: Wie bereits weiter oben ergänzt, wurde mit dem WordPress Update auf Version 4.8 im Juni 2017 auf die automatische Ergänzung von noreferrer verzichtet, aber leider wieder mit dem Gutenberg Editor ab WordPress 5.0 im Dezember 2018 eingeführt.

Die ergänzende Nutzung von noreferrer löst zwar das Sicherheitsproblem, aber kann unter bestimmten Umständen zu weiteren Problemen führen. Diese sind allerdings nicht sicherheitskritisch.

Denn noreferrer verhindert nicht nur wie noopener, dass das aufrufende Fenster nicht manipuliert werden kann, sondern auch, dass die aufrufende Seite dem neuen Fenster Informationen sendet. Auf solche Informationen greifen z.B. Analyse-Tools wie Google Analytics gerne zu und können dadurch nicht erkennen woher der Besucher kommt. Das gleiche gilt für einige Affiliate-Programme.

D.h. bei Affiliateprogramme, die Provisionen zahlen basierend auf der Information von welcher Website der Besucher kam, kann es dann passieren, dass die Affiliatesoftware den Käufer nicht als Besucher von Deiner Seite zuordnen kann und damit entgeht Dir die eigentlich wohlverdiente Provision.

Die meisten Affiliateprogramme funktionieren glücklicherweise darüber, dass der eigentlichen URL ein Code angehängt wird über den die verlinkte Seite feststellen kann von wem der Verkauf vermittelt wurde. Wenn Du mehr zu diesem Thema wissen möchtest, ist der Artikel „Schadet der WordPress-„noreferrer“ Amazon Affiliates?“ von Peer Wandiger empfehlenswert.

Convert Pro Popup Plugin Test

Convert Pro Popup Plugin Test & Anleitung 2019

Convert Pro ist ein sehr gutes Popup Plugin, das wir getestet haben und Du findest eine Anleitung, wie Du Dein erstes eigenes Popup erstellen kannst.

Elementor Popup Builder Test & Anleitung 2019

Elementor Popup Builder Test & Anleitung

Mit dem Elementor Popup Builder lassen sich tolle Popups und Optins erstellen. Wir haben ihn getestet und eine Anleitung erstellt.

Beaver Builder Test

Beaver Builder Test 2019

In unserem Beaver Builder Test nehmen wir das WordPress Page Builder Plugin genau unter die Lupe inkl. des Theme Builder Addons Beaver Themer.

Möchtest Du mehr zu WordPress?

Hol' Dir jetzt unseren kostenlosen Newsletter

15585

Einfach mehr Google-Besucher

Jetzt zum kostenlosen Kurs anmelden

15856
15585

Bitte prüfe Dein E-Mail-Postfach

Du musst Deine Anmeldung noch bestätigen!

Vielen Dank für Deine Anmeldung

15856
15585

Einfach mehr Google-Besucher

Jetzt zum kostenlosen Kurs anmelden

15856
15585

Bitte prüfe Dein E-Mail-Postfach

Du musst Deine Anmeldung noch bestätigen!

Vielen Dank für Deine Anmeldung

15856

Abonniere unseren Newsletter!

JOIN THE ELITE CLUB

3137

Du willst regelmäßig Informiert werden, wenn wir neue Artikel, Tipps und Tricks rund um WordPress veröffentlichen? Dann trage Dich jetzt ein! Zusätzlich kannst Du unsere Convert Pro Vorlage herunterladen.

Vielen Dank für Deine Anmeldung!

 

Du musst jetzt nur noch den Link in der von uns zugesandten Bestätigunsemail anklicken. Falls Du keine erhalten hast, schau bitte auch in Deinem Spamordner nach.

 

Am besten trägst Du unsere E-Mailadresse newlsetter@wphelp.de in die Whitelist Deines E-Mailprogramms oder Anbieters ein.

Nur noch ein Schritt!