Wie man a href richtig anwendet

Was bringen rel="nofollow", rel="noopener" und rel="noreferrer"

// navigation

Blog


// content

Ein Link, dem Google nicht folgt, um so die Linkpower auf der eigenen Seite zu behalten und JS Injektionen zu verhindern

html

<a href="/en/blog-en" target="_blank" rel="nofollow noreferrer noopener" title="Our Blog">This link is a test</a>

24. Sep 2016

So setzt man Links im Web richtig

Eine wichtige Entscheidung für jedes Webprojekt ist das Setzen von Links. Diese werden für gewöhnlich mit dem HTML-Tag "<a href>" gesetzt. Aber auch hier gibt es wie bei fast allen Webtechnologien einige Kniffe, denen man Beachtung schenken sollte, um sie richtig anzuwenden.

Im Prinzip setzt ein jeder Webentwickler einen Link zu einer anderen Seite, also nicht jener, auf der sich der Benutzer gerade befindet. Es gibt aber auch Links zu Overlays, wobei sich der entsprechend verlinkte Inhalt in einer Art Popup bzw. Lightbox öffnet und so die Anwender nicht von der aufgerufenen Seite wegnavigiert werden.

Zudem gibt es Links zu Downloads, also z.B. einem PDF Dokument. Die Kombination aus beidem wäre nun ein sich in einem Overlay öffnendes PDF Dokument – auch das geht ohne größere Probleme.

Weiterhin bietet sich die Möglichkeit statt auf Seiten Links zu IDs zu setzen. Wollen wir z.B. zu einem bestimmten Inhaltselement auf der Seite verlinken, bietet dies HTML bereits im Standard an:

<a href="#Linkname1">Gehe zu Linkname1</a>
<a name="Linkname1">Hier ist Linkname1</a>

Diese Verbindung besteht ohne jedwede Hinzuschaltung von jQuery oder anderen Javascript-Bibliotheken. Wenn man nun bspw. einen "Smooth-Scroll"-Effekt hinzuschalten will, reicht es meist eine einfache Bibliothek hierfür per <script> Anweisung im Kopf oder vor dem schließenden Bodytag hinzuzufügen (jQuery wird hierbei meist vorausgesetzt und sollte daher vor dieser Bibliothek geladen werden).

Ein wichtiger Faktor beim Linksetzen wird aber häufig falsch oder gar nicht eingesetzt: das Target Attribut.
Wenn man also einen Link zu einer externen Seite setzt (in unserem Beispiel YouTube), sollte dies folgendermaßen passieren:

<a href="http://youtube.com" target="_blank">Link zu YouTube in neuem Tab bzw. Fenster (je nach Benutzereinstellung im Browser)</a>

Eine gute Faustregel ist es alle Links bei denen die Navigation der Seite verschwindet mit diesem Attribut zu versehen. Das heißt, dass auch für PDF Dokumente oder Downloads "_blank" als Ziel gesetzt werden sollte, da es sonst passieren kann, dass Ihre Seite nicht mehr sichtbar ist und die User Experience damit eher negativ belastet würde, da ein jeder Anwender nun manuell zurück auf Ihre Seite navigieren müsste – keine gute Idee.

Es gibt wohl zahlreiche Möglichkeiten mit Links zu experimentieren. So können bswp. Links auf Bilder gesetzt werden oder auch Links auf DIV Container mit Hintergrundbildern und Textinhalten. Hierbei ist aber darauf zu achten, dass bspw. der Internet Explorer häufig die a:hover Anweisungen (beim bewegen des Mauszeigers über den Link ausgelöste Effekte) im Stylesheet dann auch auf diesen Text anwendet und es so häufig zu merkwürdigen Seiteneffekten wie flackernden Texten kommen kann. Daher empfehlen wir die a:hover Anweisungen für solche Elemente gezielt abzuschalten:

.KlasseDesContainers a:hover { color: inherit; } /*  bzw. initial oder auch dieselbe Farbe wie der Text hat */

Viele Webtechnologien ermöglichen es aber auch dynamisch Links zu setzen. Dies ist immer der manuellen Möglichkeit vorzuziehen, da sich die Links dann automatisch anpassen, sollte sich der entsprechende Inhalt ändern. So bietet bspw. Typo3 in Kombination mit realurl die Möglichkeit automatisch SEO konforme URLs zu erstellen und bei entsprechender Anpassung des Seitentitels im Backend alle Links zu dieser Seite anzupassen. Dies vereinfacht die Handhabung gerade größerer Webseiten mit vielen Inhalten deutlich!

In PHP könnte sowas beispielsweise so aussehen:

echo "<a href="index.php?id=$id">$title</a>";

Wobei $id und $title Variablen sind, die dynamisch aus der Datenbank gelesen werden. Wenn man nun selbst SEO konforme URLs basteln möchte, kann man dies durch eine Anpassung der htaccess Datei des Servers erreichen oder aber in einem wirklich einfachen Schritt folgendes tun:

echo "<a href="index.php?id=$id&title=$title">$title</a>";

Dies würde zum Beispiel einen Link erzeugen, der wie folgt aussieht:

index.php?id=93&title=Hier%20ist%20ihr%20SEO%2titel

PHP Experten könnten nun auf die Idee kommen die Leerzeichen mit der Funktion str_replace vorher durch Bindestriche zu ersetzen, um diesen Link schöner zu gestalten.

Sollten Sie Fragen haben, schreiben Sie uns gerne in die Kommentare.

21. Jan 2018

Warum sollte man rel="nofollow", rel="noreferrer" und rel="noopener" nutzen?

rel="nofollow"

Die Auditfunktion von Googles Chrome Browser empfiehlt mittlerweile das Nutzen von rel="nofollow" in allen Links, die in einem neuen Fenster bzw. Tab geöffnet werden, also das Attribut target="_blank" verwenden. Dies macht vorallem auch Sinn, um die Linkpower seiner Seite nicht an externe Webseiten abzugeben. So geht der Google Bot beim Indexieren alle Seiten einer Webseite durch und analysiert deren a href Tags und nimmt verlinkte Seiten mit in den Index. Wenn man nun sehr viele externe Links hat, kann es sein, dass der Sichtbarkeitsindex nach unten geht, dafür aber der von verlinkten Seiten nach oben.

Mehr Informationen von Google

rel="noreferrer"

Dieser Wert gibt an, dass die Headerinformationen der aktuellen Seite nicht an die verlinkte Seite weitergegeben werden sollen. Dies verhindert also, dass verlinkte Seiten sehen können von wo sie verlinkt wurden. Im Prinzip gilt hier die Verwendung je nach Bedarf und ist nicht immer zu empfehlen. Wenn man beispielsweise auf Backlinks der verlinkten Seiten hofft, weil z.B. ein Webmaster die Analysetools aufruft, sollte man diesen Wert eher nicht setzen. Im Prinzip gilt also: Nur nutzen, wenn man seine Seite für verlinkte Seiten verbergen möchte.

rel="noopener"

Dies ist der wichtigste der drei Werte, da er eine Javascript Injection der verlinkten Seite verhindert. Bisher sind die meisten Webentwickler davon ausgegangen, dass sich per _blank verlinkte Seiten in einem neuen Prozess öffnen und so die eigene Seite nicht manipuliert werden kann. Laut Google ist dies aber nicht der Fall, sodass bspw. einer Headermanipulation der neu geöffneten Seite auch das Fenster bzw. den Reiter mit der eigenen Seite manipulieren kann. Somit könnte eine verlinkte Seite von der eigenen wegleiten oder noch gefährlichere Aktionen vornehmen. Daher ist es sehr zu empfehlen diesen Wert bei allen externen Links zu setzen!

Mehr Informationen von Google zu noopener

rel="noopener nofollow noreferrer" kombinieren

Der Link sähe dann in etwa so aus:
<a href="/blog" target="_blank" rel="nofollow noreferrer noopener" title="Unser Blog">Dieser Link ist ein Test</a>

Rating: 3.8. 5 Bewertung(en).
5 anonyme Bewertungen
No rating done at all.
Dein Voting war (0 von 5) Du bist nicht eingeloggt.
Um persönliche Votings abzugeben, kannst du dich einloggen.
Click the rating bar to rate this item Please log on to do ratings

Kommentare

comments powered by Disqus