Search Experience Optimization: Verständnis der Nutzererwartung für die Content-Erstellung
Webseiten die komplett mit JavaScript realisiert werden, sind im Bereich SEO immer noch ein recht unerforschtes Gebiet. Laut eigenen Aussagen Seitens Google, kann der Googlebot Inhalte von Webseiten die durch JavaScript ausgespielt werden rendern, crawlen und indexieren. Wieso diese Aussage „gefährlich“ sein kann und welche Fallstricke sich hinter dem Zusammenspiel von JavaScript-Webseiten und SEO verstecken, wird in diesem Artikel erläutert.
Können Suchmaschinen JavaScript-Webseiten crawlen und indexieren?
Laut der offiziellen Aussage von Google, kann der Googlebot JavaScript rendern, die Inhalte crawlen und indexieren. Auf der AngularConnect 2016 in London, geht Googles John Mueller auf das Thema JavaScript SEO ein und bestätigt, dass Google ein gutes Verständnis dafür hat, Inhalte in JavaScript zu rendern und zu crawlen.
Leider gibt es einige Fallstudien die genau diese Aussage wiederlegen. Liegt es bei diesen Fallstudien wirklich an der mangelnden Interpretationsfähigkeit Seitens Googles oder schlichtweg an einer fehlerhaften Implementierung von JavaScript?
Abgesehen davon, gibt es zum aktuellen Stand wenige Crawler die JavaScript rendern können. Crawler von anderen Suchmaschinen und sozialen Netzwerken versuchen überhaupt nicht JavaScript zu rendern. Auch führende SEO-Tools sind hinsichtlich dieser Thematik noch hinterher. Dieser Stand wird sich sicherlich in der Zukunft grundlegend ändern.
JavaScript ist hier um zu bleiben. Andere Suchmaschinen, soziale Netzwerke und Softwareanbieter werden nicht an dem Thema vorbeikommen.
Wie erfassen Suchmaschinen JavaScript Inhalte?
Anders als bei HTML-Webseiten, bei denen der Googlebot den Quellcode crawlt und deren Inhalte gegebenenfalls indexiert, muss bei Webseiten die mit JavaScript aufgebaut sind anders vorgegangen werden.
Bei JavaScript-Basierenden Webseiten muss der Googlebot den DOM (Document Objekt Model) der Webseite lesen und analysieren. Dass bedeutet, dass der Googlebot jedes relevante JavaScript ausführen muss, um den Inhalt der Webseite erfassen zu können. Im Prinzip muss der Googlebot genau das selben Vorgehen durchlaufen, wie ein Browser, um eine voll gerenderte Webseite crawlen zu können.
Quellcode vor und nach dem Rendern von JavaScript
Abbildung 1: Links ist der Quellcode einer Webseite zusehen vor dem Rendering vom JavaScript. Rechts nach dem Rendering
Bei einem Blick auf den Quellcode einer JavaScript-Basierenden Webseite, wird schnell deutlich, dass die vom Browser angezeigten Inhalte im Quellcode nicht zu sehen sind. Das liegt daran, dass kein JavaScript ausgeführt wurde, also der DOM der Webseite nicht gerendert wurde. Erst nachdem das JavaScript ausgeführt wird, werden bei korrekter Implementierung alle Inhalte auch im Quellcode sichtbar.
In der linken Spalte in Abbildung 1 ist der Quellcode einer JavaScript-Basierenden Webseite zu sehen. Hier ist gut zu erkennen, dass im Quellcode keinerlei Inhalte zu sehen sind. In der rechten Spalte wurde das JavaScript bereits ausgeführt, daher sind hier alle Inhalte die im Browser zu sehen sind auch im Body-Bereich des gerenderten Quellcodes vorhanden.
Um sicher zu gehen, wurden Textbereiche aus dem Browser kopiert und im gerenderten Quellcode gesucht. Hier konnten alle Inhalte einwandfrei gefunden werden.
Wie wird JavaScript vom Browser ausgeführt?
Abbildung 2: PHP-Rendering und JavaScript-Rendering zwischen Browser und Server
Wieso sind im Quellcode keine Inhalte zu sehen, die durch JavaScript erzeugt werden? Die Erklärung ist relativ einfach. JavaScript wird nicht vom Server ausgeführt, sondern vom Browser (Client). Ein vereinfachter Ablauf wird im Folgenden erläutert und ist in Abbildung 2 grafisch dargestellt.
Der Browser stellt eine GET-Anfrage an den Server
Der Server führt das PHP-Script aus (z.B. beim Einsatz eines CMS)
Der Server gibt den HTML-Quellcode an den Browser zurück
Der Browser führt das JavaScript aus
Um schnell zu überprüfen, welche Inhalte durch JavaScript dargestellt werden, kann mit dem integrierten Developer Tool im Google Chrome Browser die JavaScript-Funktion deaktiviert werden. Alle Inhalte die danach nicht mehr sichtbar sind, werden durch JavaScript ausgeführt.
Wie rendert der Googlebot JavaScript?
Abbildung 3: Rendern von JavaScript im Developer Tool von Google Chrome simulieren
Um JavaScript-Basierende Webseiten für SEO zu analysieren, muss nur ein kleiner Teil von JavaScript betrachtet werden. Im folgenden Abschnitt wird vereinfacht dargestellt, was passiert, wenn der Googlebot eine JavaScript-Basierende Webseite besucht.
Um diesen Ablauf zu simulieren, wird das integrierte Developer Tool im Google Chrome Browser genutzt.
In einen „leeren Bereich“ der Webseite rechts-klicken und „Untersuchen“ auswählen
Um den gesamten Inhalt zu erhalten, den HTML-Tag im rechten Bereich des Browsers auswählen
Mit einem Rechtsklick auf den HTML-Tag auf „Copy“ und „Copy OuterHTML“ navigieren um den gesamten Inhalt zu kopieren
Der kopierte HTML-Code kann nun in Textprogramm eingefügt werden, um den Inhalt einzusehen und zu analysieren
Dieser Vorgang kann auch verwendet werden, um den Inhalt einer JavaScript-Basierenden Webseite auf OnPage-Faktoren zu überprüfen.
Diese Vorgehensweise wurde auch bereits von Justin Briggs thematisiert.
Was ist ein Headless-Browser?
Ein Headless-Browser ist ein Browser ohne visuelle Komponenten. Das bedeutet, dass der Headless-Browser keine Inhalte darstellt um mit diesen wie ein Webseitenbesucher zu interagieren. Es wird lediglich der Quellcode ausgegeben. Ein Headless-Browser beschreibt relativ genau, wie der Googlebot mit einer JavaScript-Basierenden Webseite interagiert.
Schwierigkeiten bei dynamischen Inhalten durch JavaScript
Da Google den gerenderten Quellcode direkt nach dem Load-Event crawlt, werden alle dynamischen Inhalte die während bzw. nach einem User-Event geladen werden, gänzlich ignoriert. Der Load-Event ist beendet, wenn die Seite komplett geladen wurde. Hierbei sollte beachtet werden, dass der Googlebot nach etwa 5 Sekunden einen Screenshot der Webseite erstellt. Alle wichtigen Inhalte sollten in dieser Zwischenzeit geladen sein.
User-Events führen dazu, dass JavaScript den Quellcode einer Webseite verändert. Dies kann ebenfalls mit dem integrierten Developer Tool im Google Chrome Browser simuliert und veranschaulicht werden. Ein User-Event kann z.B. ein Klick (onClick) auf einen Tab sein, der weitere Inhalte zum Vorschein bringt. Aus diesem Grund ist es wichtig, dass alle wichtigen Inhalte die von Google gecrawlt werden sollen, auf der Seite dargestellt werden, ohne das eine Interaktion des Webseitenbesuchers notwendig ist.
Es konnte weiter beobachtet werden, dass Google auch Inhalte indexiert, die erst durch ein User-Event erstellt werden. Der Grund dafür kann sein, dass ein Headless-Browser auch durch Befehle mit der Webseite interagieren kann. Hier war kein klares Muster zu erkennen, da andere Inhalte gänzlich ignoriert wurden. Deswegen die Empfehlung, alle wichtigen Inhalte bereitzustellen ohne die Notwendigkeit eines User-Events.
Indexierbare Urls bei JavaScript
Für die URL-Struktur sollten bei JavaScript-Basierenden Webseiten ein paar Punkte beachtet werden. Es ist wichtig sicherzustellen, dass beim Aufruf von Seiten jeweils eine neue URL aufgerufen wird. Das bedeutet, dass jeder Seite einer Domain eine eigene URL zugeordnet wird.
Des Weiteren sollten alle eigenständigen URLs ohne Hash „#“ realisiert werden, da Google die Angaben in der URL nach dem „#“ ignoriert. Dies führt dazu, dass Google alle internen Verlinkungen als Links zur Startseite identifiziert und keinen weiteren Links folgt. Für Sprungmarken kann ein „#“, wie auch bei herkömmlichen Webseiten, verwendet werden. Zu empfehlen sind auch bei JavaScript-Basierenden Webseiten „sprechende“ URLs.
Um dem Googlebot das crawlen von Links zu ermöglichen, sollten alle Links über den HTML <a> Tag realisiert werden. Auch hier sollte darauf geachtet werden, dass diese Links nicht durch ein User-Event (z.B. onClick) aufgerufen werden.
Meta-Angaben und weitere wichtige Angaben im Head-Bereich
Wie bereits im oberen Abschnitt erwähnt wurde, sind Crawler von anderen Suchmaschinen und sozialen Netzwerken noch nicht in der Lage, JavaScript zu rendern. Um diesen Crawlern wichtige Informationen wie Title-Tag, Meta-Description, Cannonical-Tag, Meta-Robots-Angaben und wenn vorhanden OpenGraph-Angaben bereit zu stellen, sollten diese Inhalte ohne vorher gerendert werden zu müssen, im Head-Bereich der Webseite aufrufbar sein.
Strukturierte Daten mit JSON-LD realisieren
Google selbst empfiehlt für strukturierte Daten bei JavaScript-Basierenden Webseiten den Einsatz von JSON-LD. Auf Microdata oder RDFa Formate sollte in diesem Fall verzichtet werden. Allgemein empfiehlt Google das JSON-LD Format für alle Arten von Webseiten und zieht es allen anderen vor.
Welches JS Framework ist das richtige für SEO?
Sollte das Angular JS Framework bevorzugt werden? Dies liegt natürlich nah, da dieses Framework direkt von Google selbst stammt. Für Angular JS gibt es deutlich mehr Hilfestellungen seitens Googles, was definitiv für den Einsatz von Angular JS spricht. Auch andere Frameworks eignen sich für dein Einsatz von SEO. Diese Entscheidung sollte aber jeder Verantwortliche selbst treffen.
Google Search Console einzige verlässliche Quelle
Abbildung 4: Rendering von JavaScript mit dem Screaming Frog SEO Spider
Eine Hilfestellung bietet der Screaming Frog SEO Spider. Dieser Crawler bietet bereits die Funktion, JavaScript zu rendern und erstellt ähnlich wie der Googlebot einen Screenshot der Webseite nach dem Load-Event.
Unter dem Menüpunkt „Configuration » Spider » Rendering“ kann hier der Punkt „JavaScript“ ausgewählt werden. Nach dem erfolgreichen crawlen der Webseite kann jede URL als „Rendered Page“ betrachtet werden. Dieser Screenshot kann bereits erste Aufschlüsse darüber geben, ob es Probleme beim Rendern der Webseite gibt. Zu beachten ist, dass diese Funktion lediglich in der Paid-Version des Screaming Frog SEO Spiders verfügbar ist.
Obwohl sich der Sreaming Frog SEO Spider ähnlich die der Googlebot verhält, ist leider damit nicht gewährleistet, ob der Googlebot exakt so verfährt und diese Seite genauso gerendert wird.
Abbildung 5: „Abruf wie durch Google“ in der Google Search Console
Die einzige zuverlässige Quelle ist die Google Search Console. Unter dem Menüpunkt „Crawling » Abruf wie durch Google“ können Google URLs übermittelt werden, um diese crawlen und indexieren zu lassen. Hier muss der Befehl „Abrufen und Rendern“ an Google gesendet werden. Nach dem Klick auf die eingereichte URL lässt sich einsehen, wie der Googlebot und ein Besucher die Webseite sieht.
Damit kann verglichen werden, ob Abweichungen der beiden Versionen auftreten. Des Weiteren werden noch Ressourcen auf der Seite angezeigt, die Google nicht abrufen konnte. Diese Einsicht ist sehr hilfreich um Probleme die durch JavaScript oder andere Ressourcen versucht wurden einzusehen.
Der Einsatz von Pre-Rendering-Diensten
Wenn der Googlebot aus verschiedenen Gründen nicht in der Lage ist, JavaScript zu rendern, greift dieser auf den nichtgerenderten Quellcode der Webseite zurück, um diesen zucrawlen. Das hätte für SEO verehrende Auswirkungen, wenn der komplette Inhalt der Webseite durch JavaScript dargestellt wird. Deswegen setzen viele SEO-Verantwortliche heutzutage auf Pre-Rendering-Dienste wie z.B. Prerender.io, BromBone oder SEO.js.
Diese Dienste führen dazu, dass JavaScript vorgerendert wird. Das bedeutet, der Googlebot und alle anderen Crawler bekommen bereits den gerenderten HTML-Code bereitgestellt und müssen nicht selbst rendern um die Inhalte crawlen zu können. Das bringt den großen Vorteil mit sich, dass ganz genau sichergestellt werden kann, wie der HTML-Code der dem Googlebot bereitgestellt wird, aussieht.
Zum aktuellen Stand, ist der Einsatz von Pre-Rendering-Diensten zu empfehlen. Insbesondere da andere Crawler abgesehen von Google keine JavaScript rendern, sollten zumindest alle wichtigen Informationen im Head-Bereich der Webseite als HTML-Code vorhanden sein.
Isomorphic JavaScript mit Angular Universal
Mit Angular Universal bietet Google die Möglichkeit, JavaScript direkt auf dem Server vorzurendern. Das bedeutet, dass sowohl dem Googlebot, als auch allen anderen Crawlern und jedem Webseitenbesucher derselbe HTML-Code ausgegeben wird. Diese Methode hat gegenüber Pre-Rendering-Diensten den Vorteil, dass allen Besuchern einer Webseite, egal ob Crawler oder ein menschlicher Webseitenbesucher, der selbe Quellcode bereitstellt wird. Isomorphic JavaScript stellt aktuell die wohl beste Möglichkeit da, um JavaScript und SEO zu verheiraten. Ob diese Lösung für kleine Webseiten bzw. Applikationen sinnvoll ist bleibt fragwürdig, da der damit verbundene Aufwand deutlich größer ist und das Know-How Seitens der Entwickler notwendig ist. Zudem ist dieses Gebiet noch recht unerprobt. Zu diesem Thema hat Bartosz Goralewicz einen ausführlichen Beitrag bei Search Engine Journal veröffentlicht.
Fazit
JavaScript-Basierende Webseiten stellen SEO-Verantwortliche vor „neue“ Herausforderungen, da ein tiefes Know-How im Bereich technisches SEO und Webentwicklung notwendig ist. Eine enge Zusammenarbeit zwischen Entwicklern und SEO-Verantwortlichen ist noch wichtiger den je, um ein Projekt in Sachen SEO sicher und ohne Rankingverlust zu steuern. JavaScript bringt hinsichtlich der Webentwicklung großes Potenzial mit sich, was SEO-Verantwortliche in der Zukunft dazu treiben sollte, sich mit dem Thema JavaScript SEO intensiver auseinander zu setzen. Google selbst verbessert das Verständnis von JavaScript stetig, während andere Crawler diesbezüglich noch hinterher sind. Deswegen ändern sich Herangehensweisen um SEO-Projekte zu verantworten in kurzen Zeitabständen, es wird viel Zeitaufwand in Testing gesteckt und der Einsatz von Pre-Rendering-Diensten ist aktuell zu empfehlen. Es bleibt weiter spannend zu beobachten, wie weit sich JavaScript und SEO in der Zukunft weiterentwickelt.
Weitere Artikel
Genialer Artikel!
JavaScript und SEO zusammen ist schon kein leichtes Thema.
Und mit Sicherheit befindet man sich hier noch ganz am Anfang der Entwicklung.
Ist aber mal spannend und interessant zu sehen, wie Google solche Seiten sieht bzw. der Crawler und was für Probleme es gibt.
Bin auf jeden Fall gespannt was da noch kommen wird und vor allem, was sich Google noch alles einfallen lässt. 🙂
LG
Brian
Hi Brian,
vielen Dank für deinen Kommentar.
Definitv, das Zusammenspiel aus JavaScript und SEO befindet sich meiner Meinung nach noch in den Kinderschuhen. Ich denke, dass wir diesbezüglich noch einiges erwarten können. Wir bleiben definitiv an dem Thema dran.
Beste Grüße, Artur