Der letzte Teil der Serie Jetzt Backbone.js lernen beschäftigte sich mit dem Konzept des zu Grunde liegenden Projektes. Dieser Beitrag geht nun auf ein oftmals unterschätztes Thema der Webentwicklung ein, der Optimierung für Suchmaschinen in Verbindung mit JavaScript. Oder besser: Worauf sollte ich bezüglich Suchmaschinen aufpassen, wenn massig JavaScript eingesetzt wird. So soll ein stimmiges Bild entstehen, welches klar und deutlich hervorhebt, für welche Bereiche des Projektes JavaScript eingesetzt wird, und für welche nicht. Hierfür wird auch auf das Thema der Hashbangs eingegangen.
Abgrenzung
Wer sich in diesem Beitrag zahlreiche Tipps erwartet, wie sich denn das eigene Projekt für Suchmaschinen optimieren lässt, der wird an dieser Stelle nicht abgeholt. Hierzu findet sich bereits zahlreiches Material im Internet. Hier geht es darum festzustellen, welche Teile des Projektes sinnvoll über JavaScript abgewickelt werden und wie Content, der via AJAX bezogen wird, dennoch für Suchmaschinen zu finden ist.
Suchmaschinen und JavaScript
Um festlegen zu können, welche Teile einer Website statisch geliefert und welche dynamisch erzeugt werden, bedarf es zwei wichtiger Informationen. Zum Einen muss das Konzept der Website stehen. Dieses muss klar definieren, welche Inhalte vermittelt werden und worauf der Fokus gelegt wird. Zum Zweiten muss bekannt sein, wie Bots arbeiten.
Fälschlicherweise wird oftmals angenommen, dass Googlebot und Co. die Website gleich “sehen”, wie das ein normaler Besucher via Browser tut. Dem ist aber natürlich nicht so. Ein Bot kann (noch) nicht mit dynamischen Inhalten umgehen, lediglich statischer Inhalt ist für ihn sichtbar und kann somit ausgewertet werden. Verwendet man nun beispielsweise JavaScript, um Daten vom Server zu laden, um diese dann per Template etc. anzuzeigen, dann sind dies Daten, die für einen Bot nicht zur Verfügung stehen.
Ein gutes Beispiel hierfür findet sich in der Serie Jetzt Knockout.js lernen: In diesem Beispiel werden Daten vom Server bezogen und via Template zur Anzeige gebracht. Sieht man sich den Quelltext der Seite an, erhält man ein Bild des Bots auf diese Seite. Herzlich wenig für eine Indizierung.
Bei Interesse kann man sich Genaueres auch hier ansehen.
Hashbangs
Eine Möglichkeit dem ein wenig zu entgehen sind sogenannte Hashbangs (#!). Hierzu hat sich Google (schon vor langer Zeit) etwas einfallen lassen: Making AJAX Applications Crawable. Auch Bing kann damit mittlerweile umgehen, wodurch diese Lösung durchaus in Betracht gezogen werden kann und sollte. Wer darin noch nicht so versiert ist, sollte einen Blick darauf werfen.
So funktioniert ein Hashbang
Historisch gesehen wird ein Hash (#) als Named Anchor verwendet, also ein benannter Anker innerhalb eines Dokumentes, an den per Link gesprungen werden kann. Alles was in einem URI nach dem Hash angegeben wird, wird daher nicht an den Server gesendet, sondern rein clientseitig verwendet/ausgewertet. Oftmals ist es nun aber so, dass der Ankerpunkt nicht vorhanden ist, sondern per AJAX-Call nachgeladen wird. Dies kann nun natürlich von keiner Suchmaschine ausgewertet werden.
Der Ansatz von Google geht nun dahin, dass anstatt eines reinen Hashs ein Hashbang (#!) verwendet wird. Trifft der Googlebot auf einen derart aufgebauten Link, wird dieser umgewandelt. Aus
devtyr.norberteder.com/#!/series
wird dann
devtyr.norberteder.com/?_escaped_fragment=/series
Dieser URI wird vom Googlebot erneut aufgerufen und muss nun den dahinter verborgenen Content statisch zurückliefern. Somit kann der Inhalt indiziert werden. In der Anzeige von Suchergebnissen wird jedoch der “saubere” Link verwendet.
Da Bing und Co. ebenfalls nachgezogen haben, stellt diese Lösung keine größere Problematik mehr da bzw. wird keine größere Suchmaschine ausgegrenzt.
Anwendungsgebiete Hashbangs
Für welche Bereiche des Projektes kann dies sinnvoll sein? Rufen wir uns das Konzept in Erinnerung. So werden in der Header-Leiste Aktionen angeboten, beispielsweise das Umschalten der Sprache, zu der Ergebnisse anzuzeigen sind. Auch diverse Statistiken auf der rechten Seite. Diese könnten nun so gestaltet werden, dass nicht die gesamte Seite durch den Server aufbereitet werden muss, sondern lediglich der Inhaltsbereich bezogen wird. Ein klassischer Fall für AJAX. Und somit auch für die Verwendung von Hashbangs, da somit auch der dahinter liegende Inhalt indiziert werden kann.
Anregungen für weitere Anwendungsgebiete kann man sich unter anderem auch von Twitter holen.
Wo nun JavaScript verwenden?
Ein weiteres wichtiges Faktum ist, dass die geladene Seite Inhalte für die Indizierung bereit gestellt (nicht nur gefüllte META-Tags). Daher ist es anzuraten, die initiale Seite vollständig am Server aufzubereiten. Erst durch den Benutzer folgende Aktionen sollen nun via JavaScript und AJAX ausgewertet und verarbeitet werden. Dies betrifft daher unter anderem folgende Punkte:
- Aufgrund der Browsersprache wird anfänglich entschieden, aus welchem Pool Einträge anzuzeigen sind. Hier werden die ersten n Einträge fix ausgeliefert. Per JavaScript kann es nun allerdings möglich sein, auf das Scrollverhalten des Benutzers zu reagieren und ein Infinite Scroll zu implementieren.
- Das Wechseln der Sprache (und dem damit verbundenen Austausch des Inhaltsbereiches) kann am Client passieren. Durch entsprechendes Anbieten von Hashbangs können Suchmaschinen alle angebotenen Sprachen durchforsten und indizieren.
- Etwaige Verlinkungen der Statistiken werden ebenfalls am Client gehandhabt. Die Statistiken selbst werden jedoch bereits am Server zusammengebaut. Hier sollte es völlig ausreichend sein, diese nur bei jedem erneuten Laden der Seite zu aktualisieren.
- Im Bereich für angemeldete Benutzer ist eine Indizierung durch Suchmaschinen wenig zielführend, ja sogar gänzlich unerwünscht. Sämtliche Eingabeformulare, Übersichten, Statistiken etc. können komplett via JavaScript und AJAX-Calls abgewickelt werden.
Diese Punkte geben den grundsätzlichen Rahmen vor, der auch auf andere Stellen angewandt werden kann. Es sollte so jedoch durchaus gut vermittelt werden, welche Bereiche durch JavaScript (und in weiterer Folge Backbone.js) abgedeckt werden.
Fazit
Wer eine Website implementiert möchte natürlich auch, dass diese gefunden wird. Die Auswahl der einzusetzenden Technologien ist hierbei allerdings nur die halbe Miete. Beste Technologie verschafft noch immer keine Besucher. Daher ist auf das Thema der Suchmaschinen unbedingt Rücksicht zu nehmen und sollte ihnen die Chance geben, die Website zu indizieren. Dieser Beitrag hat einige grundlegende Informationen vermittelt, um auch Seiten mit starker JavaScript-Verwendung für Suchmaschinen zu optimieren. Auf weitere Optimierungen ist bewusst nicht eingegangen worden, da es hierzu zahlreiche Inhalte im Internet gibt.
Nachdem nun viele wichtige Fragen geklärt wurden (das Konzept steht, wir wissen, wann wir JavaScript einsetzen sollten und wann nicht), kann es ab dem nächsten Teil dieser Serie ans Eingemachte gehen. Es folgt eine Einführung in Backbone.js.