10.11.2013

Social-Bookmark Dienste optimiert einbinden

Durch die Dominanz der großen sozialen Netzwerke (Facebook, Google+ & Co.) fristen Social-Bookmark-Dienste doch eher ein Nischendasein. Ich denke daher, dass in ein paar Jahren nur noch ganz wenige Bookmark-Dienste überleben werden (z.B. Delicious). Nichtsdestotrotz werden auf vielen Webseiten Verlinkungen zu Social-Bookmark-Diensten angeboten. Die Dienste bieten i.d.R. auch gleich die passenden Scripte zum Verlinken an. Wenn Sie diese Scripte 1:1 übernehmen, ist dies aber keinesfalls die optimalste Lösung.

Standardverlinkung am Beispiel Linksilo.de

Die Verlinkung erfolgt hier a) als normaler Link über href und b) über den onClick-Event per Javascript. Des Weiteren ist der Link ein dofollw-Link, d.h. es fließt ein Teil des „Link-Juice“ von Ihrer Website ab. Wenn Sie die Verknüpfung z.B. auf 100 Blogseiten eingebaut haben, ist der Verlust an „Link-Juice“ schon erheblich. Falls Sie mehrere Social-Bookmark-Dienste auf diese Art und Weise eingebunden haben, ist der Verlust natürlich entsprechend noch größer. Unabhängig davon ist es eine ganze Menge Sourcecode für einen kleinen Link.

Verlinkung auf nofollow setzen hilft nur zum Teil

Durch das Hinzufügen des rel=“nofollow“ Attributes an den Verlinkungen könnte man meinen, das Problem gelöst zu haben. Das ist aber nicht ganz der Fall. Wenn Sie, wie oben angenommen, 100 Blogseiten mit mehreren Social-Bookmark-Diensten verlinken, so haben Sie eine große Anzahl an nofollow-Links auf Ihrer Website erzeugt. Mit nofollow-Links sollten Sie aber sparsam umgehen, da sonst ein unnatürliches Link-Bild entsteht, was aus SEO-Sicht nicht optimal ist. Des Weiteren wird der „Link-Juice“ nicht automatisch auf die anderen Links verteilt, sondern er versickert einfach.

Einbindung der Social-Bookmarks per Javascript

Wenn Sie sich bei der Verlinkung ganz auf Javascript zurückziehen, können Sie dieses Problem umgehen d.h. als Link <a href=“#“ onClick:... setzen. Jetzt höre ich aber schon die Frage: „Was ist, wenn der Besucher Javascript ausgeschaltet hat?“. Dann funktioniert es eben nicht. Nachteil dieser Version ist, dass immer noch recht viel Quellcode benötigt wird, um den Aufruf zu ermöglichen.

Einbindung der Social-Bookmarks über Event-Handler

Als Alternative sehe ich die Einbindung über den Event-Handler in einer ausgelagerten Javascript-Datei. So muss nur minimaler Quellcode in den Webseiten eingebaut werden. Ein nofollow ist nicht mehr notwendig. Der „Link-Juice“ versickert nicht und die Wartung in der externen Datei ist ebenfalls leichter möglich. Durch die Implementierung dieser Methodik verbessert sich natürlich auch das Content-Quellcode-Verhältnis der Webseiten, was natürlich einen gewissen Beitrag zur on-Page Optimierung leistet. So steht in der Webseite nur noch, z.B.:
<a href="#" title="Linksilo"></a>
Alles Andere steht in der externen Javascript-Datei. Wenn man in seiner Website sowieso schon jQuery verwendet, kann man den Event-Handler auch gleich mit jQuery realisieren. Es geht aber ebenso mit einfachem Javascript. Ein komplettes Beispiel mit jQuery und Event-Handler sieht dann wie folgt aus:

// HTML-Code in der Webseite:

<div id="sbm">
  <a href="#" title="Delicious"></a>
  <a href="#" title="Linksilo"></a>
    :
    :
</div>

// Javascript ausgelagert in externer Datei:

$(document).ready(function($){
  $('#sbm').sbm();
});

$.fn.sbm = function(){
  $("#sbm >a").bind({
    click: clickSmb
  });

  function clickSmb() {
    var url = encodeURIComponent(location.href);
    var title = encodeURIComponent(document.title);

    switch($(this).attr("title"))
    {
      case "Delicious":
        window.open('http://delicious.com/save?v=5&noui&jump=close&url='+url+'&title='+title,'_blank');
        break;
      case "Linksilo":
        window.open('http://www.linksilo.de/bookmark.php?area=bookmarks&func=bookmark_new&addurl='+url+'&addtitle='+title,'_blank');
        break;
          :
          :
    }
    return false;
  }
}

Die Icons kann man per CSS als Background einbinden, so dass hierdurch auch kein zusätzlicher Inline-Code nötig ist.

Fazit

Es sind hier zwar nur Kleinigkeiten, wodurch die Webseiten optimiert werden, aber ich sehe dabei wiederum eine Möglichkeit, sich in Sachen on-Page Optimierung einen minimalen Vorsprung zu verschaffen. Wenn Sie mehrere Bookmark-Dienste einbinden und dabei die einzelnen Bilder noch als CSS-Sprite kombinieren, können Sie auch noch ein paar Requests sparen und die Webseiten somit noch schneller machen.
Aber auch nochmals der Hinweis: Falls der Besucher Javascript in seinem Browser deaktiviert hat, funktioniert es nicht. Das gilt es entsprechend abzuwägen.

Tipps zur Webseitengestaltung - Blog