Javascript und Suchmaschinenoptimierung
Design contra Google
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
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
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:
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
- -Tag-ID (siehe Listing unten). Entsprechend müssen natürlich die
-
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.
-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