Das Debuggen des JavaScript-Renderings in der Google Search Console umfasst die Verwendung des URL-Prüfungstools, um das anfängliche HTML mit der finalen gerenderten Version zu vergleichen. Sie müssen eine URL eingeben, auf „Live-URL testen“ klicken und dann „Gerenderte Seite anzeigen“ auswählen, um das DOM zu sehen. Dadurch können Sie überprüfen, ob Googlebot Ihre Inhalte nach der Ausführung von Skripten sehen kann, und sicherstellen, dass Ihr Text, Ihre Links und Ihre strukturierten Daten ordnungsgemäß indexiert werden.
Wie verarbeitet Googlebot JavaScript-Anwendungen?
Die Google-Suche verarbeitet Webanwendungen in drei Hauptphasen: Crawling, Rendering und Indexierung. Wenn ein Crawler eine Seite findet, lädt er zuerst das rohe HTML herunter. Wenn die Seite stark auf Skripte angewiesen ist, um Inhalte anzuzeigen, fügt der Crawler die Seite einer Rendering-Warteschlange hinzu. Diese Warteschlange ist erforderlich, da das Rendering mehr Rechenressourcen als ein einfaches Crawling erfordert.
Der Web Rendering Service (WRS) verwendet eine Evergreen-Version des Chromium-Browsers, um Skripte auszuführen und die finale Seitenstruktur aufzubauen. Erst nach Abschluss dieses Prozesses kann das System den vollständigen Text und die Navigationselemente sehen. Wenn Ihre Skripte während dieser Phase fehlschlagen oder die Zeit überschreiten, sieht der Indexer möglicherweise nur eine leere Vorlage oder einen Lade-Spinner.
Google verarbeitet JavaScript-Web-Apps in drei Hauptphasen: Crawling Rendering Indexierung
Google Search Central
Können Sie genau sehen, was Googlebot rendert?
Das URL-Prüfungstool bietet ein direktes Fenster in die Rendering-Engine. Durch die Verwendung der Funktion „Live-URL testen“ lösen Sie eine Echtzeitanfrage von Googlebot aus. Sobald der Test abgeschlossen ist, öffnet der Link „Gerenderte Seite anzeigen“ ein Seitenpanel mit drei Hauptregisterkarten: HTML, Screenshot und Weitere Informationen.
Die Registerkarte „HTML“ zeigt das Document Object Model (DOM) nach der Ausführung von JavaScript. Sie sollten diesen Text kopieren und nach spezifischen Produktnamen oder Beschreibungen suchen, die von Ihren Skripten generiert werden. Wenn der Text auf dieser Registerkarte fehlt, aber in Ihrem eigenen Browser sichtbar ist, tritt wahrscheinlich ein Rendering-Fehler auf.
- Geben Sie die Ziel-URL in die obere Suchleiste der Search Console ein.
- Klicken Sie auf die Schaltfläche „Live-URL testen“, um aktuelle Daten abzurufen.
- Wählen Sie „Gerenderte Seite anzeigen“, um die Ergebnisse zu untersuchen.
- Überprüfen Sie die Registerkarte „Screenshot“, um zu sehen, ob das Layout korrekt aussieht.
- Überprüfen Sie die Registerkarte „Weitere Informationen“ auf Konsolennachrichten und Ressourcenfehler.
Warum fehlen Inhalte im gerenderten HTML?
Inhalte werden oft nicht angezeigt, weil Googlebot nicht auf die notwendigen Skriptdateien zugreifen kann. Wenn Ihre robots.txt-Datei die Ordner /static/ oder /assets/ blockiert, überspringt die Rendering-Engine diese Dateien. Dies führt zu einer unvollständigen Seite. Sie finden diese blockierten Ressourcen auf der Registerkarte „Weitere Informationen“ im Abschnitt „Seitenressourcen“.
Ein weiteres häufiges Problem ist das Ausführungs-Timeout. Googlebot wartet nicht unbegrenzt auf den Abschluss von Skripten. Wenn Ihre Anwendung langsame API-Aufrufe tätigt, um Daten abzurufen, gibt der Renderer möglicherweise auf und indexiert die Seite, bevor der Inhalt eintrifft. Effizienz bei der Skriptausführung und schnelle Serverantwortzeiten sind der Schlüssel für eine erfolgreiche Indexierung.
Googlebot ruft eine URL aus der Crawling-Warteschlange ab, indem er eine HTTP-Anfrage stellt, und prüft zunächst, ob Sie das Crawling erlauben.
Google Search Central
Wie Alien Road JavaScript-Rendering-Audits anwendet
Unser Team bei Alien Road verwendet einen systematischen Workflow, um unsere Kunden vor Indexierungslücken zu schützen. Wir beginnen damit, die Ausgabe von „Seitenquelltext anzeigen“ mit dem in der Search Console gefundenen „Gerenderten HTML“ zu vergleichen. Wir suchen nach dem Vorhandensein von Hauptinhalten wie Produktrastern oder Artikeltext in der gerenderten Version. Wenn wir eine Diskrepanz feststellen, verwenden wir die Konsolenprotokolle im URL-Prüfungstool, um den spezifischen Skriptfehler zu finden.
Bei einem typischen Projekt für einen Shopify-Shop haben wir festgestellt, dass eine Bewertungs-App eines Drittanbieters für Suchmaschinen nicht angezeigt wurde. Durch Überprüfung des Abschnitts „Weitere Informationen“ haben wir festgestellt, dass das Skript aufgrund einer nicht unterstützten JavaScript-Funktion fehlschlug. Wir haben einen serverseitigen Ansatz für diese Bewertungen empfohlen. Diese Anpassung stellte sicher, dass die Bewertungen zur Sichtbarkeit der Website und zu den Keyword-Rankings beitrugen.
- Überprüfen Sie die robots.txt-Datei, um sicherzustellen, dass alle JS- und CSS-Pfade offen sind.
- Vergleichen Sie das Text-Code-Verhältnis im anfänglichen Crawl mit dem Live-Test.
- Identifizieren und beheben Sie Konsolenfehler, die vom WRS gemeldet wurden.
- Stellen Sie sicher, dass interne Links standardmäßige a-href-Tags anstelle von Click-Handlern verwenden.
- Dokumentieren Sie alle fehlenden Elemente, damit das Entwicklungsteam sie beheben kann.
Ist dynamisches Rendering eine langfristige Lösung?
Dynamisches Rendering war einst eine beliebte Methode, um Bots eine flache HTML-Version einer Seite bereitzustellen und Benutzern gleichzeitig das vollständige skriptlastige Erlebnis zu bieten. Google betrachtet dies jedoch mittlerweile als vorübergehende Lösung. Es erhöht die Komplexität des Server-Setups und kann zu Inhaltsdiskrepanzen führen, wenn die beiden Versionen nicht synchron gehalten werden.
Die moderne Empfehlung ist die Verwendung von Server-Side Rendering (SSR) oder Static Site Generation (SSG). Diese Methoden stellen sicher, dass der Inhalt bereits im HTML vorhanden ist, wenn Googlebot die Seite zum ersten Mal abruft. Dies entfällt die Abhängigkeit von der Rendering-Warteschlange und sorgt für eine schnellere Indexierung neuer oder aktualisierter Inhalte.
Dynamisches Rendering ist ein Workaround und keine empfohlene Lösung, da es zusätzliche Komplexitäten und Ressourcenanforderungen schafft.
Google Search Central
Was sind die häufigsten JavaScript-Fehler in der Search Console?
Die Registerkarte „Weitere Informationen“ listet häufig JavaScript-Ausnahmen auf, die verhindert haben, dass die Seite korrekt geladen wird. Häufige Fehler sind Syntaxprobleme, die die Chromium-Version nicht analysieren kann, oder Fehlschläge beim Abrufen externer APIs. Wenn sich ein Skript außerdem auf Benutzerinteraktionen wie Klicken oder Scrollen verlässt, um Inhalte zu laden, verpasst Googlebot diesen Inhalt wahrscheinlich, da es diese Aktionen nicht ausführt.
Möglicherweise sehen Sie auch „Soft 404“-Fehler, die durch Skripte verursacht werden. Wenn Ihre App über JavaScript eine Nachricht „Produkt nicht gefunden“ anzeigt, während sie einen 200 OK-Statuscode zurückgibt, indexiert Google die Seite möglicherweise dennoch als 404. Das Überprüfen des gerenderten Screenshots hilft Ihnen zu sehen, ob der Bot auf diese Fehlerzustände anstelle des tatsächlichen Inhalts stößt.
Umsetzbare Schritte für Ihre Website diese Woche
Um sicherzustellen, dass Ihre Website gesund ist, wählen Sie Ihre fünf wichtigsten Landingpages aus und führen Sie sie durch das URL-Prüfungstool. Betrachten Sie speziell die Registerkarte „HTML“ und suchen Sie nach Ihren primären Keywords. Wenn sie nicht vorhanden sind, haben Sie ein Rendering-Problem, das sofortige Aufmerksamkeit von Ihrem technischen Team erfordert.
- Überprüfen Sie, ob Ihre Hauptnavigationslinks im gerenderten HTML sichtbar sind.
- Stellen Sie sicher, dass Ihre Bilder nach dem Rendering Alt-Tags im DOM haben.
- Überprüfen Sie, ob Meta-Tags und strukturierte Daten von Ihren Skripten korrekt injiziert werden.
- Beheben Sie alle „roten“ Ressourcenfehler im Bedienfeld „Weitere Informationen“.
- Testen Sie Ihre Website auf verschiedenen Geräten mit dem Mobilfreundlichkeits-Testtool, das denselben Renderer verwendet.