3.2. JavaScript-basierte Websites crawlen

In den ersten Jahren konnte der Google-Crawler Inhalte, die dynamisch mit JavaScript erstellt wurden, nicht crawlen und somit nicht indexieren. Für Suchmaschinen-Bots war nur sichtbar, was im statischen HTML-Quellcode stand.

Inzwischen sieht das anders aus. Die Crawler von Google, Bing und anderen sind mit unterschiedlichen Einschränkungen in der Lage, JavaScript zu verstehen und auszuführen.

Beliebte Frameworks wie Angular, React, Vue.JS und Single Page Applications (SPAs) und Progressive Web Apps (PWAs) haben dazu geführt, dass auch die Crawler modernisiert wurden. 2019 stellte Google seinen neuen Bot Evergreen vor. Er arbeitet wie ein tatsächlicher Webbrowser. Die Seiten werden gerendert und danach nimmt der Bot eine Indexierung vor.

Das ursprüngliche HTML und das gerenderte HTML können sich durch den Einsatz von JavaScript unterscheiden. Für Website-Betreiber ist es wichtig, diese Unterschiede nachvollziehen zu können, gerade wenn nicht eindeutig ist, welche Version letztendlich die Auffindbarkeit oder Darstellung in den Suchergebnissen beeinflusst.

Wichtig: Im Screaming Frog wird für das JavaScript-Rendering ein interner Chrome-Browser genutzt. So wird erreicht, dass es eine möglichst große Übereinstimmung mit den Ergebnissen des Google-Bots gibt.

Weitere Informationen
Google – Der neue Evergreen-Googlebot

Google empfiehlt, für Websites zuerst die Struktur und Navigation mit HTML zu erstellen und dann Verbesserungen in Darstellung und Funktion mit JavaScript umzusetzen. Der Fachbegriff dafür: Progressive Enhancement.

Dahinter verbirgt sich ein Konzept der Webentwicklung, bei dem die Zugänglichkeit und Funktionalität für alle Benutzer, unabhängig von den Fähigkeiten oder Einschränkungen ihrer Geräte, Netzwerke oder Browser, hergestellt wird. Die Idee dahinter ist, dass die Website schrittweise verbessert wird, indem fortgeschrittene Funktionen und Technologien hinzugefügt werden, ohne die grundlegende Funktionalität für Benutzer zu beeinträchtigen, die diese nicht nutzen können.

Progressive Enhancement ermöglicht es, dass alle Benutzer die gleiche Basisfunktionalität erhalten, während fortgeschrittene Benutzer zusätzliche Funktionen und Verbesserungen nutzen können. Um eine hohe Kompatibilität mit den Suchmaschinen-Crawlern zu erreichen, sollte auf serverseitiges Rendering, statisches Rendering oder Hydration gesetzt werden.

Hydration ist eine Technik, die das serverseitige Rendern von HTML mit dem clientseitigen Rendering von JavaScript kombiniert. Es ermöglicht das Vorladen einer vollständig gerenderten HTML-Seite, während gleichzeitig JavaScript-Funktionalität hinzugefügt wird, um die Interaktivität und Benutzerfreundlichkeit der Website zu verbessern.

Der Google-Bot arbeitet für JavaScript-Seiten einen zweistufigen Indexierungsprozess ab. Zunächst wird das statische HTML gecrawlt und indexiert. Im Anschluss wird die Seite gerendert und die Inhalte und Links im gerenderten HTML gecrawlt und indexiert.

Zwischen dem ersten und zweiten Crawling- und Indexierungsdurchgang liegen in etwa fünf Sekunden. Wenn das Rendering aus irgendeinem Grund länger dauert, kann es passieren, dass die Elemente aus dem ersten Durchgang für die Indexierung verwendet werden. Unterscheiden sich beispielsweise die Angaben im Title-Tag in der ursprünglichen und der gerenderten HTML-Version, ist es möglich, dass Google das überschreibende Title-Tag aus der JavaScript-Version nicht wahrnimmt.

Weitere Informationen
Google – Grundlagen von JavaScript-SEO

Google ist beim Auslesen von JavaScript-Websites anderen Suchmaschinen überlegen. Das wird gerade im Vergleich zu Bing deutlich. Microsofts Suchmaschine hat große Schwierigkeiten, komplexeres JavaScript zu rendern und entsprechend zu crawlen und indexieren.

Weitere Informationen
Screaming Frog – Is Bing Really Rendering & Indexing JavaScript?