Ajax und SEO

Welch Schauergeschichten habe ich von SEO Gurus schon  gehört. So ziemlich alle modernen Technologien wirken sich schlecht auf das Ranking aus, da die Suchmaschienenbots sie nicht interpretieren können.

Es ist zwar nicht Thema dieses Beitrags aber Ich habe vor kurzem eine Mitschrift eines Freundes durchgeblättert habe, welcher einen SEO Kurs belegt hat. In dieser stand: Vorsicht bei der Verwendung von JavaScript. Es wirkt sich negativ auf die Darstellung für Google aus.“

Der Google Bot kann sehr wohl JavaScript ausführen und die Inhalte auswerten. Es gibt keinen Grund kein JavaScript zu verwenden.

Doch nun genug der einfachen Themen, wenden wir uns etwas komplexeren zu und zwar wie kann man Webseiten welche AJAX verwenden suchmaschienenfreundlich gestallten.

Auf einer Webseite bringt AJAX viele Vorteile. Kürzere Ladezeiten, ein besseres Nutzererlebnis, schöne Effekte bei Seitenwechseln. Doch ohne zusätzliche Arbeiten hat man dann für Google eine einzige Seite erstellt. Denn Links die ausschließlich mit JS funktionieren werden von Google nicht ausgewertet.

Also greift man hier zu einem kleinen Trick. Links werden ganz normal erstellt und dann via JavaScript wieder deaktivert.

$( Element ).click(function(e) {
  e.preventDefault();
});

Und schon kann man mit seinem „vermeintlichen Button“, durch Javascript jeden beliebigen AJAX Request absenden.

Fährt der Benutzer mit der Maus über den Button sieht er weiterhin angezeigt zu welcher Seite der Link führen würde, wäre er nicht deaktiviert. Und genau in diesem Glauben müssen wir den Benutzer auch lassen. Wir simulieren also einen kompletten Seitenwechsel für ihn. Nicht nur das die neuen Inhalte nachgeladen werden, wir wollen/müssen auch die URL ändern.

Das erreichen wir in dem wir die URL bei jedem Klick auf einen Button ändern.

window.location.hash = "!" + "Der_neue_Teil_der_URL"

Einige Dinge sind hierbei zu beachten. Kommen die Daten aus denen die URL aufgebaut wird, zB. aus einer Produktdatenbank, so muss der String davor entsprechend encoded werden (Keine Leerzeichen, Umlaute, Sonderzeichen…). Außerdem wird der neue Teil der URL durch ein Hashbang Symbol von der herkömmlichen URL getrennt. Das Hashbang (#!) ist von Google akzeptiert und die Seite wird weiterhin gecrawlt. Wird das Rufzeichen nach dem Hash nicht verwendet, so wird Google die URL nicht als eigene Seite erkennen.

Ein Teil der Zauberei fehlt uns natürlich noch. Wir haben nun  eine schöne Anzeige, doch angenommen der Benutzer speichert die URL und möchte zu einem späteren Zeitpunkt wieder auf die Seite zurückkehren.

Hier ist nun oft eine Individuelle Lösung gefragt. Doch diese zwei Ansätze werden euch in die richtige Richtung führen.

  • Beim ersten Laden der JS Files die URL überprüfen ob auf eine andere Seite gewechselt werden muss
  • Eine Function erstellen, welche regelt, was bei einer Änderung der Parameter passieren soll (Klick auf den Zurückbutton, händisches editieren der URL,…)

Für letzteres hier noch der Codehinweis:

window.onhashchange = function() {
  var query = window.location.hash;
  Do whatever you have to do;
}

Natürlich ist mir bewusst, dass es libaries gibt die einen Teil dieser Arbeit abnehmen (Oder in manchen Fällen auch die komplette), doch kann man nicht jeden Fall mit diesen Abbilden.

Gelegentlich müssen bestimmte Dinge in einer bestimmten Reihenfolge passieren, oder es gibt Spezialanforderungen welche zwischen einzelnen Schritten getan werden müssen.

Und auch falls nicht ist es manchmal nicht schlecht zu verstehen, was ein Plugin eigentlich macht bevor man es verwendet…

 

Links zu Beispielen:

Eine Seite von uns: https://handyrepair.at/#!LG/Nexus_5/

Eine Seite von Google: http://samples.gwtproject.org/samples/Showcase/Showcase.html#!CwBasicButton

 

No comments yet. Be the first!

Schreibe einen Kommentar

Kontaktieren Sie uns