Javascript und Suchmaschinenoptimierung
Design contra Google

DeveloperIT-ProjekteSoftware

Die Beispiele in diesem Workshop zeigen, wie Sie trotz Suchmaschinen-Optimierung nicht auf Hyperlink-Tricks mit Javascript verzichten müssen.

Seiten für alte Browser

Javascript und Suchmaschinenoptimierung

Dynamische, optisch ansprechende Gestaltung von Menüs, Javascript-gesteuerte Links, Effekte mit Javascript und CSS ? all das bringt Webdesigner in die Zwickmühle, wenn es um Suchmaschinenoptimierung und Abwärtskompatibilität geht. Suchmaschinen verhalten sich meist wie uralte Webbrowser: Javascript wird ignoriert, versteckt sich ein Link im Code, wird er nicht verfolgt, und ein Teil der eigenen Website kommt so womöglich nie in den Genuss eines Google-Listings.

Doch mit ein paar recht einfach umsetzbaren Tricks lässt sich das durchaus umgehen. Schickes Design und dynamische Menüs sind vereinbar mit optimaler Suchmaschinen-Indizierung, und nebenbei werden die Seiten auch für uralte Browser und bei abgeschaltetem Javascript nutzbar. Einziger Wermutstropfen: In alten Browsern leidet die Optik mehr oder weniger stark. Nutzbar sind die Seiten aber auch dort.


Statische Links ersetzen

Javascript und Suchmaschinenoptimierung

Erstes Problem sind Javascript-Aufrufe in Links in der Form

Link

Mit derartigem Code öffnet man beispielsweise einen Link in einem neuen Fenster mit bestimmter Größe. Damit der Suchmaschinen-Crawler den Link aber ebenfalls verfolgt, notieren Sie den Link zunächst ganz regulär

Link

und tauschen das Link-Ziel im Anschluss über die document-Objektreferenz gegen den eigentlich gewünschten Javascript-Aufruf aus:

document.links[0].href = "javascript:neuesfenster('link.html',800,600);";

Allerdings, und das macht diese Methode zunächst ziemlich unbrauchbar, muss der Link numerisch angesprochen werden. Im Beispiel würden Sie den ersten Link des HTML-Dokuments ansprechen: [0]. Das ist wenig praktikabel, weil zumindest auf Seiten mit mehreren Links die Übersicht schnell verloren geht und das Hinzufügen oder Entfernen eines Links auf der Seite regelmäßig in umständliches Auszählen der Links und umfassende Änderungen ausarten würde.


Link-Nummer automatisch ermitteln

Javascript und Suchmaschinenoptimierung

Mit einem einfachen Trick lässt sich aber auch dieses Problem beheben. Zunächst geben Sie dem Link einen Namen mit auf den Weg:

Link

Der Name dient dazu, die Link-Nummer in einem kleinen Skript automatisch zu ermitteln, so dass jeder Link effizient mit dem Namen ansprechbar wird und die manuelle Ermittlung der Linknummer komplett entfällt. Dazu lassen Sie einfach einen Zähler hochlaufen und prüfen für jede Link-Nummer, ob sie dem gewünschten Namen entspricht. Ist der gewünschte Link auf diese Weise gefunden, lässt sich das Link-Ziel bequem gegen den Javascript-Aufruf austauschen:

var i = 0;
while (i < 50) {
if (document.links[i].name == 'Link')
{
document.links[i].href = "javascript:neuesfenster('link.html',800,600);";
break;
}
i++;
}


Performance

Javascript und Suchmaschinenoptimierung

Um sicher zu gehen, dass wirklich alle potenziellen Links auf der Seite durchgezählt werden, ist der Wert in der while-Schleife mit 50 recht hoch angesetzt. Die Höhe dieser Zahl wirkt sich nicht negativ auf die Performance aus, weil die Ausführung des Skripts mit dem break-Befehl abgebrochen wird, sobald der gesuchte Link gefunden ist. Tatsächlich wird also die while-Schleife nie komplett durchlaufen, es sei denn, Sie suchen nach einem Link-Namen, der nicht existiert. Tippfehler können sich hier also unangenehm auswirken.

Mit diesem Trick erreichen Sie natürlich auch, dass der Link immer funktioniert, auch wenn der Anwender Javascript abgeschaltet hat oder einen sehr alten Browser benutzt. Besonders für Links, die auf jeden Fall für jeden Besucher Ihrer Website funktioneren müssen, beispielsweise in der Navigation, drängt sich diese Methode also geradezu auf.


Javascript und Suchmaschinenoptimierung


Javascript-Menü abwärtskompatibel

Javascript und Suchmaschinenoptimierung

Ein Beispielprojekt soll einen weiteren Ansatz zum Umgehen von Javascript-Inkompatibilitäten demonstrieren. Mit einer recht eleganten Kombination aus CSS und Javascript öffnet das Skript »Floating Hover-Menu« bei Mausberührung Kontext-Menüs, die Links enthalten (
www.
gdevresources.com/Pages/Scripts/Hovermenu/hovermenu.shtml
).

Das sieht optisch sehr schön aus, blockiert aber Suchmaschinen und alte Browser. Zunächst wenden Sie also den zuvor erläuterten Trick an, um den Javascript-Aufruf javascript:Void(0) durch einen echten Link zu einer HTML-Datei zu ersetzen und dann gegebenenfalls per Javascript automatisch wieder in den Javascript-Aufruf zu verwandeln ? denn in Browsern, die Javascript unterstützen, soll der Anwender ja nicht den Link anklicken, sondern das Kontextmenü benutzen.


Javascript auslagern

Javascript und Suchmaschinenoptimierung

So weit ist die Lösung simpel. Das Ergebnis verursacht jedoch unnötig viel Arbeit bei der Pflege der Seite, weil Sie die Menü-Links jetzt sowohl im Skript selbst als auch auf der alternativen HTML-Seite pflegen müssen. Im nächsten Schritt lagern Sie daher zunächst das eigentliche Javascript (das die setObj-Funktion enthält) in eine separate Datei beispiel.js aus und benennen sie um in beispiel.html. Dabei machen Sie sich zu Nutze, dass die Dateiendung beim Einbinden des Javascripts keine Rolle spielt, da dem Browser ja über die Definition type=?text/javascript? mitgeteilt wird, als was er die Datei interpretieren soll. Mit der Endung HTML können Sie diese Datei jedoch auch mit dem Browser aufrufen und dort im HTML-Format anzeigen. So können Sie jetzt also den HTML-Link auf die beispiel.html legen und diese Datei zugleich als Javascript einbinden:





(...)
Link


Hybrid-Datei: HTML und Javascript gemischt

Javascript und Suchmaschinenoptimierung

Die etwas fummelige Arbeit kommt jetzt: Die Javascript-Datei beispiel.html muss ergänzt werden mit HTML-Tags, die der Browser darstellen kann. Zugleich müssen der HTML-Teil für den Javascript-Interpreter verborgen werden und der Javascript-Teil vor dem Browser. Dazu verwenden Sie die Javascript-Kommentarzeichen /* kommentar */ oder // für die Auskommentierung der kompletten restlichen Zeile sowie HTML-Kommentierungen mit . Dort, wo es möglich ist, verstecken Sie sogar die Javascript-Kommentarzeichen in HTML-Kommentaren, damit sie im Browser nicht mit angezeigt werden beziehungsweise von Suchmaschinen nicht als Zeichensalat gelesen werden.

HTML-Code wird also wie folgt ausgezeichnet:

HTML-Code

während Javascript-Code innerhalb von HTML-Kommentaren stehen muss. Allerdings muss bei mehrzeiligen HTML-Kommentaren der Abschluss des HTML-Kommentars wiederum vor dem Javascript-Interpreter versteckt werden, was nur in einer eigenen Zeile funktioniert:

Als Alternative lassen sich auch HTML-Kommentierungszeichen für das zeilenweise Verstecken von HTML-Code vor dem Javascript-Interpreter nutzen. Für den Interpreter sind nämlich HTML-Beispielcode

ignoriert er daher, da alles nach dementsprechend ignoriert wird. Die HTML-Render-Engine dagegen erkennt das Ende des HTML-Kommentars und rendert alles Nachfolgende als HTML-Code.


Grenzen der Kommentar-Verschachtelung

Javascript und Suchmaschinenoptimierung

Leider hat die Gleichbedeutung von // und

Dynamische Navigation per Liste

Javascript und Suchmaschinenoptimierung

Einen weiteren Ansatz verfolgt das Navigationsskript Zapatec DHTML Tree (
www.zapatec.com), das wegen seines interessanten Konzepts in diesem Zusammenhang zumindest erwähnt werden soll. Ein genauerer Blick darauf lohnt sich. Die Grundidee ist, die gesamte Navigationsstruktur im Listenformat mit

    - und
  • -Tags aufzubauen, die eigentlich jeder Browser interpretieren und anzeigen kann. Die Formatierung sowie das Auf- und Zuklappen der Untermenüs passieren dann nachträglich per CSS und Javascript. Unterstützt ein Browser CSS und Javascript nicht, zeigt er trotzdem den kompletten Navigationsbaum mit allen enthaltenen Links an. Und auch Suchmaschinen finden hier perfekte Bedingungen.

    Auf einer Website des Autors (
    www.rivers-rails.com) ist diese Navigation von Zapatec in leicht modifizierter Form per Server Side Includes in die Site integriert, so dass Ergänzungen und Änderungen im Menü nur in einer einzigen, zentralen Datei vorgenommen werden müssen. Mit einem kleinen Trick wird der Navigationsbaum trotzdem auf die jeweils aktuell angezeigte Seite angepasst und die aktive Seite farbig hinterlegt: Die Include-Datei enthält zwar die gesamte Listen-Struktur einschließlich des Javascript-Codes zur Formatierung und Initialisierung der Navigation, nicht aber das abschließende -Tag. Das macht es möglich, in jeder Datei einen individuellen Parameter an das Skript zu übergeben ? eben den Namen des zu aktivierenden

  • -Tag-ID (siehe Listing unten). Entsprechend müssen natürlich die
  • -Elemente in der Include-Datei (im Beispiel: navigation.shtml) jeweils mit eindeutigen IDs ausgestattet werden, beispielsweise:


  • Navigation einbinden

    Javascript und Suchmaschinenoptimierung

    Die gesamte Navigation lässt sich mit drei Codezeilen in die HTML-Datei einbinden:


    Zapatec.Tree.all['designtree'].sync('id01');

    Der Aufbau der Navigation als Liste hat lediglich einen Nachteil: Je nach Performance der Internet-Verbindung und des Client-Rechners vergeht eine gewisse Zeit, bis die unformatierte Liste durch das Javascript in Form gebracht wird. In der Regel sind das nur Sekundenbruchteile oder der Vorgang ist überhaupt nicht zu sehen. Um aber auch kleine störende Effekte dabei zu vermeiden, geben Sie dem Listen-Element dieselbe Farbe wie dem Hintergrund ? so bleibt die Anzeige der Liste unsichtbar, bis sie vom Javascript formatiert wird. Im Beispiel also:


  • Farbprobleme

    Javascript und Suchmaschinenoptimierung

    Daraus entsteht ein neues Problem für die Abwärtskompatibilität und für Suchmaschinen: Die Liste wird ohne Javascript eben in der gleichen Farbe wie der Hintergrund angezeigt. Dies lässt sich wiederum dadurch umgehen, dass Sie den CSS-Code, der für die allgemeinen Formatierungen der Seite verantwortlich ist, in eine separate Datei auslagern und nicht auf dem üblichen Weg über


    dazuladen, sondern per Javascript, so dass das CSS nur dann zur Anwendung kommt, wenn Javascript auch aktiv ist und die Suchmaschine keine Chance hat zu erkennen, dass der Text in Hintergrundfarbe formatiert ist.

    Logischerweise funktionieren diese Farbspiele nur bei farbigem Hintergrund. Ist die Hintergrundfarbe weiß, lässt sich ein eventuell kurzes Aufblitzen der unformatierten Liste nicht vermeiden.

    Eine Dokumentation zum gesamten Zapatec DHTML Tree Script finden Sie beim Anbieter des Skripts (
    www.zapatec.com/website/main/products/prod2). Die CSS-Formatierungen der Listen sind etwas unübersichtlich, mit etwas Ausprobieren lässt sich das Aussehen aber komplett an die eigenen Anforderungen anpassen.