Ajax-Anwendungen und Google - eforia web manager Blog

eforia web manager Blog

Ajax-Anwendungen und Google

Lange Jahre bremsten Suchmaschinen wie Google die technische Weiterentwicklung im Web aus. Man musste Seiten bauen, die gut zu indizieren waren und zu viel Technik in Form von nachladenden Javascript-Anwendungen (bekannt als Ajax) waren einfach ein Problem. Doch seit wenigen Monaten gibt es eine Lösung.

Google hat dazu den Hashbang auserkoren. Das ist die Kombination der beiden Zeichen #!. Die Raute (heute modern als "hash" bezeichnet) diente schon seit HTML 2.0 zur Kennzeichnung von internen Sprungzielen in Seiten. Wobei die Seite selbst dabei gleich blieb. Das nutzten Javascript Programmierer schon bald aus, um darüber verschiedene Zustände von Anwendungen zu speichern. Als Beispiel sei ein Forum genannt, dass auf einer Seite "board.html" liegt und mit Ajax entwickelt wurde. Die URL "board.html#forum123" könnte direkt benutzt werden, um das Forum "forum123" anzuzeigen. Nur Google weiß eben nichts davon und das Forum ist schlicht nicht zu finden.

Da kommt nun der Hasbang ins Spiel. Benutzt man nicht "board.html#forum123" sondern "board.html#!forum123" kann Google damit umgehen. Intern wird dann die URL "board.html?_escaped_fragment_=forum123" abgerufen. Mit ein wenig mod_rewrite kann man nun seine Inhalte dem Google-Crawler zugänglich machen. Detail dazu finden sich bei Google hier [Link entfernt, weil Linkziel leider nicht mehr verfügbar] (sogar in deutsch).

Wie nutzt man das in der Praxis?
Ich bleibe bei meinem Beispiel, dem Forum. Mal angenommen, ich hätte ein Modul namens Board für eforia. Darin gibt es Routinen für eine Forumsliste, Forumsinhalt und Beitragsausgabe. Dazu noch interne Verwaltungssachen für Moderatoren, Antworten, Ändern, usw.. Das brauchen wir aber nicht, weil der Google Crawler kaum Beiträge verfassen wird. Bleiben also die 3 Funktionen Forumsliste, Forumsinhalt und Beitragsausgabe. Diese werden auf der Forumsseite per Ajax aufgerufen und liefern HTML zurück, der dann direkt in die Seite gesetzt wird. Dazu muss ein Script die URL mit Hashbang zerlegen, den passenden Aufruf erzeugen und entsprechend verarbeiten. Das Modul selbst erzeugt einfach die Ausgabe und liefert diese zurück. Und genau das nutzen wir doppelt. In cmsMain prüfen wir, ob Parameter über _escaped_fragment_ übergeben wurden, rufen dann intern eine der 3 Routinen auf und fügen die Ausgabe an Stelle des Spacers ein. So wie es eben bei eforia Modulen auch sonst erfolgt.

Nochmal:

Wir haben 3 Routinen, die Parameter wie Forumsnummer, Beitragsnummer und Seite bekommen. Diese erzeugen eine Ausgabe in einen Ramtext.
Aufgerufen werden die Routinen einmal über ein Script per Ajax, die Ausgabe erfolgt dann direkt über Ajax. Oder der Aufruf erfolgt über cmsMain und die Parameter werden als _escaped_fragment_ übergeben. Dann erfolgt die Ausgabe wie eben bei jedem eforia Modul.
Was wir dabei doppelt programmieren müssen ist nur die Zerlegung der URL in Parameter. Einmal per Javascript und einmal im Modul.

Das wars eigentlich schon. Es fehlt nur noch ein wenig Rewrite-Magic in der .htaccess. Das kann so aussehen:

RewriteCond %{THE_REQUEST} /board.html [NC]
RewriteCond %{QUERY_STRING} _escaped_fragment_.* [NC]
RewriteRule ^board.html$ /programm/o.prg?lfd=9509&%{QUERY_STRING} [L]

Das führt dazu, dass für den Crawler eben eine HTML-Version ohne Ajax ausgegeben wird. In diesem Beispiel ist die Seite mit dem Forum eben board.html und intern befindet sich das Modul auf der Seite mit der lfd=9509.

Eine Kleinigkeit fehlt noch, um das zu aktivieren. Den Google weiß ja nicht, dass er (es?) bei "board.html" so vorgehen soll. Und jeden Link deswegen als "board.html#!" anzugeben wäre unschön. Aber auch daran wurde gedacht. Man fügt in die Seite <meta name="fragment" content="!"> ein. Das geht am Einfachsten in der Vorlage mit einer Bedingten Ausgabe:

{if="'ajaxanwendungenundgoogle'='board'"}<meta name="fragment" content="!">{end}

Und fertig ist eine schicke Ajax-Anwendung, die nebenbei noch perfekt von Google gecrawlt werden kann. Der Nerd in mir findet das einfach toll.

Natürlich ist das Beispiel eines Forums nicht ganz zufällig gewählt. Das gibt es nämlich tatsächlich. Ich muss nur noch die Vorlagen überarbeiten und mit überlegen, wie das mit den Nutzerprofilen ist. Weil so richtig Spass macht es ja nur, wenn man auch Profilbilder anlegen kann. Aber wie das dann aussehen könnte, kann man schon mal hier [Link entfernt, weil Linkziel leider nicht mehr verfügbar] sehen.

Dieser Artikel wurde veröffentlicht am 17.12.2010 um 16:37 Uhr. Tags: seo forum board | Permalink | Trackback URI