JavaScript SEO: Wenn Google deine Inhalte nicht sieht

Deine Webseite sieht im Browser perfekt aus – aber Google zeigt deine Inhalte einfach nicht an? Das Problem liegt häufig an JavaScript. Immer mehr Webseiten nutzen JavaScript-Frameworks wie React, Angular oder Vue. Was für Nutzer großartig funktioniert, kann für Google zum echten Hindernis werden.

In diesem Artikel erfährst du, warum JavaScript für SEO problematisch sein kann, wie du Probleme erkennst und welche Lösungen es gibt. Wenn du noch nicht genau weißt, wie Google Webseiten verarbeitet, lies zuerst unseren Artikel Wie funktioniert die Google-Suche?.

Wie Google JavaScript rendert: Two-Wave Indexing

Google verarbeitet Webseiten in zwei Phasen. In der ersten Welle crawlt der Googlebot deine Seite und liest den initialen HTML-Code. Alles, was direkt im HTML steht, wird sofort erfasst und kann indexiert werden.

In der zweiten Welle rendert Google die Seite – das bedeutet, der Googlebot führt JavaScript aus und sieht dann den finalen Inhalt. Das Problem: Zwischen der ersten und zweiten Welle können Tage oder sogar Wochen vergehen. Google hat begrenzte Rendering-Ressourcen und muss Prioritäten setzen.

Die häufigsten JavaScript-SEO-Probleme

Inhalte werden nur via JavaScript geladen

Das größte Problem: Dein gesamter Seiteninhalt wird erst durch JavaScript erzeugt. Wenn du dir den Quellcode anschaust (nicht das gerenderte Ergebnis im Browser), siehst du nur ein leeres <div id="app"></div>. Alle Texte, Überschriften und Bilder werden erst durch JavaScript-Code nachgeladen.

Für Google bedeutet das: In der ersten Crawl-Welle findet der Bot eine quasi leere Seite. Erst beim Rendering wird der Inhalt sichtbar – falls das Rendering überhaupt fehlerfrei funktioniert.

Client-Side Rendering (CSR)

Bei Client-Side Rendering passiert die gesamte Seitenerstellung im Browser des Nutzers. Der Server liefert nur ein minimales HTML-Gerüst und JavaScript-Dateien. Das JavaScript baut dann die komplette Seite zusammen.

Für Nutzer mit schnellem Internet funktioniert das gut. Für Google ist es ein zusätzlicher Aufwand, der Ressourcen kostet und Fehler verursachen kann. Besonders kritisch wird es, wenn externe APIs im JavaScript aufgerufen werden – diese können beim Google-Rendering fehlschlagen.

Dynamische Links und Navigation

Wenn deine interne Verlinkung über JavaScript generiert wird, kann Google die Links möglicherweise nicht erkennen. Klassisches Beispiel: Buttons mit onClick-Events statt normaler <a href>-Links. Google braucht echte HTML-Links, um deine Seitenstruktur zu verstehen und neue Seiten zu entdecken.

Das kann dein gesamtes Crawl-Budget negativ beeinflussen, weil Google wichtige Unterseiten gar nicht erst findet.

Lazy Loading ohne Fallback

Lazy Loading – also das Nachladen von Inhalten beim Scrollen – ist eine beliebte Technik zur Ladezeitoptimierung. Aber wenn Inhalte nur geladen werden, wenn ein Nutzer scrollt, sieht Google sie möglicherweise nicht. Der Googlebot scrollt nicht wie ein menschlicher Nutzer durch die Seite.

So testest du, ob Google dein JavaScript sieht

URL-Inspektion in der Google Search Console

Das wichtigste Werkzeug ist die URL-Inspektion in der Google Search Console. Gib die URL deiner Seite ein und klicke auf „Live-URL testen". Die Search Console zeigt dir dann einen Screenshot der gerenderten Seite – so wie Google sie sieht.

Vergleiche den Screenshot mit dem, was du im Browser siehst. Fehlen Inhalte? Sind Bereiche leer? Dann hat Google ein Problem mit deinem JavaScript.

Quellcode vs. gerenderte Seite vergleichen

Ein einfacher Test: Öffne deine Seite im Browser, klicke mit der rechten Maustaste und wähle „Seitenquelltext anzeigen". Was du dort siehst, ist das, was Google in der ersten Crawl-Welle erfasst. Wenn dort kein sinnvoller Content steht, hast du ein JavaScript-SEO-Problem.

Zum Vergleich: Die „Untersuchen"-Funktion (DevTools) zeigt dir die gerenderte Seite inklusive JavaScript – also das, was Google erst in der zweiten Welle sieht.

Google Rich Results Test

Der Rich Results Test von Google rendert deine Seite ähnlich wie der Googlebot. Er zeigt dir den gerenderten HTML-Code und etwaige Fehlermeldungen. Das ist besonders hilfreich, um zu prüfen, ob strukturierte Daten korrekt via JavaScript geladen werden.

Die Lösungen: SSR, SSG und Dynamic Rendering

Server-Side Rendering (SSR)

Bei Server-Side Rendering wird die Seite vollständig auf dem Server gerendert, bevor sie an den Browser (oder den Googlebot) ausgeliefert wird. Das bedeutet: Google bekommt sofort fertiges HTML mit allen Inhalten.

Frameworks wie Next.js (für React), Nuxt.js (für Vue) und Angular Universal machen SSR relativ einfach umsetzbar. Der Server rendert die Seite bei jeder Anfrage und liefert fertiges HTML aus. JavaScript übernimmt danach im Browser für Interaktionen.

SSR ist die beste Lösung für SEO-kritische Seiten, weil Google alle Inhalte sofort in der ersten Crawl-Welle erfassen kann.

Static Site Generation (SSG)

Bei Static Site Generation werden alle Seiten bereits beim Build-Prozess als fertiges HTML erzeugt. Es gibt keine serverseitige Berechnung bei jedem Aufruf – die Seiten liegen als statische Dateien bereit.

SSG ist ideal für Seiten, deren Inhalte sich nicht ständig ändern – zum Beispiel Blogartikel, Landingpages oder Produktseiten. Frameworks wie Next.js, Gatsby oder Astro unterstützen SSG. Die Vorteile: Maximale Ladegeschwindigkeit und perfekte Crawlbarkeit.

Dynamic Rendering

Dynamic Rendering ist eine Zwischenlösung: Dein Server erkennt, ob ein Googlebot oder ein normaler Nutzer die Seite aufruft. Dem Googlebot wird eine vorgerenderte HTML-Version ausgeliefert, während Nutzer die normale JavaScript-Version sehen.

Google akzeptiert Dynamic Rendering als legitime Lösung. Tools wie Rendertron oder Prerender.io machen die Implementierung einfacher. Allerdings empfiehlt Google selbst langfristig SSR oder SSG als die bessere Alternative.

Checkliste: JavaScript-SEO in den Griff bekommen

Damit du die häufigsten Fehler vermeidest, hier eine kurze Zusammenfassung der wichtigsten Maßnahmen:

• Prüfe den Quellcode: Sind wichtige Inhalte im initialen HTML enthalten?
• Verwende echte Links: Nutze <a href> statt onClick-Events für die Navigation.
• Teste in der Search Console: Nutze den Live-Test, um zu sehen, was Google rendert.
• Setze auf SSR oder SSG: Besonders für SEO-kritische Seiten wie Landingpages und Blogartikel.
• Lazy Loading mit Fallback: Stelle sicher, dass auch ohne Scrollen alle Inhalte im HTML vorhanden sind.
• Vermeide Rendering-Abhängigkeiten: Keine externen API-Calls, die beim Googlebot fehlschlagen können.

Vermeide diese und andere häufige SEO-Fehler, um deine technische Basis sauber zu halten.

Fazit

JavaScript und SEO sind kein Widerspruch – aber du musst verstehen, wie Google JavaScript verarbeitet. Das Two-Wave-Indexing bedeutet, dass rein clientseitig gerenderte Inhalte erst mit Verzögerung oder gar nicht von Google erfasst werden. Die Lösung liegt in Server-Side Rendering, Static Site Generation oder Dynamic Rendering. Teste deine Seiten regelmäßig mit der Google Search Console und einem kostenlosen SEO-Check, um sicherzustellen, dass Google deine Inhalte vollständig sehen kann.