Suchmaschinen können heute JavaScript ausführen und gerenderte Inhalte indexieren. Trotzdem haben viele Websites JavaScript-Probleme, die dem SEO schaden. Inhalte, die von JavaScript zum Laden abhängen, werden eventuell nicht indexiert. Per Lazy Loading geladene Bilder werden eventuell nicht entdeckt. Clientseitiges Rendering ist eventuell zu langsam. Suchmaschinen warten eventuell nicht, bis alles geladen ist. Eine gute JavaScript-Optimierung sorgt dafür, dass Suchmaschinen alle deine Inhalte sehen, verstehen und effizient crawlen können.
Wie Suchmaschinen mit JavaScript umgehen
Google crawlt Seiten wie ein Browser. Es führt JavaScript aus, rendert Inhalte und indexiert, was es sieht. Das ist eine gute Nachricht. Auch komplexe JavaScript-Anwendungen können indexiert werden.
Google verarbeitet Seiten in zwei Wellen. In der ersten Welle crawlt es das HTML, um die grundlegende Seitenstruktur zu sehen. In der zweiten Welle rendert es das JavaScript, um dynamische Inhalte zu sehen. Dieser Prozess in zwei Wellen braucht Zeit und Ressourcen.
Bei Seiten mit komplexem JavaScript oder aufwendigem Rendering wartet Google eventuell nicht, bis alles geladen ist. Es indexiert dann nur, was nach ein paar Sekunden Rendering sichtbar ist. Inhalte, die langsam oder per Lazy Loading laden, werden eventuell nicht indexiert.
Häufige JavaScript-SEO-Probleme
Clientseitiges Rendering verzögert die Sichtbarkeit von Inhalten. Eine leere HTML-Seite lädt JavaScript, das den Inhalt rendert. Google sieht zunächst die leere Seite. Dauert das Rendern zu lange, indexiert Google eventuell die leere Version.
Per Lazy Loading geladene Bilder und Inhalte laden erst, wenn Nutzer scrollen. Google scrollt nicht immer. Lazy-geladene Inhalte unterhalb des sichtbaren Bereichs werden eventuell nicht entdeckt oder indexiert.
JavaScript-Fehler stören das Rendern. Hat das JavaScript Fehler, wird die Seite eventuell nicht richtig gerendert. Suchmaschinen sehen kaputte, unvollständige Inhalte.
Dynamisch erzeugte URLs mit Parametern (page?id=123&sessionid=abc) erzeugen doppelten Inhalt. Jeder einzelne Parameter erzeugt eine neue URL. Suchmaschinen sehen eventuell Tausende Duplikate desselben Inhalts.
Meta-Tags, die per JavaScript erzeugt werden, sehen eventuell nicht alle Crawler. Open-Graph-Tags, Twitter Cards und andere per JavaScript hinzugefügte Meta-Tags werden von Social-Media-Crawlern eventuell nicht richtig gelesen.
Serverseitiges vs. clientseitiges Rendering
Beim serverseitigen Rendering wird das HTML auf dem Server erzeugt und an den Browser gesendet. Das HTML enthält bereits alle Inhalte. Browser zeigen es sofort an. Suchmaschinen sehen alle Inhalte sofort.
Beim clientseitigen Rendering werden minimales HTML und JavaScript gesendet, das die Seite im Browser aufbaut. Die Inhalte entstehen im Browser, nachdem das JavaScript ausgeführt wurde. Das dauert länger und Suchmaschinen sehen eventuell nicht alles.
Für SEO ist serverseitiges Rendering oder statische Generierung besser. Das HTML kommt vollständig beim Browser (und bei Suchmaschinen) an. Inhalte sind sofort sichtbar.
JavaScript-Rendering testen
Nutze das URL-Prüftool der Google Search Console. Gib eine JavaScript-lastige Seite ein. Google zeigt, was es nach dem Rendern gefunden hat. Du kannst die gecrawlte Seite (was Google sieht) mit dem vergleichen, was du im Browser siehst.
Nutze Lighthouse in den Chrome DevTools. Es testet, wie gut deine Seite crawlbar ist, und weist auf JavaScript-Probleme hin.
Sieh dir den Seitenquelltext in deinem Browser an, um das rohe HTML zu sehen. Untersuche dann das Element, um das gerenderte DOM zu sehen. Vergleiche beides. Unterscheiden sie sich stark, nutzt du clientseitiges Rendering, das Suchmaschinen verwirren kann.
Nutze einen JavaScript-Debugging-Proxy oder ein Cloud-Tool zum Browser-Testen. Simuliere, was Google crawlt und was gerendert wird.
Best Practices für JavaScript SEO
Nutze serverseitiges Rendering (SSR) oder statische Seitengenerierung (SSG) für wichtige Inhalte. So steht der Inhalt im HTML, das an Suchmaschinen geht.
Lade wichtige Inhalte vorab oder sofort. Verlasse dich bei Inhalten im sichtbaren Bereich nicht auf Lazy Loading. Lade wichtige Bilder und Texte sofort.
Vermeide dynamisch erzeugte URLs mit unnötigen Parametern. Nutze saubere, einfache URLs. Musst du Parameter nutzen, bündle Duplikate mit Canonical-Tags.
Sorge dafür, dass Meta-Tags im HTML stehen oder schnell per JavaScript gerendert werden. Social-Media-Crawler und Suchmaschinen sollten Meta-Tags sofort sehen, nicht erst nach aufwendigem Rendering.
Teste mit der Google Search Console. Prüfe, was Google nach dem Rendern sieht. Behebe jede Abweichung zwischen dem, was du siehst, und dem, was Google sieht.
Halte das JavaScript-Bundle klein. Grosse JavaScript-Dateien brauchen länger zum Herunterladen und Ausführen. Kleinere Bundles rendern schneller und Suchmaschinen crawlen schneller.
Frameworks und SEO
React, Vue, Angular und andere moderne Frameworks nutzen standardmässig clientseitiges Rendering. Das schafft SEO-Probleme, weil Inhalte gerendert sein müssen, bevor Suchmaschinen sie sehen können.
Next.js und Nuxt.js sind Meta-Frameworks, die React und Vue serverseitiges Rendering oder statische Generierung hinzufügen. Sie lösen viele Probleme des clientseitigen Renderings.
Nutzt du ein clientseitiges Framework ohne serverseitiges Rendering, musst du bei JavaScript SEO besonders sorgfältig sein. Teste gründlich mit der Google Search Console.
Häufig gestellte Fragen
Kann Google JavaScript-lastige Inhalte indexieren?
Ja, Google kann JavaScript ausführen und gerenderte Inhalte indexieren. Das braucht aber Zeit und Ressourcen. Sehr aufwendiges JavaScript wird eventuell nicht vollständig indexiert, wenn das Rendern zu lange dauert. Halte dein JavaScript effizient und teste mit der Google Search Console, ob deine Inhalte indexiert werden. Mit dem Website-Builder von WEMASY kannst du das direkt auf deiner Website einrichten.
Sollte ich serverseitiges oder clientseitiges Rendering nutzen?
Serverseitiges Rendering ist besser für SEO. Der Inhalt steht im HTML, das an Suchmaschinen geht. Suchmaschinen sehen ihn sofort, ohne auf JavaScript zu warten. Clientseitiges Rendering sorgt für Verzögerungen und das Risiko, dass Inhalte nicht indexiert werden. Nutze serverseitiges Rendering oder statische Generierung für Inhalte, die in der Suche ranken sollen.
Muss ich Suchmaschinen anderes HTML ausliefern?
Nein. Google möchte, dass du allen dasselbe HTML auslieferst. Erstelle keine Spezialversionen für Googlebot. Nutze sauberes serverseitiges Rendering oder eine Erkennung für das Rendering. Google crawlt die normale Nutzerversion und sollte alle Inhalte sehen.
Wie behebe ich Lazy-Loading-Probleme bei Bildern für SEO?
Lade wichtige Bilder im sichtbaren Bereich vorab. Nutze natives Lazy Loading (loading="lazy") mit passenden Fallbacks für ältere Browser. Nutze die Intersection Observer API, um Bilder beim Scrollen zu laden. Teste mit der Google Search Console, ob Google deine Bilder sieht.
Macht JavaScript meine Website langsam?
Ja, die Ausführung von JavaScript braucht Zeit. Grosse JavaScript-Bundles und aufwendige Verarbeitung verlangsamen das Laden der Seite. Das schadet der Nutzererfahrung und den Core Web Vitals. Halte das JavaScript-Bundle klein, teile den Code auf und verschiebe nicht kritisches JavaScript. Lade nur, was nötig ist.
Sollte ich Meta-Tags per JavaScript erzeugen?
Vermeide es, wenn möglich. Meta-Tags sollten im HTML-Quelltext stehen. Social-Media-Crawler und manche Suchmaschinen führen JavaScript eventuell nicht aus. Musst du Meta-Tags per JavaScript erzeugen, nutze serverseitiges Rendering oder Pre-Rendering, damit sie im HTML stehen.