HTML-Links verbessern: So setzt man rel-Attribute richtig ein

Mit Hilfe des rel-Attributs kann man Linkbeziehungen zwischen verschiedenen Seiten besser beschreiben (rel = Relation). Damit lässt sich auch der Grund für die Platzierung des Links festlegen. Es gibt eine Reihe fest definierter Attributwerte, die man <a>, <area> und <link>-Elementen zuordnen kann. Diese Attribute sind SEO-freundlich, denn Suchmaschinen können anhand dessen den Inhalt der Website besser verstehen und zuordnen.

In diesem Beitrag gehe ich auf die Attribute ein, die mit <a>-Elementen eingesetzt werden und zu den vom W3C für HTML5 empfohlenen Linktypen gehören.

Das rel-Attribut zuordnen

Folgendes Codebeispiel zeigt einen nofollow-Link. „nofollow“ ist hierbei der Wert, der dem rel-Attribut zugeordnet wurde:

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

Dabei wird nicht zwischen Groß- und Kleinschreibung unterschieden. Wer möchte kann rel=“NOFOLLOW“ oder rel=“noFollow“ schreiben, es würde genauso funktionieren.

Mehrere Attributwerte pro Link

Es ist möglich, dem rel-Attribut mehrere Werte zuzuordnen. Diese werden durch ein Leerzeichen getrennt:

<a href="http://example.com" rel="nofollow noreferrer">Mehrere Werte pro Link</a>

Die 12 verschiedenen rel-Attribute für Hyperlinks

Hier folgt eine Tabelle der Attributwerte die zum HTML5-Standard gehören, und eine kurze Beschreibung, wohin diese Links führen sollen:

Wert Beschreibung
alternate Link zu einer anderen Version des gleichen Inhalts (z. B. Print- oder pdf-Version des Dokumentes)
author Link zu näheren Informationen über den Urheber des Artikels oder der Seite (Autoren-Website oder „Über mich“-Seite)
bookmark Permalink (Lesezeichen)
help Link zu einer Hilfe-Seite
license Link zu einer Seite mit Informationen über die Lizenz des Inhalts
nofollow Link, mit dessen Inhalt man nicht in Verbindung gebracht werden möchte
noreferrer Bewirkt, dass die Internetadresse der eigenen Website nicht an den Server geschickt wird, wenn ein Besucher dem Link folgt.
prefetch Legt fest, dass das verlinkte Dokument sofort gecached wird.
prev Vorheriges zusammengehöriges Dokument (z. B. bei Artikelserien)
next Nächstes zusammengehöriges Dokument
search Link zu einer Suchmöglichkeit für die Website
tag Hiermit kann ein Schlagwort (Keyword) welches thematisch zum akutellen Dokument passt, verlinkt werden.

Das rel=“alternate“ Attribut

Hiermit kennzeichnet man Links, die zum selben Inhalt führen, nur in anderem Format. Das kann ein Link zu einer Printversion des Dokumentes sein oder ein pdf-Dokument zum Download. In dem Fall kann man auch ein type-Attribut hinzufügen, dann weiß der Browser ganz genau, was ihn erwartet:

<a rel="alternate" type="application/pdf" href="http://example.com/dokument.pdf">pdf-Version der Seite</a>

Dieses Attribut kann man auch verwenden, um zu einer Übersetzung des Inhaltes zu verweisen. Hier fügt man noch das hreflang-Attribut hinzu, dieses zeigt an, um welche Sprache es sich handelt:

<a rel="alternate" hreflang="en" href="englische-version.html">Englische Version dieser Seite</a>

Das rel=“author“ Attribut

Damit informiert man den Browser, dass nun Informationen über den Autor der Seite folgen:

<a rel="author" href="ueber-mich.html">Über den Autor</a>

Das rel=“bookmark“ Attribut

Hier geht der Browser davon aus, dass der Link zu einem Permalink führt, der den „Startpunkt“ eines ausgedehnten Dokumentes markiert.

<a rel="bookmark" href="index.html">Link zur Startseite</a>

Das rel=“help“ Attribut

Hiermit markiert man einen Link, der zu hilfreichen Informationen zum aktuellen Dokument führt. Die Hilfe soll sich direkt auf die Seite beziehen, aus der verlinkt wird.

<a rel="help" href="formular-hilfe.html">Informationen zum Ausfüllen dieses Formulars</a>

Das rel=“licence“ Attribut

Mit diesem Attribut kann man dem Hauptinhalt der Seite einen Link zu den Lizenzbedingungen zuweisen. Dieses Attribut sollte zusammen mit dem <main>-Tag genutzt werden. Auf den Inhalt innerhalb des <main>-Bereichs bezieht sich das Attribut. Somit wird nur der Inhalt dieses Bereiches von der Lizenz abgedeckt.
Anhand dieses Codebeispiels wird das deutlich. Die Lizenz bezieht sich nur auf die Datei public-domain-foto.jpg:

<main>
<img src="public-domain-foto.jpg" />
<p>Lizenz: <a rel="license" href="https://creativecommons.org/publicdomain/zero/1.0/">CC0</a></p>
</main>
<aside>
<p>Foto ohne Lizenzangabe:</p>
<p><img src="foto.jpg" /></p>
</aside>

Das rel=“nofollow“ Attribut

Mit dem „nofollow“-Attribut zeichnet man Links aus, mit denen man die eigene Website nicht in Verbindung bringen möchte.

Links die von Benutzern generiert werden

Ein Anwendungsfall ist z. B. wenn in Blogkommentaren oder Foren Links gepostet werden, auf die der Seiteninhaber keinen Einfluss hat. Hier bietet sich dieses Attribut an. Es signalisiert den Suchmaschinen, dass der Seitenbetreiber den Link nicht geprüft hat oder nicht unterstützt.

<a rel="nofollow" href="www.spam-adresse.xy">Die ultimative Abnehmpille hier bestellen!</a>

Bezahllinks

Der nofollow-Link wird auch bei bezahlten Links oder Werbelinks eingesetzt. Plaziert man Links nur aus kommerziellen Zwecken, sollte man das Attribut unbedingt verwenden. Denn mit Verlinkungen zu Websites die keinen Informationsgehalt haben oder kaum Mehrwert bieten, zieht man das eigene Ranking herunter.

<a rel="nofollow" href="www.bezahlter-link.xy">Für diesen Link wurde bezahlt</a>

Das rel=“noreferrer“ Attribut

Links mit diesem Attribut senden bei Klick keinen HTTP Referer Header. Das bedeutet, dass der Server der Zielseite keine Informationen erhält, woher der Besucher kommt. Dieser Klick wird dann als direkter Zugriff gewertet. Somit kann der Inhaber der Zielseite kein Tracking vornehmen. Das Attribut wird aber noch nicht in allen Browsern unterstützt.

<a rel="noreferrer" href="www.example.com>Ursprungsseite wird nicht verraten</a>

Das rel=“prefetch“ Attribut

Dieses Attribut signalisiert dem Browser, dass er den Inhalt hinter dem Link cachen soll, bevor dieser geklickt wird. Das bietet sich an, bei Seiten oder Dateien, die sich der Benutzer höchstwahrscheinlich ansehen wird.

Das lässt sich bei Bildergalerien einsetzen. Wenn ein Besucher auf die kleine Version des Bildes klickt, wird eine größere Version dargestellt. Mit rel=“prefetch“ bringt man den Browser dazu, die große Version des Bildes bereits vorab zu cachen, somit ist das Bild gleich bereit, wenn der Benutzer darauf klickt und Ladezeiten entfallen.

<a rel="prefetch" href="grosses-foto.jpg" title="Foto vergrößern."><img src="kleines-foto.jpg" alt="Vorschaubild" /></a>

Das rel=“search“ Attribut

Mit diesem Attribut bezeichnet man einen Link, der zu einer Suchfunktion für die eigene Internetseite führt. Das kann eine eigene Suchfunktion auf der Website sein oder eine externe Suchmaschine, die eingebunden wurde, um die eigene Site durchsuchen zu lassen.

<!-- Link zum Suchformular -->
<a rel="search" href="#search">Diese Website durchsuchen</a>

<!-- Suchformular -->
<form id="search">
<label for="search-term">Suchbegriff hier eingeben</label>
<input id="search-term" type="search" />
</form>

Das rel=“tag“ Attribut

Dieses Attribut zeichnet Links aus, die zu einer passenden Kategorie oder einem Keyword verlinken. Die Kategorie oder das Schlagwort müssen thematisch zum Thema der aktuellen Seite passen.

Z. B. könnte man diesen Artikel hier mit dem Keyword HTML verlinken:

<p>Dieser Artikel gehört zur Kategorie <a rel="tag" href="http://www.divo-webdesign.de/blog/category/html/">HTML</a></p>

So erleichtert man es den Suchmaschinen, thematisch passende Beiträge zu finden.

Die rel=“next“ und rel=“prev“ Attribute

Das rel=“next“ Attribut zeigt zur nächsten Seite mehrerer zusammengehöriger Seiten. Das rel=“prev“ Attribut zeigt zur vorherigen Seite mehrerer zusammengehöriger Seiten.

Ein Einsatzzweck hierfür ist eine Artikelserie bestehend aus beispielsweise fünf Artikeln. Wir befinden uns gerade auf Seite drei. In einer Navigation kann man mit rel=“prev“ und rel=“next“ auszeichnen, welcher Artikel der vorherige und welcher der nächste ist. So bringt man die Dokumente für die Suchmaschinen in eine sinnvolle Reihenfolge:

<h1>5-teilige Artikelserie</h1>
<ul>
<li><a href="teil1.html">Artikel 1 von 5</a></li>
<li><a rel="prev" href="teil2.html">Artikel 2 von 5</a></li>
<!-- wir lesen gerade Artikel 3 -->
<li>Artikel 3 von 5</li>
<li><a rel="next" href="teil4.html">Artikel 4 von 5</a></li>
<li><a href="teil5.html">Artikel 5 von 5</a></li>
</ul>

Fazit:

Die Attribute für Links erlauben es, den HTML-Code semantisch besser auszuzeichen. Das vereinfacht es den Suchmaschinen, die Seite vollständig zu erfassen und zuzuordnen. Das kann positive Auswirkungen auf das Ranking haben. Die Browserunterstützung ist größtenteils gegeben.

Zudem kann man Suchmaschinen davon abhalten, miese Links mit der eigenen Website in Verbindung zu bringen oder Trackinginformationen weiterzugeben.

Wer sich weiter mit den Thema beschäftigen möchte, findet Informationen über Microformate bei microformats.org und über Microdata bei schema.org. Mit diesen Formaten kann man seinen Code noch besser auszeichnen.

 

1 Kommentare

  1. Hallo,

    sehr informativ und kurz & knackig aufbereitet.
    Habe die Seite gerade auf XING entdeckt.
    Danke dafür. 🙂

    Viele Grüße

    Ralf