JavaScript SEO: So punktest du bei Suchmaschinen
Lesezeit 12 Min | 
Autorin Ioanna Keleoglou
JavaScript hat in den letzten Jahren erheblich an Bedeutung gewonnen, insbesondere bei der Entwicklung dynamischer Websites. Doch obwohl JavaScript viele Vorteile bietet, kann es auch Herausforderungen für die Suchmaschinenoptimierung (SEO) darstellen. Hast du auch schon Probleme mit Rankings und JavaScript gehabt? Und bist du dir unsicher, ob du es auf deiner Website verwendet solltest? Hier erfährst du, welche SEO-Herausforderungen JavaScript birgt und die SEO Best Practices.
Jetzt weiterlesen!
Inhalt
Bevor wir einsteigen: Was ist JavaScript?
JavaScript ist eine Programmiersprache, die dafür sorgt, dass interaktive und dynamische Elemente auf einer Webseite funktionieren. Es ermöglicht Entwicklern, Funktionen wie Animationen, interaktive Formulare, Karten und vieles mehr zu integrieren. Mit JavaScript können Websites auf Benutzeraktionen reagieren und Inhalte in Echtzeit anpassen, was das Benutzererlebnis erheblich verbessert. Man könnte auch sagen: Alle kreativen Funktionen, die nicht mittels HTML und CSS umsetzbar sind, werden häufig durch JavaScript verwirklicht.
JavaScript wird jedoch immer häufiger auch eingesetzt, um ganze Websites mit modernen Frameworks wie React oder Angular zu erstellen. Diese Frameworks erfreuen sich wachsender Beliebtheit, da sie sowohl für einfache als auch für komplexe Web-Anwendungen genutzt werden können. Daher ist es unausweichlich, dass SEO-Manager*innen früher oder später mit JavaScript konfrontiert werden und JavaScript SEO ebenfalls ein Punkt in einer professionellen Onpage-Analyse sein muss.
Kurzer Exkurs: Was ist ein Framework?
Ein Framework ist ein vorgefertigtes Gerüst, das als Basis für die Entwicklung einer Anwendung dient. Bei der Webentwicklung bieten Frameworks wie React oder Angular Entwicklern eine solide Grundlage, auf der sie ihre JavaScript-basierten Projekte aufbauen können. Diese Frameworks enthalten bereits viele Grundfunktionen und können nach Bedarf mit eigener Logik erweitert werden.
Es gibt verschiedene Arten von Frameworks, wie:
► Web-framework
► Anwendungs-Frameworks
► Game-Frameworks
Suchmaschinen und JavaScript
Lange Zeit waren Suchmaschinen und JavaScript keine besonders guten Freunde. Google und auch andere Suchmaschinen konnten JavaScript schlichtweg nicht crawlen. Dadurch blieben Inhalte im Verborgenen und konnten in die Bewertung des Rankings nicht einfließen. Inzwischen hat sich die Technik seitens Google verbessert. Auch andere Suchmaschinen, wie Bing, haben sich die letzten Jahre stark verbessert, was das Verstehen von grundlegendem JavaScript betrifft, sie stoßen jedoch bei komplexeren JavaScript-Frameworks an ihre Grenzen. Und auch andere Suchmaschinen haben bei der Ausführung und Interpretation von JavaScript noch Probleme.
Wie wird JavaScript von Google verarbeitet?
Bevor es an die Analyse zu JavaScript-Seiten geht, gilt es erst zu verstehen, wie Google Website-Inhalte crawlt und anschließend indexiert. Der Ablauf bei der Indexierung von normalen HTML-Inhalten ist hier einfach gehalten:
- Googlebot gelangt auf eine Seite, der Server spielt ihm direkt alle Inhalte aus dem Quelltext aus.
- Der Googlebot analysiert den Quellcode und folgt den verlinkten Ressourcen. Er crawlt und indexiert zunächst den HTML-Inhalt der Seite.
- Wenn ein JavaScript-Element zusätzlich indexiert werden soll, wird dieses zunächst in eine Render-Warteschlange gelegt. Anschließend wird der JavaScript-Code gerendert und ausgewertet.
- Die Inhalte werden vom Googlebot an den Indexer weitergegeben, sodass im besten Fall die Seiten und/oder der jeweiligen Inhalte in den Suchindex aufgenommen wird und bei entsprechenden Suchanfragen ausgespielt werden können.
Der Rendering-Prozess für JavaScript-Inhalte ist in den gesamten Crawling- und Indexierungsprozess integriert, nicht strikt getrennt. Google kann die meisten modernen JavaScript-Implementierungen rendern und verstehen. Es beansprucht jedoch mehr Ressourcen und Zeit als das Verarbeiten von statischem HTML, was zu Verzögerungen in der Indexierung führen kann.
Wir helfen dir weiter, wenn du auf Fehler stößt
JavaScript SEO – typische Herausforderungen und passende Lösungen
Nun, da wir verstehen, wie die Verarbeitung von JavaScript bei Google abläuft, stellt sich die Frage, welche Probleme sich durch JavaScript im SEO ergeben können. Im Folgenden widmen wir uns daher einigen der häufigsten Fehler und Hürden, die beim Einsatz von JavaScript in der Webentwicklung auftreten können. Diese Herausforderungen betreffen sowohl technische Aspekte wie das Rendering und die Indexierung durch Suchmaschinen als auch Performance-Fragen wie die Ladegeschwindigkeit. Indem du dir diese Hürden (und Lösungen) bewusst machst, kannst du eine optimale Funktionalität deiner Website gewährleisten.
Indexierungsprobleme
Laut einer Studie werden Inhalte, die mittels JavaScript ausgespielt werden, meist etwas verzögert in den Index aufgenommen. Grund hierfür ist, dass das Rendern sehr ressourcen- und kostenintensiv ist und dadurch der Ablauf auf einer separaten Umgebung ausgelagert wird. Dies kann besonders problematisch sein, wenn neue Inhalte schnell in den Suchergebnissen erscheinen sollen.
✔ Um die Indexierung zu beschleunigen, kann Server-Side Rendering (SSR) oder dynamisches Rendering implementiert werden. Diese Techniken sorgen dafür, dass der vollständige HTML-Code der Seite sofort für den Crawler bereitsteht, was die Indexierung erheblich beschleunigt.
Kurzer Exkurs: Was ist SSR – Server-Side- Rendering?
Dies ist eine Technik in der Webentwicklung, bei der die vollständige HTML-Seite auf dem Server generiert wird, bevor sie an den Browser des Nutzers (Client) gesendet wird. Dies steht im Gegensatz zum Client-Side Rendering (CSR), bei dem der Browser zunächst eine grundlegende HTML-Seite erhält
und die Inhalte erst durch JavaScript auf dem Gerät des Nutzers geladen und gerendert werden.
Unvollständige Indexierung
Ein weiteres spezifisches Problem ist: Inhalte, die durch JavaScript generiert werden, können oftmals nicht vollständig gerendert und daher nicht indexiert werden. Dies passiert häufig, wenn wichtige Inhalte erst nach einer Benutzerinteraktion oder durch nachträgliches Laden sichtbar werden. In solchen Fällen erfasst Google möglicherweise nur den initialen HTML-Code ohne die zusätzlichen, durch JavaScript generierten Inhalte, was zu einer unvollständigen Indexierung führt.
✔ Progressive Enhancement ist hier eine effektive Lösung in der JavaScript SEO. Bei dieser Technik wird der Grundinhalt der Seite in HTML bereitgestellt, während JavaScript zusätzliche Funktionen hinzufügt.
Blockierung von Ressourcen
Bei Sperr-Anweisungen von JavaScript-Dateien in der robots.txt-Datei sperrst du Suchmaschinen den Zugriff auf diese Ressourcen. Dadurch wird schon der erste Schritt aus der Indexierungsabfolge gehemmt – das Crawling. Dies kann besonders problematisch sein, wenn die blockierten Ressourcen für das Laden von wesentlichen Inhalten verantwortlich sind.
✔ Überprüfe die robots.txt-Datei und stell sicher, dass keine wichtigen Ressourcen blockiert sind. Alle für das Rendering und die Anzeige von Inhalten notwendigen Dateien sollten eine Crawlbarkeit gewährleisten und für Suchmaschinen zugänglich sein
Dynamische und Hash-basierte URLs
Besonders bei Websites, die komplett auf JavaScript gemünzt sind, sollte darauf geachtet werden, dass jeder Seite einer Domain eine eigene URL zugeordnet wird. Zusätzlich passiert es auf Single Page Application leicht, dass bei einer JavaScript-Programmierung in der URL das Hash oder auch Raute hinzugefügt wird. Dies sollte in jedem Fall vermieden werden, da Google die Angaben nach diesem „#“ ignoriert. Grund dafür: per definitionem ist es keine eigene URL, das „#“ setzt nur einen Ankerpunkt und linkt auf ein bestimmtes Element im Code. Was ist dann das Ergebnis? Google erkennt in allen internen Verlinkungen einen Link zur Startseite und würde keinen weiteren Links mehr folgen. Für PageJumps kannst du aber weiterhin gerne den Hash nutzen.
✔ Achte darauf, dass die URLs deiner Seite sauber und sprechend gestaltet sind und dass jede wichtige Seite ihre eindeutige, indexierbare URL erhält.
Ladezeitprobleme
Nicht zu vernachlässigen ist ebenfalls die Ladegeschwindigkeit einer Website, die einen erheblichen Einfluss auf die SEO-Leistung hat. JavaScript kann die Ladezeit einer Seite verlangsamen und somit auch die Core Web Vitals, insbesondere, wenn große und unkomprimierte JavaScript-Dateien geladen werden müssen. Wieso hat das Einfluss auf SEO? – eine langsame Website führt nicht nur zu einer schlechten Benutzererfahrung, sondern kann auch das Ranking in den Suchergebnissen negativ beeinflussen. Tools wie Google PageSpeed Insights können dir dabei helfen, spezifische Ladezeitprobleme zu identifizieren und Optimierungen vorzunehmen.
✔ Minimiere und komprimiere JavaScript-Dateien und entferne unnötige Skripte.
✔ Implementiere Lazy Loading für Bilder und andere Ressource.
✔ Außerdem kann das Caching von JavaScript-Dateien die Ladegeschwindigkeit erhöhen.
Nicht kompatibel für alle Suchmaschinen
Während Google mittlerweile gut darin ist, JavaScript-basierte Websites zu rendern und zu indexieren, haben andere Suchmaschinen wie Yahoo oder Yandex Schwierigkeiten damit. Folglich können diese Suchmaschinen oder auch soziale Netzwerke die relevanten Informationen nicht erkennen und mit in das Ranking einbeziehen.
✔ Durch serverseitiges Rendering (SSR) kann eine korrekte Indexierung aller Suchmaschinen gefördert werden. Diese Technik fördert eine vollständige Erfassung der Seite aller Suchmaschinen, unabhängig von ihrer Fähigkeit, JavaScript zu verarbeiten.
✔ Diese Inhalte dürfen nicht fehlen: Meta-Tags wie Meta-Title, Meta-Description, Meta-Robot-Angaben und Canonical-Tags müssen jeglichem Crawler bereitgestellt werden.
Jetzt kostenlosen SEO Check sichern!
Einfach Ansprechpartner und URL hier einsenden
Analyse einer JavaScript-Seite mittles Tools
Es reicht natürlich nicht nur zu wissen, welche Fehler auftreten könnten, sondern ob die gefragte Seite diese Probleme aufweist. Die folgenden Prüfungstools helfen dir dabei, sicherzustellen, dass deine Website von Suchmaschinen korrekt gecrawlt, gerendert und indexiert wird.
JavaScript Inhalt auf der Website prüfen
Wichtig bei JavaScript SEO ist die Prüfung, welcher Content ohne JavaScript ausführbar ist und wie dieser angezeigt wird. Es gibt zwei Möglichkeiten im Browser festzustellen, wie die Website ohne JavaScript funktioniert und für den User und für den Googlebot dargestellt wird.
Rufe die entsprechende Website auf und deaktiviert anschließend JavaScript im Browser. Dies kannst du in den gängigen Browser-Anwendungen unter Einstellungen oder nutze das Plug-in „Web Developer Toolbar“. Bei diesem Plug-in lässt sich durch einen Klick das JavaScript aus und wieder anschalten – so könnt ihr auch einzelne Anwendungen einfach überprüfen.
Danach solltest du die Seite im Browser neu laden. Nun wird die Website ohne JavaScript ausgeführt. Je nachdem, wie häufig JavaScript verwendet wird, können verschiedene Elemente nicht mehr aufgerufen oder gesteuert werden. Wenn die Website nur auf clientseitigem Rendering basiert, bleibt die Seite komplett leer beziehungsweise weiß.
Mobile-Friendly-Test von Google Page Speed Insights
Google selbst empfiehlt den Mobile-Friendly-Test, um zu überprüfen, ob Google deine JavaScript-Website korrekt verarbeiten kann. Google bietet so einen Mobile-Friendly-Test an. Das Ergebnis des Google-Tests zeigt dir den gerenderten Quellcode, samt reinem Screenshot, an. Zusätzlich findest du dort mögliche Fehler in der JavaScript-Konsole.
Google Search Console
Nicht zu vergessen ist auch beim JavaScript SEO die Google Search Console, in der du eine Gesamtübersicht über die Seiten erhältst, die bereits erfolgreich im Index aufgenommen wurden. Findest du nur wenige Seiten bis keine Seite im Index, kann das ein klares Indiz sein, dass Google Probleme hat, deine Seiten richtig zu interpretieren oder überhaupt zu erfassen. Schau dir über den Live-URL-Test der Google Search Console deine Seiten an. Dieses Tool überprüft, ob Google in der Lage ist, diese URL zu indexieren. Gleichzeitig kannst du mit dem Test sicherstellen, dass deine Seite ordnungsgemäß funktioniert und zugänglich ist.
Der Suchbefehl „Site“
Eine direkte Möglichkeit, Indexierungen abzufragen, ist die Site-Abfrage. Damit kannst du feststellen, ob Google deine URL ordnungsgemäß indexiert hat. Setz dafür einfach die folgende Abfrage in die Google-Suchleiste: site:deine-seite.de.
Achtung: Um genau zu sehen, wie viele deiner Seiten indexiert sind, musst du über Google Chrome nun auf den Suchfilter gehen.
Findest du deine Seite in den Suchergebnissen nicht, ist diese nicht im Index von Google.
Diffchecker
Das Tool „Diffchecker“ ist besonders nützlich, um den ursprünglichen Quellcode mit dem gerendertem Quellcode aus zum Beispiel der Google Search Console zu vergleichen. Dadurch kannst du Änderungen im Quellcode nach dem Rendern ganz leicht ausfindig machen.
Entwicklertools im Browser
In den gängigsten Webbrowsern findest du eine Sammlung nützlicher Entwicklertools, die einige SEO-Prüfpunkte zugänglich machen.
Zum Beispiel für Chrome: die DevTools, die du mit Rechts-Klick und „Untersuchen“ auswählst, die Tastenkombination Strg+Shift+I verwendest oder F12 drückst. Ein ähnliches Prinzip gilt für Firefox und Microsoft Edge.
Diese Werkzeuge ermöglichen es dir, eine Website zu analysieren und Änderungen im Quellcode vorzunehmen, ohne den Originalcode zu verändern. Mit aktiviertem JavaScript kannst du den generierten Code betrachten. Wenn du die Skriptsprache deaktivierst und die aktuelle Seite neu lädst, siehst du möglicherweise bereits Änderungen im Code, die dir bei der weiteren Analyse helfen können. Achte hier besonders auf die wichtigsten Aspekte, die oben benannt wurden, wie zum Beispiel Meta-Daten und andere Meta Tags.
Die Geheimwaffe von SEOs: Der ScreamingFrog
Der Screaming Frog ist ein unverzichtbares Tool für SEO-Experten, das dabei hilft, Websites zu crawlen und technische SEO-Probleme zu identifizieren. Doch wusstest du, dass Screaming Frog auch speziell für JavaScript SEO eingesetzt werden kann? Mit der richtigen Konfiguration kann dieses Tool JavaScript-Inhalte rendern und so eine korrekte Analyse sicherzustellen.
Screaming Frog simuliert den Googlebot und analysiert, wie dieser deine Website sieht. Bei herkömmlichen Websites ist das Crawlen relativ einfach. Doch bei JavaScript-lastigen Seiten muss der Screaming Frog die Inhalte zuerst rendern, um sie korrekt zu analysieren. Dies bedeutet, dass es die JavaScript-Dateien ausführt, um den vollständigen HTML-Code zu sehen, den auch ein Browser sehen würde.
► Aktiviere das Rendern von JavaScript: In Screaming Frog kannst du unter den Einstellungen die Option aktivieren, JavaScript zu rendern. Dies ermöglicht es dem Tool, JavaScript-Inhalte zu sehen und zu crawlen.
SEO Best Practises mit JavaScript
Wenn du sicherstellen willst, dass deine Website in den Suchergebnissen gut rankt, gibt es eine einfache Regel: Liefere wichtige Inhalte als HTML aus! JavaScript beinhaltet viele Möglichkeiten für einer Seite, doch es kann Suchmaschinen auch unnötige Verständnis-Probleme bereiten. Warum also das Risiko eingehen, wenn es auch einfach geht?
Unsere Best Practices für JavaScript SEO zusammengefasst, die jeder Webseitenbetreiber beachten sollte:
✔ Inhalte zuerst in HTML bereitstellen durch Progressive Enhancement
✔ Inhalte die Suchmaschinenrelevant sind, sollten innerhalb von 5 Sekunden gerendert und geladen sein
✔ Server-Side Rendering (SSR) nutzen
✔ Da erst der gerenderte Code alle Inhalte anzeigt, reicht die Analyse vom Quellcode (Pre-DOM) nicht aus
✔ Relevante und SEO-wichtige Inhalte müssen nach dem Load-Event dargestellt werden. Hinweis: Inhalte, die durch ein User-Event erzeugt werden, können nicht indexiert werden.
✔ Keine Blockierung von wichtigem JavaScript in der robots.txt
✔ Saubere URLs verwenden – keine hash-basierten URLs (#)
✔ Beim Aufruf einer Seite muss eine eigene URL mit serverseitiger Unterstützung erzeugt werden.
✔ JS-Ressourcen minimieren oder kritische JS-Ressourcen zurückstellen
✔ Aktivieren von Lazy Loading für Bilder, die sich weiter unten im DOM befinden
✔ Beim Einsatz von Lazy Loading für Bilder muss der Dateiname im Quellcode vorhanden sein
✔ Langlebiges Caching für JavaScript-Dateien nutzen
✔ Statische Meta-Tags und Canonicals verwenden – ohne Rendern von JavaScript im Header geladen werden
✔ Klare und aussagekräftige Meta-Titel und – Beschreibungen verwenden
✔ Links sollten über den < a >-Tag in HTML implementiert werden
✔ Dinge wie Flyouts, Akkordeons & Co. lassen sich mittlerweile auch ohne JavaScript lösen
Keine wichtigen News mehr verpassen
Dank aktuellen Infos der Konkurrenz voraus: Abonniere noch heute unseren kostenlosen Fachexpertenblog und bleib immer up to date
Fazit
JavaScript SEO ist ein komplexes, aber entscheidendes Thema für jeden, der eine moderne Website entwickelt und optimieren möchte. Trotz vieler Hürden, die es im SEO bei nicht optimaler Einbindung mit sich bringen kann, ist JavaScript bedeutend für eine benutzerfreundliche und hochinteraktive Darstellung der Seite. Aus diesem Grund ist es so wichtig einen genauen Überblick darüber zu haben, wie man es einsetzt. Mit unserer JavaScript SEO- Best Practice-Liste kannst du sicherstellen, dass deine Website den Best Practices entspricht und sowohl für Suchmaschinen als auch für Benutzer optimiert ist.
Halte die Entwicklungen in der Technologie im Auge und informiere dich über neue Methoden und Best Practices. Nur so kannst du eine Wettbewerbsfähigkeit und dadurch hohe Sichtbarkeit sicherstellen und dein Online-Geschäft vorantreiben. Für weitere nützliche Einblicke und praxisnahe Tipps zur Verbesserung deines Online-Auftritts, schau dir unbedingt unseren Blog an.
JavaScript SEO ist keine Einmalaufgabe, sondern ein fortlaufender Prozess, der regelmäßige Überprüfungen und Anpassungen erfordert. Mit dem richtigen Ansatz kannst du jedoch sicherstellen, dass deine Website nicht nur gut aussieht und funktioniert, sondern auch in den Suchergebnissen gut platziert ist. Selbstverständlich stehen wir dir auch persönlich zur Verfügung! Nutze unsere kostenlose und unverbindliche SEO-Beratung oder nimm direkt Kontakt mit uns auf – sei es telefonisch oder über unser Kontaktformular. Gemeinsam finden wir heraus, wie wir dich optimal unterstützen können.
Mach jetzt den ersten Schritt
Nutze unser Kontaktformular
…oder kontaktiere uns direkt!
Deine Ansprechpartnerin
Wir sind für dich da
Montag – Freitag
von 9:00 bis 18:00 Uhr
Anschrift
Hohenstaufenring 62
50674 Köln