Sandra Krone ist Partnerin und Gründerin von OLDSCHOOLSEO. Ihre Arbeit beginnt bei der Analyse der Nutzerintention und der Content-Strategie, um daraus die Anforderungen für die redaktionelle und technische Umsetzung abzuleiten.
JavaScript-SEO: Rendering-Strategien und ihre Auswirkungen
Was ist das grundlegende Problem von JavaScript für SEO?
Antwort: Suchmaschinen-Crawler sind darauf ausgelegt, HTML zu parsen. Bei traditionellen Websites sendet der Server eine vollständige HTML-Datei. Bei Single-Page-Applications (SPAs), die auf JavaScript-Frameworks basieren, sendet der Server oft nur eine minimale HTML-Hülle und eine JavaScript-Datei. Der Inhalt wird erst im Browser (client-seitig) durch die Ausführung des JavaScripts generiert. Dies erfordert von Google einen zweiten, ressourcenintensiven Schritt: das Rendering. Dieser Prozess kann zu Verzögerungen bei der Indexierung oder zu Fehlern führen.
Was ist Client-Side Rendering (CSR)?
Antwort: Beim Client-Side Rendering (CSR) ist der Browser für das Rendern der Seite verantwortlich. Der Server liefert ein fast leeres HTML-Dokument. Der Browser lädt das JavaScript, führt es aus und generiert dynamisch das finale HTML.
- →SEO-Auswirkung: Dies ist eine für SEO problematische Methode. Der Googlebot muss die Seite rendern, um den Inhalt zu sehen. Dies verbraucht Crawl-Budget. Wichtige SEO-Elemente wie Titel-Tags oder Links sind im initialen HTML nicht vorhanden.
Was ist Server-Side Rendering (SSR)?
Antwort: Beim Server-Side Rendering (SSR) wird die Seite auf dem Server gerendert. Der Server führt das JavaScript aus, generiert das vollständige HTML für die Seite und sendet es an den Client.
- →SEO-Auswirkung: Dies ist eine für SEO robuste Methode. Der Googlebot erhält eine vollständig gerenderte HTML-Datei. Alle Inhalte und Links sind sofort sichtbar, was die Crawl- und Indexierbarkeit sicherstellt.
Was ist Static Site Generation (SSG)?
Antwort: Bei der Static Site Generation (SSG) werden alle Seiten der Website bereits zum Zeitpunkt des Builds als fertige HTML-Dateien generiert. Diese statischen Dateien werden auf einem Server oder CDN abgelegt.
- →SEO-Auswirkung: SSG bietet gute SEO-Eigenschaften und Performance, da keine serverseitige Generierung zur Laufzeit stattfindet. Es eignet sich für Websites, deren Inhalte sich nicht häufig ändern.
Was ist Incremental Static Regeneration (ISR)?
Antwort: Incremental Static Regeneration (ISR) ist eine hybride Strategie. Eine Seite wird statisch generiert, aber nach einer definierten Zeitspanne bei einer neuen Anfrage im Hintergrund neu generiert. Der erste Nutzer nach Ablauf der Zeit erhält die veraltete Seite, löst aber die Neugenerierung aus. Folgende Nutzer erhalten die frische Version.
- →SEO-Auswirkung: ISR kombiniert die SEO-Vorteile von SSG mit der Möglichkeit, Inhalte zu aktualisieren, ohne die gesamte Website neu bauen zu müssen.
Was ist Dynamic Rendering?
Antwort: Dynamic Rendering ist eine Umgehungslösung, bei der der Server den User-Agent einer Anfrage prüft. Handelt es sich um einen Suchmaschinen-Bot, wird eine serverseitig gerenderte, statische HTML-Version ausgeliefert. Handelt es sich um einen Nutzer, wird die client-seitig gerenderte Anwendung ausgeliefert.
- →SEO-Auswirkung: Es stellt sicher, dass Bots eine crawl-bare Version erhalten. Google betrachtet dies als zulässige Methode, empfiehlt es aber nur als Übergangslösung.
Was bedeutet "Hydration" und welche SEO-Relevanz hat sie?
Antwort: Hydration ist der Prozess, bei dem eine serverseitig gerenderte, statische HTML-Seite im Browser "zum Leben erweckt" wird. Das JavaScript wird geladen und ausgeführt, um die Seite interaktiv zu machen (z.B. durch das Anbinden von Event-Listenern an Buttons). Eine langsame oder fehlerhafte Hydration kann die Nutzererfahrung (z.B. den Interaction to Next Paint, INP) negativ beeinflussen, auch wenn der initiale Inhalt für den SEO-Crawler sichtbar war. Eine hohe "Total Blocking Time" (TBT) während der Hydration kann ein negatives Signal für die Core Web Vitals sein.
Wie müssen interne Links in JavaScript-Anwendungen implementiert sein?
Antwort: Für die SEO ist es entscheidend, dass interne Links als Standard-HTML-<a>-Tags mit href-Attributen im gerenderten HTML-Code vorhanden sind. Crawler folgen diesen Links, um neue Seiten zu entdecken. In SPAs werden oft onClick-Events auf <div>- oder <span>-Elementen verwendet, um client-seitige Navigationen auszulösen. Diese sind für Crawler nicht als Links erkennbar und unterbrechen den Crawl-Pfad. Eine korrekte Implementierung verwendet <a>-Tags und fängt den Klick-Event optional ab, um eine schnelle client-seitige Navigation zu ermöglichen, während die grundlegende Crawl-Fähigkeit erhalten bleibt.
Was ist die Schlussfolgerung für eine fortgeschrittene technische SEO-Strategie?
Antwort: Die Wahl der Rendering-Strategie ist eine fundamentale Entscheidung für die SEO-Performance einer JavaScript-basierten Website. Reines Client-Side Rendering sollte vermieden werden. Server-Side Rendering (SSR) und Static Site Generation (SSG) bieten die zuverlässigsten Grundlagen für eine gute Crawl- und Indexierbarkeit. Hybride Ansätze wie ISR gewinnen an Bedeutung. Eine technische SEO-Strategie muss die Rendering-Methode von Anfang an berücksichtigen.
Integration in die fortgeschrittene technische SEO-Strategie
Die Rendering-Strategie bestimmt, was der Googlebot initial sieht.
- →Logfile-Analyse - Logfiles können aufzeigen, ob Google nur das initiale HTML crawlt oder auch die vom JavaScript angeforderten API-Endpunkte.
- →Edge SEO: SEO-Aufgaben auf CDN-Ebene lösen - Dynamic Rendering kann auf der Edge-Ebene implementiert werden, indem ein Edge Worker den User-Agent prüft.
- →Performance-Optimierung jenseits der Core Web Vitals - SSR kann die Serverlast erhöhen, was eine Optimierung von Server-Ressourcen erfordert.
Mit Thematischem Bezug
- →Bedeutung von Online-Bewertungen für das lokale SEO
- →Content-Promotion-Strategien: Wie Inhalte gesehen werden