Die Suchmaschinen-Crawler haben begrenzte Fähigkeiten, JavaScript in Websites richtig und vollständig auszulesen. Die Workaround-Lösung für das Problem ist Dynamic Rendering: Es verbessert das Crawling und trägt zur Suchmaschinenoptimierung für JavaScript-Websites bei.
Wie funktioniert das Crawling grundsätzlich?
Wird eine gewöhnliche HTML-Seite aufgerufen, finden (vereinfacht dargestellt) folgende Schritte statt:
- Der Client – in der Regel der Browser – stellt eine Anfrage an den Server, lädt den HTML-Code und alle weiteren verlinkten Ressourcen wie CSS- und JavaScript-Dateien herunter.
- Hat der Browser sämtliche Ressourcen geladen, folgt die Anzeige der Website.
- Durch Klick auf einen Link findet eine neue Serveranfrage statt. HTML-Code und darin enthaltene Ressourcen werden erneut geladen.
Suchmaschinen durchsuchen das Internet mit Crawlern nach Inhalten und versuchen diese richtig auszulesen. Crawler folgen den Hyperlinks, sammeln sämtliche URLs und geben die Daten an die Indexer weiter. Im nächsten Schritt interpretieren die Algorithmen von Google und Co. die Inhalte und bewerten diese für die Anzeige in den Suchtreffern.
Was ist der Unterschied beim Laden von JavaScript-Websites und HTML-Seiten?
Bei auf JavaScript basierten Websites ist der Inhalt der HTML-Dokumente für Crawler relativ leer, hier funktioniert der Seitenaufruf (vereinfacht dargestellt) anders:
Beim Anfordern einer Seite wird ebenfalls eine HTML-Datei mit Verweisen auf CSS- und JavaScript-Dateien geladen. Die HTML-Datei enthält jedoch keinen oder nur wenig Inhalt, stattdessen findet das Hinzufügen von Inhalten per JavaScript statt. Der HTML-Code mit Inhalten entsteht erst im Browser des Clients. Beim Klick auf einen Link muss der Client vom Server keine neue HTML-Datei beziehen, sondern lädt nur neue Informationen nach.
Das Problem von JavaScript und SEO
Das Problem von JavaScript-basierten Websites: Die Suchmaschinen lesen den HTML-Code einer Website aus, können jedoch JavaScript nicht richtig ausführen und daher per JavaScript geladene oder nachgeladene Inhalte nicht auslesen. Wenn der gesamte Seiteninhalt – wie in Punkt zwei beschrieben – nachgeladen wird, sieht der Suchmaschinen-Crawler vom Inhalt nichts.
Da das einzelne HTML-Dokument keinen oder nur wenig Inhalt enthält, muss der Indexer die Aufgaben eines Browsers übernehmen und die Seiteninhalte rendern. Anschließend kann der Inhalt verarbeitet und weitere Links können gecrawlt werden.
Im Unterschied zu gewöhnlichen HTML-Seiten muss der Suchmaschinen-Algorithmus die JavaScript-basierten Seiten also rendern.
Der Googlebot kann JavaScript seit 2014 gut rendern – andere Bots können dies weniger gut
Vielen Crawlern fällt das Verarbeiten von JavaScript schwer. Laut Google kann der Googlebot bereits seit 2014 JavaScript rendern. Wichtig: Die robots.txt darf JavaScript- und CSS-Ressourcen nicht blockieren. Allerdings können Fehler im JavaScript-Code das Auslesen der Inhalte durch Crawler schnell beenden. Andere Bots haben noch immer große Probleme mit dem Auslesen Javascript-basierter Websites. Grundsätzlich erfordert das Rendering durch die Crawler hohe Ressourcen, weswegen sich der Indexierungs-Prozess zumindest verlangsamt.
Probleme mit dem client-seitigen Rendering
Die Bots der Suchmaschinen haben also ihre Probleme mit dem client-seitigen Rendering von Websites. Zudem führt das Rendering durch den Client zu höheren Ladezeiten der ersten Seite, was ganz klar nachteilig für den Anwender ist. Die Geschwindigkeit hängt allerdings auch von der Rechenleistung des Clients ab.
Die Lösung: Server-Side-Rendering (SSR) für Clients und Crawler
Der HTML-Code wird nicht vom Client errechnet, sondern bereits vom Server vorab gerendert und fertiggestellt gesendet. Da das erforderliche JavaScript bereits auf dem Server läuft, besteht die Möglichkeit, Browsern und Crawlern das serverseitig vorab gerenderte HTML zu übergeben. Dabei führt der Client nur das JavaScript aus, das durch User-Interaktionen zustande kommt.
JavaScript-SEO mit Dynamic Rendering
Abbildung: So funktioniert Dynamic Rendering (Quelle: https://developers.google.com/search/docs/guides/dynamic-rendering)
Beim Dynamic Rendering erfolgt eine Unterscheidung zwischen Client/Browser und Crawler:
- Der Browser erhält die JavaScript-Variante der Seite und rendert diese auf dem Client.
- Der Crawler bekommt eine vorgerenderte Version.
Suchmaschinen-Bots laden eine SSR-Website (Server-Side-Rendering), während Besucher eine client-basierte Seite erhalten. Durch Auslesen des User Agents erkennt der Server, ob die Anfrage von einem Browser oder Crawler stammt, zusätzlich kann die IP-Adresse zur Unterscheidung verifiziert werden. Dieses Verhalten wird laut Google nicht als „Cloaking“ gewertet.
Hinweis: Als Cloaking gelten SEO-Techniken, bei denen Crawlern unter derselben URL ein anderer Inhalt präsentiert wird als dem Besucher. Suchmaschinen verbieten das Cloaking in ihren Richtlinien und strafen entsprechende Websites mit einem Ausschuss aus dem Index ab.
Tipp: Dynamic Rendering gilt nicht als Cloaking. Jedoch müssen vermeiden, beispielsweise aus SEO-Gründen zusätzliche Keywords und Links in die vorgerenderte Version hinzuzufügen. Dies kann sonst eine Abstrafung zur Folge haben.
Für die Implementierung von Dynamic Rendering können Sie unter anderem dynamische Renderer wie prerender.io, Rendertron und Puppeteer verwenden. Weitere Infos finden Sie in der Google-Dokumentation zu Dynamic Rendering.
Dynamic Rendering wird für Websites mit sich häufig änderndem Inhalt empfohlen. Die User Experience, speziell die Ladezeit für die Anzeige erster Inhalte, kann vom Hybrid Rendering profitieren, zum Beispiel mit Angular Universal für das Angular Framework.
Testen mit der Search Console
Um herauszufinden, ob Google eine vorgerenderte Version der Website bekommt, konnten Sie bisher die Funktion „Fetch as Google“ in der Search Console nutzen. Seit dem 28. März 2019 steht dafür das neue URL Inspection Tool bereit.
Zusammenfassung
Dynamic Rendering kann die Indexierung der Suchmaschinen-Crawler verbessern, eignet sich für Websites mit JavaScript und sich häufig ändernden Inhalten. Die unterschiedliche Bereitstellung von Versionen für Browser und Bots wird nicht als Cloaking angesehen, solange Sie die Inhalte für den Crawler nicht mit zusätzlichen Links oder anderen SEO-Maßnahmen verändern.
