Zum Hauptinhalt springen

Schlagwort: J

JavaScript-SEO

Was ist JavaScript-SEO?

JavaScript-SEO ist der Teilbereich der technischen SEO, der sicherstellt, dass mit JavaScript erzeugte Inhalte von Suchmaschinen gecrawlt, gerendert und indexiert werden können. JavaScript-SEO wird immer dann relevant, wenn eine Website ihre Inhalte nicht schon im ausgelieferten HTML mitschickt, sondern erst im Browser per JavaScript aufbaut. Besonders betroffen sind moderne JS-Frameworks wie React, Angular und Vue.

JavaScript-SEO erklärt: wie Google mit JavaScript erzeugte Inhalte crawlt, rendert und indexiert

Ohne JavaScript-SEO bleiben ganze Textbereiche, Produktlisten oder interne Links für Google unsichtbar, weil Googlebot sie im rohen HTML nicht findet. Google kann JavaScript zwar ausführen, tut das aber in einem zweiten, verzögerten Schritt und mit Einschränkungen. Genau diese Lücke schließt JavaScript-SEO.

Kurzprofil des Begriffs

Merkmal Angabe
Kategorie Teilbereich der technischen SEO
Ziel Crawlbarkeit, Renderbarkeit und Indexierbarkeit JS-generierter Inhalte
Besonders relevant für JS-Frameworks (React, Angular, Vue, Next.js, Nuxt)
Google-Rendering durch Web Rendering Service (WRS), Chromium-basiert
Verwandte Begriffe Rendering, CSR, SSR, Crawling, Indexierung

Warum ist JavaScript-SEO für moderne Websites wichtig?

JavaScript-SEO ist wichtig, weil ein wachsender Teil des Webs seine Inhalte erst im Browser rendert und diese Inhalte sonst nicht zuverlässig in den Index gelangen. Frameworks wie React, Angular und Vue liefern beim ersten Aufruf oft nur ein nahezu leeres HTML-Grundgerüst aus. Der eigentliche Inhalt, also Texte, Überschriften, Bilder und Links, wird anschließend per JavaScript nachgeladen und ins Dokument eingefügt.

Für den Nutzer im Browser funktioniert das reibungslos. Für einen Crawler ist es eine Hürde: Sieht Googlebot beim Crawling nur das leere Grundgerüst, hat es keinen Inhalt zum Bewerten. Erst wenn Google die Seite auch rendert, wird der volle Inhalt sichtbar. Bleibt dieser Renderschritt aus oder scheitert er, taucht die Seite mit dünnem oder gar keinem Inhalt in den Suchergebnissen auf.

Wie verarbeitet Google JavaScript?

Google verarbeitet JavaScript in drei getrennten Phasen: Crawling, Rendering und Indexierung. Diese Phasen laufen nicht direkt hintereinander, sondern zeitlich versetzt. Das ist der zentrale Unterschied zu klassischen HTML-Seiten, bei denen der Inhalt sofort verfügbar ist.

  1. Crawling: Googlebot lädt das HTML-Dokument einer URL und liest die enthaltenen Links und Ressourcen aus. JavaScript-Dateien werden dabei erkannt, aber noch nicht ausgeführt.
  2. Rendering: Die URL wandert in eine Render-Queue. Dort führt der Web Rendering Service (WRS), ein aktuelles Chromium, das JavaScript aus und baut das finale DOM auf, so wie es ein Nutzer im Browser sähe.
  3. Indexierung: Erst das gerenderte HTML wird ausgewertet und indexiert. Neue Links, die erst beim Rendern entstehen, gehen zurück in die Crawl-Warteschlange.

Der Renderschritt kostet Ressourcen und passiert deshalb verzögert, oft Minuten bis Tage nach dem Crawling. In dieser Zwischenzeit kennt Google nur das rohe HTML. Wer Inhalte ausschließlich per JavaScript einfügt, verschiebt die Indexierung damit nach hinten.

Die drei Phasen, in denen Google JavaScript verarbeitetGoogle verarbeitet eine JavaScript-Seite in drei zeitlich versetzten Phasen: Crawling des HTML, Rendering in der Render-Queue durch den Web Rendering Service und anschliessende Indexierung des gerenderten Inhalts.So verarbeitet Google eine JavaScript-Seite1CrawlingGooglebot laedt dasrohe HTML.2RenderingRender-Queue: WRSfuehrt JavaScript aus.3IndexierungGerendertes HTMLwird ausgewertet.Zwischen Crawling und Rendering liegt eine Verzoegerung.Bis zum Rendern kennt Google nur das rohe HTML ohne JS-Inhalte.Abb. 1 · taismo
Abb. 1: Die drei Phasen der JavaScript-Verarbeitung bei Google, vom Crawling über das Rendering bis zur Indexierung.

Welche SEO-Probleme verursacht JavaScript?

JavaScript verursacht SEO-Probleme immer dann, wenn wichtige Inhalte oder Signale erst nach der Ausführung entstehen und der Renderschritt sie nicht zuverlässig freilegt. Die 5 häufigsten Fallstricke:

  1. Inhalt fehlt im initialen HTML: Texte und Produktdaten stehen nur im gerenderten DOM. Scheitert das Rendering, indexiert Google eine faktisch leere Seite.
  2. Links ohne <a href>: Navigation über onclick-Events oder button-Elemente statt echter <a href="…">-Links. Googlebot folgt nur echten href-Links, der Rest bleibt uncrawlbar.
  3. Blockierte JS-Ressourcen: Wird die JavaScript-Datei per robots.txt gesperrt, kann Google die Seite nicht rendern und sieht nur das leere Gerüst.
  4. Verzögerte Indexierung: Durch die Render-Queue landen frische Inhalte später im Index. Bei nachrichtennahen oder saisonalen Themen kostet das Sichtbarkeit.
  5. Falsch umgesetztes Lazy Loading: Inhalte, die per Lazy Loading erst bei Scroll- oder Klick-Events nachladen, sieht Googlebot nicht, weil es nicht scrollt und nicht klickt.

Dazu kommt die Performance: Umfangreiches JavaScript verlängert Ladezeiten und belastet die Core Web Vitals. Langsame Seiten werden nicht nur schlechter bewertet, sie verbrauchen auch mehr Rendering-Ressourcen.

Client-Side vs. Server-Side Rendering: Was ist der Unterschied?

Der Unterschied liegt im Ort, an dem das HTML entsteht: Beim Client-Side Rendering (CSR) baut der Browser des Nutzers die Seite per JavaScript auf, beim Server-Side Rendering (SSR) liefert der Server bereits fertiges HTML aus. Für SEO ist diese Entscheidung zentral, weil sie bestimmt, was Googlebot beim ersten Zugriff vorfindet.

  • Client-Side Rendering (CSR): Der Server schickt ein minimales HTML plus JavaScript. Erst der Browser rendert den Inhalt. Google muss die Seite selbst rendern, um etwas zu sehen, mit der bekannten Verzögerung.
  • Server-Side Rendering (SSR): Der Server führt das JavaScript aus und liefert vollständiges HTML. Googlebot sieht den Inhalt sofort beim Crawling, ohne auf die Render-Queue zu warten.

Zwischen den beiden Polen liegen Mischformen. Static Site Generation (SSG) erzeugt fertiges HTML schon zur Build-Zeit. Prerendering hält für Bots eine vorgerenderte HTML-Version bereit. Hydration kombiniert serverseitiges HTML mit clientseitiger Interaktivität. Für Suchmaschinen gilt: Je mehr Inhalt bereits im ausgelieferten HTML steht, desto sicherer wird er indexiert.

Client-Side Rendering im Vergleich zu Server-Side RenderingBeim Client-Side Rendering baut der Browser den Inhalt per JavaScript auf und Google muss die Seite selbst rendern. Beim Server-Side Rendering liefert der Server fertiges HTML und Googlebot sieht den Inhalt sofort.CSR vs. SSR aus Sicht von GooglebotClient-Side RenderingCSR1. Server sendet leeres HTML2. Browser laedt JavaScript3. JavaScript baut Inhalt aufGoogle: muss selbst rendern,Inhalt erst verzoegert sichtbar.Server-Side RenderingSSR1. Server fuehrt JavaScript aus2. Server sendet fertiges HTML3. Browser zeigt Inhalt direktGoogle: sieht Inhalt sofortbeim Crawling, ohne Wartezeit.Abb. 2 · taismo
Abb. 2: Client-Side Rendering und Server-Side Rendering im direkten Vergleich aus Sicht von Googlebot.

Wie macht man JavaScript-Seiten SEO-tauglich?

JavaScript-Seiten werden SEO-tauglich, indem der wichtige Inhalt möglichst früh im HTML verfügbar ist und alle Ressourcen crawlbar bleiben. Die wirksamsten Maßnahmen in der Reihenfolge ihres Hebels:

  1. SSR, SSG oder Prerendering einsetzen: Kritische Inhalte serverseitig oder zur Build-Zeit rendern, damit Google sie ohne eigenen Renderschritt findet.
  2. Echte Links verwenden: Jede Navigation über <a href="…"> abbilden. So folgt Googlebot der internen Verlinkung zuverlässig.
  3. JS-Ressourcen freigeben: JavaScript- und CSS-Dateien niemals per robots.txt sperren, sonst scheitert das Rendering.
  4. Korrekte Statuscodes liefern: Auch bei clientseitig gerenderten Fehlerseiten einen echten 404 oder 301 senden, keine „Soft 404″.
  5. Rendering testen: Mit der URL-Prüfung der Google Search Console das gerenderte HTML kontrollieren. Zeigt der gerenderte Code den Inhalt, sieht ihn auch Google.

Ist die JavaScript-Seite sauber umgesetzt, landet sie mit vollem Inhalt im Index und erscheint in den SERP. Für Websites auf React, Angular, Vue oder einem Headless-Setup gehört diese Prüfung zum technischen Fundament. Wer eine solche Seite plant oder umbaut, sollte JavaScript-SEO von Anfang an mitdenken, genau das ist Teil unserer Arbeit im Webdesign und in der technischen SEO.

Häufige Fragen zu JavaScript-SEO

Ist JavaScript schlecht für SEO?
Nein, JavaScript ist nicht per se schlecht für SEO. Problematisch wird es nur, wenn zentrale Inhalte ausschließlich per JavaScript entstehen und der Renderschritt sie nicht zuverlässig freilegt. Sauber umgesetzt ist eine JavaScript-Seite genauso indexierbar wie eine klassische HTML-Seite.

Kann Google JavaScript rendern?
Ja, Google rendert JavaScript mit dem Web Rendering Service auf Basis eines aktuellen Chromium. Das Rendering passiert aber verzögert und mit Einschränkungen, weshalb wichtiger Inhalt möglichst schon im ausgelieferten HTML stehen sollte.

Was ist besser für SEO: CSR oder SSR?
Für SEO ist Server-Side Rendering (SSR) meist die sicherere Wahl, weil Googlebot fertiges HTML sofort beim Crawling sieht. Client-Side Rendering funktioniert, verlagert die Sichtbarkeit aber in den verzögerten Renderschritt.

Wie teste ich, ob Google meine JS-Inhalte sieht?
Nutze die URL-Prüfung in der Google Search Console und sieh dir das gerenderte HTML an. Erscheint dort der Inhalt, den du erwartest, kann Google ihn auch indexieren.

Brauchen React-, Vue- oder Angular-Seiten spezielle SEO-Maßnahmen?
Ja, Single-Page-Apps auf React, Vue oder Angular brauchen in der Regel SSR, SSG oder Prerendering, damit ihre Inhalte zuverlässig indexiert werden. Ohne solche Maßnahmen riskieren sie dünne oder verzögert indexierte Seiten.

JSON-LD



Was ist JSON-LD?

JSON-LD (JavaScript Object Notation for Linked Data) ist ein leichtgewichtiges Format, das zur Strukturierung und Darstellung von verknüpften Daten verwendet wird. Es basiert auf JSON (JavaScript Object Notation) und erweitert dieses um die Möglichkeit, Daten in einem maschinenlesbaren Format zu verknüpfen. Das Hauptziel von JSON-LD ist es, Daten im Web besser zugänglich und verständlich zu machen, sowohl für Menschen als auch für Maschinen. JSON-LD wird häufig in der semantischen Web- und Suchmaschinenoptimierung eingesetzt, um Informationen in einer Weise darzustellen, die von Suchmaschinen und anderen Webdiensten effizienter verarbeitet werden kann.

Beispiele für den Einsatz von JSON-LD

JSON-LD wird in verschiedenen Szenarien verwendet, um strukturierte Daten bereitzustellen. Ein gängiges Beispiel ist die Einbindung von Schema.org-Tags auf Websites. Diese Tags helfen Suchmaschinen, den Inhalt der Seite besser zu verstehen und können die Darstellung in den Suchergebnissen, mit sogenannten Rich Snippets, verbessern. Hier sind einige konkrete Einsatzmöglichkeiten:

  1. Produktinformationen: Online-Shops nutzen JSON-LD, um Produktdetails wie Name, Preis, Verfügbarkeit und Bewertungen zu strukturieren. Dies ermöglicht Rich Snippets in den Suchergebnissen, die dem Nutzer zusätzliche Informationen bieten.

  2. Rezensionen und Bewertungen: Websites können Kundenbewertungen und Sternebewertungen in JSON-LD formatieren, um diese Informationen direkt in den Suchergebnissen anzuzeigen.

  3. Veranstaltungen: Veranstaltungsseiten verwenden JSON-LD, um Details wie Datum, Uhrzeit, Ort und Ticketpreise zu markieren. Suchmaschinen können diese Informationen dann in speziellen Veranstaltungslisten anzeigen.

  4. Rezepte: Food-Blogs und Rezept-Websites nutzen JSON-LD, um Zutaten, Zubereitungsschritte, Nährwertangaben und Kochzeiten strukturiert darzustellen.

Wie kann ich JSON-LD für SEO nutzen?

JSON-LD spielt eine wesentliche Rolle bei der Suchmaschinenoptimierung (SEO). Es hilft Suchmaschinen, den Inhalt einer Website besser zu interpretieren und kann dadurch die Sichtbarkeit und das Ranking verbessern. Hier sind einige Schritte, wie man JSON-LD effektiv für SEO nutzen kann:

  1. Identifikation relevanter Daten: Zunächst sollte man die Art der Daten identifizieren, die für die eigene Website und die Zielgruppe relevant sind. Das können Produkte, Dienstleistungen, Rezensionen, Veranstaltungen oder Artikel sein.

  2. Implementierung von Schema.org-Tags: Nachdem die relevanten Daten identifiziert wurden, sollten die entsprechenden Schema.org-Tags ausgewählt und in JSON-LD implementiert werden. Dies kann manuell oder mit Hilfe von Plugins und Tools erfolgen, die den Prozess vereinfachen.

  3. Validierung der strukturierten Daten: Nach der Implementierung sollten die strukturierten Daten mit Tools wie dem Rich Results Test von Google überprüft werden, um sicherzustellen, dass sie korrekt sind und von Suchmaschinen gelesen werden können.

  4. Kontinuierliche Überwachung und Anpassung: SEO ist ein kontinuierlicher Prozess. Die Leistung der strukturierten Daten sollte regelmäßig überwacht und bei Bedarf angepasst werden, um sicherzustellen, dass sie den gewünschten Effekt erzielen.

Durch die Nutzung von JSON-LD können Websites ihre Chancen erhöhen, in Suchergebnissen hervorgehoben zu werden, was zu einer besseren Nutzererfahrung und höheren Klickraten führen kann.

Weiterlesen