rel="nofollow"-Links kennzeichnen

Sammlung von Ideen, um Links mit dem Attribut rel="nofollow" mit Hilfe von CSS, jedoch ohne zusätzliche Grafiken zu kennzeichnen (am Beispiel dieser Seite).

Ein unbesuchter Link
Und hier ein bereits besuchter Link (simuliert)
Unbesucht und unerwünscht dank rel="nofollow"
Unerwünscht und trotzdem besucht

Erläuterungen und weitere Varianten:

• Kennzeichnung eines nofollow-Links, Variante 1
  Ein rotes, durchgestrichenes „(follow)“ hinter dem Link. Präzise und leicht verständlich. Die CSS-Angaben dafür lauten:

  a[rel=nofollow]:after{
    color:red;
    content:"(follow)";
    font-size:12px;
    margin-left:4px;
    text-decoration:line-through;
  }

  Ein Nachteil ist, dass weder die Pseudoklasse :after noch der Selektor [rel=nofollow] im Internet Explorer funktionieren. Dafür ist die Lösung für alle anderen Browser (sogar Opera 6, man glaubt es kaum) um so eleganter. Sie lässt sich auch leicht ins benutzerdefinierte CSS von Firefox und anderen Browsern einsetzen, so dass sie dann für alle Webseiten wirkt.
• Kennzeichnung eines nofollow-Links, Variante 2
  Einfach eine andere Textfarbe, hier rot. Das kann allerdings alles mögliche bedeuten. Außerdem wird der Link durch die Farbe hervorgehoben, als ob er wichtiger wäre, was er ja gar nicht sein soll. Von allen aufgezeigten Möglichkeiten trotzdem eine der besten, weil sie simpel ist und den Lesefluss nicht stört.
• Kennzeichnung eines nofollow-Links, Variante 3
  Durchgestrichen. Simple Kennzeichnung (dies ist kein Link). Kann aber mit <del> verwechselt werden.
• Kennzeichnung eines nofollow-Links, Variante 4
  Farblich gedämpfter Hintergrund, hier grau. Soll andeuten, dass dieser Link unwichtiger ist. Möglich wäre statt dessen auch ein Muster im Hintergrund (gelb-schwarz gestreift, gestrichelt, „Vorsicht Baustelle“ oder ähnlich).
• Kennzeichnung eines nofollow-Links, Variante 5
  Einfach kleinere Schrift. Soll wiederum andeuten, dass dieser Link unwichtiger ist.
• Kennzeichnung eines nofollow-Links, Variante 6
  Gestrichelte statt durchgezogene Unterstreichung. Soll zeigen, dass dies nur ein „halber“ Link ist.
• Kennzeichnung eines nofollow-Links, Variante 7
  Vergrößerter Buchstaben-Abstand.
• Kennzeichnung eines nofollow-Links, Variante 8
  Kapitälchen (Kleinbuchstaben sind kleinere Großbuchstaben).
• Kennzeichnung eines nofollow-Links, Variante 9
  Ein rotes Ausrufezeichen vor dem Link. Geeignet für Informatiker, weil diese das als Negation kennen.
• Kennzeichnung eines nofollow-Links, Variante 10
  Ein rotes „[!]“ hinter dem Link.
• Kennzeichnung eines nofollow-Links, Variante 11
  Die Zieladresse wird angezeigt, damit noch leichter zu erkennen ist, wohin man beim Anklicken gelangt.
• http://www.mich-kann-man-nicht-anklicken-mich-muss-man-kopieren.tld
  Da das Attribut rel="nofollow" außerst fragwürdig ist und sich dessen Nutzung nicht kontrollieren lässt, sollte man Links, denen nicht gefolgt werden soll, ganz einfach nicht als Links auszeichnen (d.h. einfach kein <a href=…> verwenden). Kennzeichnen muss man hier auch nichts.
• Konsequente Extremlösung
  Ein kleines JavaScript setzt auch im Web-Browser konsequent das um, was nofollow fordert: Links mit diesem Attribut sind nicht anklickbar. Sie werden in Text umgewandelt und ihre Adresse im Klartext angezeigt. Für Webseiten-Betreiber ergibt das selbstverständlich keinen Sinn, für die benutzerdefinierten Einstellungen von Firefox und Co. dagegen sehr wohl. Wenn ich für mich entschieden habe, dass ich nofollow-Links niemals anklicken will, ist dieses Skript ungemein hilfreich.

  var links = document.getElementsByTagName("a");
  for (var i = 0; i < links.length; i++)
  {
    if (links[i].rel == "nofollow")
    {
      links[i].parentNode.replaceChild(
        document.createTextNode(
          links[i].firstChild.nodeValue +
          " [" + links[i].href + "]"),
        links[i]);
      i--;
    }
  }

Thiemo Mättig, 2005-02-16