3.2. JavaScript-basierte Websites crawlen
1 Übung · ca. 15 Minuten
Wie gut verstehen Suchmaschinen JavaScript?
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
Progressive Enhancement
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 Rendering-Prozess in Google
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
Rendering-Probleme bei anderen Suchmaschinen
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?
JavaScript-Crawling im Screaming Frog SEO Spider
Standardmäßig crawlt der SEO Spider im Nur-Text-Modus. Es wird also das ursprüngliche HTML ausgelesen, bevor auf der Seite JavaScript ausgeführt wird. Du kannst das Verhalten des SEO Spiders ändern. Dazu wählst Du im Hauptmenü: Konfiguration > SEO Spider. Dort klickst Du auf den Tab Rendering. Ganz oben wird dann in einer Dropdown-Liste der Rendering-Modus wählbar. Setze hier den Rendering-Modus auf JavaScript.
Wenn Du nun einen Crawl startet, durchsucht der SEO Spider sowohl das ursprüngliche als auch das gerenderte HTML. So wird es möglich, Seiten mit Inhalten oder Links zu identifizieren, die nur auf der Client-Seite verfügbar sind, und andere JavaScript-Abhängigkeiten zu erkennen.
In der URL-Übersicht kannst Du im Tab JavaScript in Echtzeit während eines Crawls die erfassten Daten mitverfolgen. Es stehen die folgenden Filter zur Verfügung:
- Seiten mit blockierten Ressourcen
Seiten mit Ressourcen (wie Bilder, JavaScript und CSS), die durch robots.txt blockiert sind. Dies kann ein Problem darstellen, da die Suchmaschinen möglicherweise nicht auf wichtige Ressourcen zugreifen können, um die Seiten korrekt wiederzugeben. - Enthält JavaScript-Links
Seiten mit die Links, die erst nach der Ausführung von JavaScript im gerenderten HTML sichtbar sind. Die Links befinden sich nicht im ursprünglichen HTML. Wie Du in dieser Lektion bereits gelernt ist, spricht das nicht grundsätzlich gegen eine Indexierung. Wichtige Links sollten nach Möglichkeit dennoch bereits im ursprünglichen HTML vorhanden sein, damit Google sie zuverlässig verarbeitet. - Enthält JavaScript-Inhalte
Seiten mit Inhalten, die erst nach der Ausführung von JavaScript im gerenderten HTML sichtbar sind. Auch hier gilt: Nach Möglichkeit sollten wichtige Inhalte bereits im ursprünglichen HTML vorhanden sein. - Noindex nur in Original-HTML
Seiten, die eine Noindex-Anweisung im ursprünglichen HTML enthalten, aber nicht im gerenderten HTML. Diese Uneinheitlichkeit kann schwerwiegende Folgen haben: Wenn Google auf eine Noindex-Anweisung stößt, überspringt es das Rendering und die Ausführung von JavaScript. Es ist sehr wahrscheinlich, dass diese Seiten nicht im Suchindex berücksichtigt werden. - Nofollow nur in Original-HTML
Seiten, die ein Nofollow-Anweisung im ursprünglichen HTML enthalten, aber nicht im gerenderten HTML. Dies hat zur Folge, dass den Links vor der Ausführung von JavaScript nicht gefolgt wird. Die uneinheitlichen Angaben müssen angeglichen werden. - Canonical nur in gerendertem HTML
Seiten, die eine Canonical-Angabe nur im gerenderten HTML enthalten. Es ist sinnvoll, die Canonical-Angaben bereist im ursprünglichen HTML zu platzieren. Bei Problemen mit dem Rendering wird auf diese Angaben zurückgegriffen. - Canonical-Nichtübereinstimmung
Seiten, die im ursprünglichen HTML einen andere Canonical-Angabe enthalten als im gerenderten HTML. Widersprüchliche Canonical-Angaben können zu unerwarteten Ergebnissen führen. Im Normalfall wird Google die Angaben der gerenderten Version verwenden. Bei Problemen mit dem Rendering wird aber auf die abweichende Angabe aus dem ursprünglichen HTML zurückgegriffen. - Seitentitel nur in gerenderten HTML
Seiten, die nur im gerenderten HTML ein Title-Tag enthalten. Das Title-Tag ist so wichtig, dass Du es unbedingt bereits in im ursprünglichen HTML definieren solltest. - Seitentitel von JavaScript aktualisiert
Seiten mit Title-Tags, deren Inhalt durch JavaScript geändert wird. Der Seitentitel im ursprünglichen HTML unterscheidet sich also vom Seitentitel im gerenderten HTML. Sicherheitshalber sollten beide Versionen identisch sein. - Meta-Beschreibung nur in gerendertem HTML
Seiten, die nur im gerenderten HTML im gerenderten HTML enthalten. Auch hier gilt: Du solltest Meta-Angaben nach Möglichkeit direkt in der ursprünglichen HTML-Version verfügbar machen. - Meta-Beschreibung aktualisiert von JavaScript
Seiten mit Meta-Beschreibungen, die durch JavaScript geändert werden. Die Meta-Beschreibung im ursprünglichen HTML weicht von der Meta-Beschreibung im gerenderten HTML ab. - H1 nur in gerendertem HTML
Seiten, die eine Überschrift erster Ordnung (H1) nur im gerenderten HTML enthalten. - H1 aktualisiert von JavaScript
Seiten mit einer Überschrift erster Ordnung (H1), die durch JavaScript geändert werden. - Verwendet alte AJAX-Crawling-Schema-URLs
URLs, die das alte AJAX-Crawling-Schema verwenden (eine URL, die ein #! Hash-Fragment enthält), das seit Oktober 2015 offiziell als veraltet ist. Best Practice: Schreibe diese URLs um. - Verwendet das Metafragment-Tag des alten AJAX-Crawling-Schemas
URLs, die das veraltete Meta-Fragment-Tag des AJAX-Crawling-Schemas enthalten. Nach Möglichkeit sollte auf das Tag und den veralteten Standard insgesamt verzichtet werden.
Warum Du das JavaScript-Crawling nicht durchgängig verwenden solltest
Obwohl Google selbst jede Webseite rendert, empfiehlt es sich, den JavaScript-Modus für den SEO Spider nur dann einzusetzen, wenn es tatsächlich notwendig ist. Warum? Durch das zusätzliche Rendering ist das JavaScript-Crawling deutlich langsamer und rechenintensiver als das Nur-Text-Crawling. Im Hintergrund müssen dafür alle Ressourcen (JavaScript, CSS und Bilder) abgerufen und das Rendering im internen Browser ausgeführt werden.
Für kleinere Websites stellt das kein wirkliches Problem dar. Bei Websites mit vielen tausend Seiten macht es jedoch einen enormen Unterschied aus. Wenn Du die JavaScript-Überprüfungen für einen Crawl nicht benötigst, kannst Du mit dem Nur-Text-Modus viel Zeit sparen.
Weitere Informationen
Screaming Frog – How To Crawl JavaScript Websites
Screaming Frog – How To Perform A Parity Audit
Übung zum Crawlen von JavaScript-basierten Websites
Du möchtest weiterlesen?
Du kannst Dich kostenlos registrieren und anschließend auf alle Inhalte im Online-Kurs zugreifen.
Du hast schon einen Account? Dann melde Dich an.
[ultimatemember form_id=“261″]