In letzter Zeit liest man immer wieder vom “Web2.0″ und in Verbindung damit auch regelmäßig von “AJAX”. Die Abkürzung “AJAX” steht für “Asynchronous Javascript and XML”, was sich wiederum auf die von Microsoft eingeführte Javascript API “XMLHttpRequest” bezieht, die es ermöglicht, asynchron Daten auf einer Website nachzuladen. Auf Deutsch gesagt bedeutet dies, dass Teilbereiche der Seite aktualisiert werden können, ohne die komplette Seite neu zu laden. Häufig wird AJAX auch im Zusammenhang mit Effekten wie zum Beispiel dem dynamischen Anzeigen und Verstecken bestimmter Bereiche der Seite genannt. Wie der Name schon sagt, basieren diese Techniken auf Javascript und sind somit für Suchmaschinen nicht sichtbar. Per AJAX nachgeladene Inhalte werden darum (derzeit) nicht indexiert. Aus diesem Grund möchte ich hier in diesem Artikel auf Möglichkeiten eingehen, eine Seite mit AJAX-Elementen trotzdem suchmaschinenfreundlich zu gestalten.
Wie funktioniert AJAX
Im Regelfall werden für AJAX einfache Javascript-Funktionen oder fertige Frameworks genutzt, die es ermöglichen, unter Angabe einer sogenannten “Callback-Funktion” eine AJAX-Anfrage (Request) abzusenden. Diese Callback-Funktion wird aufgerufen, sobald die Anfrage beendet wurde und fügt dann den zurückgegebenen Inhalt in die Seite ein. Im Hintergrund wird meist ein ganz normales Script unter Angabe von Parametern aufgerufen, welches Text, XML, JSON oder anders verpackte, den Parametern entsprechende Inhalte zurückgibt. Die AJAX-Anfrage wird meist durch einen Klick auf einen Link oder automatisiert alle X Sekunden initiiert. An dieser Stelle tritt meist schon der schwerwiegendste Fehler auf.
Beispiele für den Einsatz von AJAX
Die Nutzung vom AJAX kann durchaus Sinn machen. Ein simpler Anwendungsfall wäre zum Beispiel das Laden von Kommentaren zu einem Artikel, zu dem jeweils nur X Kommentare auf der Seite angezeigt werden sollen. Will der Webmaster nur fünf Kommentare anzeigen, jedoch alle verfügbaren, sagen wir 50, verfügbar machen, so könnte er initial die letzten fünf anzeigen. Klickt der Nutzer auf “weitere Kommentare zeigen”, wird im Hintergrund ein AJAX-Aufruf abgesendet, welcher die nächsten fünf läd und mit diesen die vorhandenen überschreibt. Ein weiterer, nützlicher Anwendungsfall ist das automatische Nachladen von Informationen. So könnte man per AJAX auf der Seite einer Community alle angemeldeten Benutzer in einer Liste anzeigen, welche alle zehn Sekunden aktualisiert wird. So muss der Nutzer nicht ständig die komplette Seite neu laden und der Betreiber spart Traffic ein. Weiterhin kann man per AJAX Überprüfungen durchführen, die eventuell recht lange dauern können und ohne AJAX den Aufbau der Seite stark verzögern würden. Beispielsweise die Verfügbarkeit mehrer Mirrors anzeigen oder Verfügbarkeitschecks von Domains.
Die SEO vs. AJAX Problematik
Wie bereits erwähnt, können Suchmaschinen Javascript nicht, oder nur rudimentär verstehen. Viele Crawler ignorieren Javascript-Code vollständig. Werden nun Inhalte einer Seite dynamisch via AJAX nachgeladen, so sind diese für die Suchmaschine unsichtbar und können nicht indexiert werden. Auf Seiten, die sehr stark AJAX-basiert sind, bedeutet dies in der Regel, dass so gut wie keine Unterseiten in den Suchmaschinenindex gelangen. Es gibt sogar Seiten, die nur aus einer Startseite bestehen und sämtliche weiteren Inhalte per AJAX nachladen. Hier kann die Suchmaschine tatsächlich nur den Inhalt dieser Startseite indexieren. Alle dynamischen Inhalte sind für sie unsichtbar.
Fehler und Lösungen
Der wohl häufigste Fehler, der auf AJAX-Seiten gemacht wird, ist, dass die dynamisch nachgeladenen Inhalte nicht statisch verfügbar sind, oder zumindest für Suchmaschinen nicht auffindbar. Ein Link, der eine AJAX-Anfrage auslöst, sieht oft wie folgt aus:
<a href=”javascript:getCommentsAJAX(2)”>Weitere Kommentare anzeigen</a>
Dieser Link ruft beim Klicken also die Funktion „getCommentsAJAX“ mit dem Parameter „2“ auf. Diese Funktion könnte eine zweite Liste mit Kommentaren nachladen, welche dann die initial auf der Seite angezeigte erste Liste ersetzt. Der Fehler ist, dass dieser Link von Suchmaschinen nicht verfolgt wird, die zweite Liste mit Kommentaren also keine Chance hat, in den Index zu gelangen. Die richtige Lösung ist einfach:
<a href=”/artikel/1/kommentare/2″ onclick=”javascript:getCommentsAJAX(2); return false”>Weitere Kommentare anzeigen</a>
So wird für Suchmaschinen ein ganz gewöhnlicher Link angeboten, während für alle Nutzer mit aktiviertem Javascript die AJAX-Funktionalität genutzt wird. Klickt ein Nutzer mit Javascript auf den Link, wird die AJAX-Funktion ausgeführt. Durch den Befehl „return false“ wird verhindert, dass der hinterlegte Link zu „/artikel/1/kommentare/2“ geladen wird.
Nun muss noch dafür gesorgt werden, dass unter der verlinkten URL auch wirklich die korrekten Inhalte ausgegeben werden. Dies kann man zum Beispiel erreichen, indem man das selbe Script nutzt, das auch für den AJAX-Aufruf angefragt wird. In diesem Script kann man beim normalen Aufruf die komplette Seite ausgeben, während bei einer AJAX-Anfrage nur die nächsten Kommentare zurückgegeben werden. Für die Unterscheidung zwischen den beiden Aufrufarten, kann man bei der Anfrage via AJAX zum Beispiel einen weiteren Parameter übergeben.
Alternativen
Eine Alternative zum Nachladen der Inhalte sind simple Funktionen zum Anzeigen oder Verstecken bestimmter Elemente einer Seite. Möchte man beispielsweise, dass die Suchmaschine alle Kommentare direkt auf der ersten Seite bekommt, der Nutzer jedoch aus Gründen der Lesefreundlichkeit kleinere Teilbereiche zu Gesicht bekommt und durch diese Navigieren kann, bietet sich diese Technik an. Ein einfaches Beispiel:
<div id=”kommentare1″>
Hier stehen die ersten 5 Kommentare
</div>
<div id=”kommentare2″ style=”display:none”>
hier stehen die nächsten 5 Kommentare
</div>
[…]
So sind sämtliche Kommentare bereits auf der Seite enthalten und können indexiert werden, jedoch sieht der Nutzer nur den Inhalt des DIV mit der ID “kommentare1″. Um den nächsten Block anzuzeigen, muss man diesen sichtbar machen und den ersten verstecken:
<a href=”javascript:void(0)” onclick=”document.getElementById(‘kommentare1′).style.display=’none’; document.getElementById(‘kommentare2′).style.display=’block’; return false”>Weitere Kommentare anzeigen</a>
Diese Version ist stark vereinfacht und nicht besonders elegant, zeigt jedoch den richtigen Ansatz. Da der Link für Suchmaschinen uninteressant ist, bekommt er das Ziel “javascript:void(0)”, welches exakt gar nichts ist. Durch das onclick-Attribut wird mit dem ersten Befehl das Element mit der ID “kommentare1″ versteckt und durch den zweiten das mit der ID “kommentare2″ eingeblendet.
Der Vorteil dieser Variante ist, dass sämtliche Inhalte auf der ersten Seite indexierbar sind, und somit dem vollen „Link Juice“ abbekommen.
Zusammenfassung
Welche AJAX-Inhalte man für Suchmaschinen sichtbar machen möchte und welche nicht, muss jeder Seitenbetreiber für sich entscheiden. Sicherlich gibt es viele dynamische Elemente einer Seite, die gar nichts im Index der Suchmaschinen verloren haben, jedoch gehen auch sehr viele gute Inhalte durch den falschen Einsatz von AJAX verloren und sind in den Tiefen des Internet für andere nicht auffindbar. Ich hoffe, dass ich durch diesen Artikel ein wenig helfen konnte, den Zusammenhang zwischen AJAX und SEO besser zu verstehen.
Der ebenso gutaussehende wie talentierte Pelle Boese hat in seinem Blog einen höchst interessanten Artikel veröffentlicht, der sich mit dem Spannungsfeld aus SEO und AJAX ergibt. Die Grundproblematik ist zunächst klar, aber für viele vielleicht nicht offe
Naja, zum größten Teil wird Ajax eingesetzt um Inhalte nachzuladen, die zum Zeitpunkt der Anzeige der statischen Seite noch gar nicht bekannt sind.
Ich würde nicht unterschreiben, dass AJAX größtenteils dafür eingesetzt wird. Aber natürlich kommt das auch vor, deshalb habe ich ja auch geschrieben, dass es nicht immer Sinn ergibt und man Fall für Fall entscheiden muss.
Wenn ich mir beide Methoden so angucke, ergeben die mir nicht so wirklich sinn. Es wird ein link eingeblendet auf den ein Normaler user nicht stossen kann. Daher die SUMA wird woanders hin geleitet als der User.
Suchmaschinen wollen aber nicht anderen content sehen als der User, für mich ist das sowas wie Schwarzer Text auf Schwarzem hintergrund somit halte ich es für warscheinlich das Google das irgendwie abstraft.
Oder wie wollen die Unterscheiden ob hier sinnvoller conent eingeblendet wird oder fürn den Bot einfach anderer content angezeigt wird als für den Useer ?
Halte beide methoden immernoch für suma technisch uncool. Da kann man besser alles so lassen wie es ist anstatt das risiko eingehen evtl abgestraft zu werden. Lieber extra link “kommentare auf neuer seite” einblenden der aber auch clickbar ist.
Du hast anscheinend nicht ein Wort von dem verstanden, was ich in diesem Artikel geschrieben habe. Es geht darum, Inhalte sowohl per AJAX, als auch für Browser ohne Javascript verfügbar zu machen. Das hat weder etwas mit Cloaking, noch mit “Schwarzer Text auf schwarzem Hintergrund” zu tun. Das ist eine vollkommen legitime und ERWÜNSCHTE Methode um Inhalte sowohl “cool” per AJAX darzustellen, aber auch für Browser ohne Javascript oder zum Beispiel Sehbehinderte verfügbar zu machen. Das nennt man übrigens Barrierefreiheit.
gibt es einen überblick über anbieter die auf ajax mobile setzen?
Nicht dass ich wüsste, aber es gibt schon einige mobile Seiten, die für AJAX-fähige Geräte auch AJAX nutzen. Und natürlich die meisten iPhone-Seiten.
Hallo,
nun ist dieser Beitrag schon ein wenig älter, aber vielleicht kann meine Frage dennnoch beantwortet werden.
Bei meiner Website funktioniert das ganze so, dass der Index den Benutzer bei aktiviertem JS auf eine Seite weiterleitet, die den Content nur per Ajax nachlädt. So erspare ich mir eine Menge traffic und der Funktionsumfang der Seite bleibt beständig.
Bei nicht aktiviertem JS leitet Index den Benutzer auf eine andere Seite weiter, die vollkommen ohne JS auskommt und für jeden weiteren Content eine neue Seite aufbaut.
Die Frage ist ob dieser Lösungsweg vertretbar ist, oder ob ich lieber hingehe und die Programmierung neu in Angriff nehme?
Gruß
Hallo Horst,
das kommt ganz darauf an, wie Du das alles geregelt hast. Kann man sich die Seite mal anschauen?
Hallo, ich habe jetzt schon mehrfach versucht mit verschiedenen Browsern die return false Methode nachzubauen. Nur bei mir hat irgendwie immer der Link vorzug und das JavaScript wird überhaupt nicht ausgeführt. Mache ich da was falsch?!
Hallo Steini,
da machst Du in der Tat etwas falsch… aber was genau das ist, kann ich dir leider erst sagen, wenn Du mir verraetst, um welche Seite es geht.
Sorry, hatte nen dreher im Funktionsnamen. Meine Fehlerkonsole hat auch keinen Fehler angezeigt und ich hatte wohl Tomaten auf den Augen…