Links sind seit HTML 5 nicht mehr nur Links. Mit dem rel-Attribut, was immer noch häufig vergessen wird, gibt man seinen Links Struktur und semantische Bedeutung. Das Attribut wird, je nach Art, von Browser und Suchmaschinen verwendet um den Kontext des Links besser zu verstehen. Schauen wir uns deshalb die Attribute im Detail an.

Das rel-Attribut

Das Attribut wird dem Link einfach im HTML-Code hinzugefügt. Es ist optional. Hier ein Beispiel für einen “nofollow”-Link:

<a href="http://example.com" rel="nofollow">Link</a>

Groß-Kleinschreibung ist an der Stelle egal. Auch mehrere Attribute sind möglich und werden mittels Leerzeichen getrennt. Insgesamt stehen ein Dutzend verschiedene Attribute zur Verfügung.

Alternate

Alternate beschreibt einen Link zu einem Dokument mit gleichem Inhalt, aber anderer Darbietung, der Klassiker sind hier die Druckansicht ohne die Schnörkel der Webseite oder ein PDF. Suchmaschinen können so erkennen, dass es sich hierbei um keine doppelten Inhalte handelt.

Author

Author beschreibt einen Link zur Seite des Autors. Das kann das Profil im Blog ein, die Über Mich Seite.

Bookmark

Bookmark ist ein schwieriger Kandidat. Entgegen dem Namen wird bei Klick auf einen solchen Link kein Bookmark angelegt. Der Verweis soll eher dazu dienen einen permanenten Link auf die übergeordnete Ebene zu erstellen. Dies kann z.B. ein Link innerhalb des Kapitels zum Anfang des Kapitels mit Überschrift angesehen werden.

Help

Kennzeichnet eine Hilfe-Seite. Verweise mit kontextbasierter Hilfe wären hier als Beispiel zu nennen.

License

Verweist auf die Lizenz der Seite, z.B. den Lizenztext unter der das aktuelle Dokument veröffentlich worden ist.

Noopener

Noopener dient zum Absichern von Links. Links zu anderen Webseiten, welche mit “target=_blank” aufgerufen werden, sollten zusätzlich noch das rel-Attribut “noopener” zugewiesen bekommen. Hintergrund ist, dass ansonsten die aufgerufene Seite über Java-Script Zugriff auf die ursprüngliche Seite bekommt und so z.B. Elemente austauschen kann. Dies kann dann beispielsweise für Phishing Attacken verwendet werden.

Nofollow

Nofollow hatten wir bereits im ersten Beispiel gesehen. Es durfte wohl einer der am Meisten verwendeten rel-Eigenschaften sein. Kurz gesagt, verlinkt man hier Inhalte, die nichts mit dem Text an sich zu tun haben. Suchmaschinen wird so gesagt: hey das ist ein Werbelink, der nix mit dem Text zu tun hat. Dies wird auch gerne verwendet, um Links in Kommentaren zu kennzeichen, welche mit dem eigentlichen Text nicht unbedingt etwas zu tun haben und auch gerne für Spam verwendet werden.

Suchmaschinen können somit solche Links ausfiltern und damit verhindert man potentielle Abwertungen von Suchmaschinen, welche Links als Werbung einstufen. Google möchte beispielsweise, dass man Werbelinks auf diese Art kennzeichnet.

Noreferrer

Normalerweise wird beim Klick auf den Link der Referrer mitgeschickt. Dies sagt der aufgerufenen Webseite, von welcher Seite der Benutzer kommt. Dies erlaubt spannende statistische Auswertungen, da man sehen kann, welche Webseiten auf einen Linken. Doch nicht immer möchte man diese Information mitgeben. Wer das nicht möchte setzt dieses Wert.

Prefetch

Weist Browser an, das verlinkte Dokument zu cachen. Kann z.B. bei Bildern sinnvoll sein, oder bei Dokumenten die der Benutzer mit großer Sicherheit anschließend anschauen wird.

Next und Prev

Kennzeichnet z.B. die nächste oder die vorhergehende Seite in meinem mehrzeiligen Artikel.

Search

Link zur Suchmöglichkeit für eine Webseite. Idealerweise verweist man hier auf die Suchfunktion vom Blog oder der Webseite.

Tag

Verlinkt ein Schlagwort für eine Webseite. Dies kann z.B. in Blogs verwendet werden um thematisch auf eine Rubrik oder ein Tag zu verweisen.

Fazit

Nicht jeden Attribut wird man oft brauchen, aber das rel-Attribut erlaubt Links syntaktisch besser einzuordnen. Einige Elemente sorgen für saubere Verlinkung von Kommentaren und Benutzerinhalten. Andere erlauben die bessere Indizierung bei Google, was sich hoffentlich auch in einem besseren Ranking auswirkt. Deswegen beim Link-Setzen drauf achten!
Moderne Browser unterstützen mittlerweile alle Varianten.