JavaScript-SEO

JavaScript-SEO umfasst alle Maßnahmen, die sicherstellen, dass Websites mit viel JavaScript von Suchmaschinen korrekt erfasst, gerendert und indexiert werden. Bei klassischen HTML-Seiten steht der gesamte Inhalt bereits im Quelltext. JavaScript-lastige Seiten dagegen erzeugen ihre Inhalte oft erst im Browser, nachdem der Code ausgeführt wurde. JavaScript-SEO zeigt, wie man solche Seiten so aufbaut, dass ihre Inhalte trotzdem zuverlässig in den Suchergebnissen erscheinen.

Ja, Google kann JavaScript-Websites grundsätzlich crawlen und indexieren, nutzt dafür aber einen zweistufigen Prozess. Zuerst wird der rohe HTML-Code ohne JavaScript-Ausführung indexiert. Später rendert Google die Seite, führt das JavaScript aus und erfasst die zusätzlich erzeugten Inhalte. Dieses Rendering passiert heute meist schnell, kann sich aber verzögern. Damit wichtige Inhalte sicher erfasst werden, empfiehlt sich Server-Side Rendering oder Static Site Generation.

Google verarbeitet JavaScript-Seiten in mehreren Schritten, oft als zwei Wellen der Indexierung beschrieben. Zuerst ruft der Googlebot die Seite ab und liest den rohen HTML-Code ohne JavaScript-Ausführung. Diese Inhalte können sofort indexiert werden. Danach kommt die Seite in eine Render-Warteschlange. Später rendert Google sie in einer aktuellen Browser-Umgebung, dem Evergreen-Googlebot auf Basis von Chromium, führt das JavaScript aus und erfasst die zusätzlich erzeugten Inhalte.

Beim Server-Side Rendering führt der Server das JavaScript aus und liefert fertiges HTML an den Browser, sodass Nutzer und Suchmaschinen sofort den vollständigen Inhalt sehen. Beim Client-Side Rendering liefert der Server nur ein leeres Gerüst, und der Inhalt entsteht erst im Browser durch JavaScript. Für SEO ist Server-Side Rendering deutlich vorteilhafter, weil die Inhalte sofort crawlbar sind. Client-Side Rendering bietet dafür nach dem ersten Laden oft eine flüssigere Navigation.

Beim Server-Side Rendering wird das JavaScript bereits auf dem Server ausgeführt, sodass der Browser und auch Suchmaschinen fertiges HTML mit allen Inhalten erhalten. Dadurch sind die Inhalte sofort verfügbar, ohne dass die Suchmaschine erst JavaScript ausführen und auf die zweite Indexierungswelle warten muss. Das verringert das Risiko, dass Inhalte verzögert oder gar nicht erfasst werden. Static Site Generation, also das Vorrendern beim Erstellen, bietet einen ähnlichen Vorteil.

Häufige Probleme sind Inhalte oder Metadaten, die nur per JavaScript erzeugt werden und im rohen HTML fehlen, sowie JavaScript- oder CSS-Dateien, die in der robots.txt blockiert sind und so das Rendering verhindern. Auch erst beim Scrollen nachgeladene Inhalte ohne Ersatz, Adressen mit Rautezeichen statt echter URLs und endloses Scrollen ohne eindeutige Seiten zählen dazu. Solche Probleme fallen oft nicht auf, weil die Seite im Browser einwandfrei funktioniert.

Beim Dynamic Rendering erhalten Suchmaschinen-Crawler eine vorgerenderte HTML-Version, während Nutzer die normale JavaScript-Anwendung sehen. Google hat das früher als Übergangslösung empfohlen, betrachtet es heute aber nur noch als Notlösung und nicht als langfristige Strategie. Empfohlen werden stattdessen Server-Side Rendering, statisches Rendering oder Hydration. Wer ein neues Projekt aufsetzt, sollte daher gleich auf eine dieser moderneren Lösungen setzen, statt auf Dynamic Rendering zu bauen.

JavaScript beeinflusst alle drei Core Web Vitals. Große JavaScript-Mengen können den Seitenaufbau verzögern und so den Largest Contentful Paint verschlechtern. Sie blockieren den Hauptprozess des Browsers, was die Reaktionsfähigkeit und damit den Wert Interaction to Next Paint verschlechtert. Nachträglich eingefügte Inhalte können außerdem das Layout verschieben und den Cumulative Layout Shift erhöhen. Maßnahmen wie Code-Splitting, Lazy Loading und Server-Side Rendering helfen, gute Werte zu erreichen.

INP steht für Interaction to Next Paint und hat im März 2024 den früheren First Input Delay, kurz FID, als Core Web Vital abgelöst. Während FID nur die Verzögerung bei der ersten Interaktion gemessen hat, bewertet INP die Reaktionsfähigkeit über die gesamte Sitzung. Das ist anspruchsvoller, weil eine Seite durchgehend schnell auf Eingaben reagieren muss. Gerade JavaScript-lastige Seiten müssen daher darauf achten, den Hauptprozess des Browsers nicht zu blockieren.

Ein einfacher erster Test ist, JavaScript im Browser zu deaktivieren: So sieht man ungefähr, welche Inhalte Google im ersten Schritt ohne Rendering erfasst. Genauer zeigt das URL-Prüfwerkzeug der Google Search Console, wie Google eine Seite tatsächlich rendert, sodass sich der gerenderte HTML-Code mit der Live-Version vergleichen lässt. Fehlen dabei wichtige Inhalte oder Metadaten, besteht Handlungsbedarf. Auch spezialisierte Crawler können Seiten mit und ohne JavaScript-Rendering vergleichen.

Single-Page-Applications sind nicht grundsätzlich schlecht für SEO, stellen aber besondere Anforderungen. Da sie traditionell den gesamten Inhalt im Browser per JavaScript erzeugen, ist der initiale HTML-Code oft fast leer, was die Indexierung erschweren kann. Mit den richtigen Maßnahmen wie Server-Side Rendering oder Vorrendern für die wichtigen Seiten lassen sich Single-Page-Applications jedoch SEO-freundlich gestalten. Wichtig sind zudem echte URLs pro Ansicht und serverseitig bereitgestellte Metadaten.

Es gibt kein universell bestes Framework, entscheidend ist die richtige Umsetzung. Frameworks, die Server-Side Rendering und Static Site Generation gut unterstützen, erleichtern SEO deutlich, weil der Inhalt als fertiges HTML ausgeliefert werden kann. Wichtiger als die Wahl des Frameworks ist, dass wichtige Inhalte und Metadaten ohne JavaScript-Ausführung verfügbar sind. Auch eine reine Bibliothek kann SEO-freundlich sein, wenn serverseitiges Rendering korrekt eingerichtet wird.