JavaScript SEO
Welche Herausforderungen entstehen durch JavaScript für Suchmaschinen und wie stellt man sicher, dass JS-Inhalte korrekt indexiert werden?- Das Problem mit JavaScript und Suchmaschinen
- Wie Googlebot JavaScript verarbeitet
- Häufige JavaScript-SEO-Probleme
- JavaScript-Frameworks und SEO
- JavaScript-Rendering testen
- Empfehlungen für JS-lastige Seiten
Das Problem mit JavaScript und Suchmaschinen
JavaScript ist aus modernen Webseiten nicht mehr wegzudenken. Für Suchmaschinen stellt JavaScript jedoch eine besondere Herausforderung dar: Klassische HTML-Seiten enthalten ihren Inhalt direkt im Quelltext. Bei JavaScript-abhängigen Seiten ist der HTML-Quelltext oft leer oder minimal. Der eigentliche Inhalt wird erst nach der JavaScript-Ausführung durch den Browser gerendert.
Wenn eine Suchmaschine JavaScript nicht oder nicht vollständig ausführen kann, sieht sie möglicherweise eine leere Seite oder es fehlt wichtiger Inhalt.
Wie Googlebot JavaScript verarbeitet
- Zweistufiges Rendering – Google trennt das Crawlen (HTML herunterladen) vom Rendern (JavaScript ausführen). Das Rendering geschieht in einer separaten Render-Queue.
- Verzögerung beim Rendering – Das JavaScript-Rendering kann Tage bis Wochen nach dem ersten Crawl stattfinden. Inhalte, die nur durch JavaScript sichtbar sind, werden entsprechend verzögert indexiert.
- Ressourcenlimitierung – Googlebot führt JavaScript mit limitierten Ressourcen aus. Sehr rechenintensive Scripts können zu unvollständigem Rendering führen.
Häufige JavaScript-SEO-Probleme
- Inhalt nicht indexiert – Texte, Überschriften oder Produktbeschreibungen, die nur durch JavaScript geladen werden
- Interne Links nicht erkannt – Links, die durch JavaScript generiert werden (z.B. onclick-Handler statt href-Attribute)
- Metadaten fehlen – Title und Meta Description, die dynamisch durch JavaScript gesetzt werden
- Lazy-loaded Inhalte – Inhalte, die erst nach Benutzerinteraktion geladen werden
- Endloses Scrollen – Inhalte, die erst beim Scrollen nachgeladen werden
- JavaScript-Fehler – Script-Fehler verhindern das korrekte Rendering
JavaScript-Frameworks und SEO
- React (Create React App) – Reine Client-Side-Apps mit minimalem initialen HTML. Schlechte SEO-Ausgangssituation ohne SSR.
- Next.js (React) – Bietet Server-Side Rendering (SSR) und Static Site Generation (SSG). Sehr gute SEO-Ausgangslage.
- Vue.js – Standard ist Client-Side Rendering. Mit Nuxt.js ist SSR möglich.
- Angular – Standard ist CSR. Angular Universal bietet SSR.
- Gatsby – Static Site Generator auf React-Basis. Sehr gute SEO durch vorgerenderte HTML-Seiten.
Mehr Informationen finden Sie auf den Seiten SSR vs. CSR und Dynamic Rendering.
JavaScript-Rendering testen
- URL-Inspektion in der Google Search Console – «Live URL testen» zeigt einen Screenshot der gerenderten Seite
- JavaScript deaktivieren – In Chrome Entwicklertools (F12) → Einstellungen. So sehen Sie, was ohne JavaScript sichtbar ist.
- Screaming Frog – Kann JavaScript rendern und den Unterschied zwischen Quelltext und gerenderter Version zeigen.
Empfehlungen für JS-lastige Seiten
- Wichtige Inhalte im initialen HTML liefern – SSR oder SSG nutzen
- Progressive Enhancement – Seite ohne JavaScript grundlegend nutzbar gestalten
- Sinnvolle href-Attribute verwenden – Links mit href-Attribut statt nur JavaScript-Handler
- Rendering regelmässig testen – Mit der Search Console URL-Inspektion
- JavaScript-Fehler beheben – Browser-Konsole regelmässig prüfen