JavaScript SEO: Ausführlicher Leitfaden

Eine gängige SEO-Herausforderung besteht darin, Google dazu zu bringen, JavaScript Content zu indexieren. In diesem Leitfaden erfährst du alles, was du über JavaScript SEO wissen musst. Wir gehen auf häufige Probleme und Lösungen ein und zeigen dir, wie Suchmaschinen mit JavaScript generierten Content crawlen, darstellen und indexieren.

Eins der häufigsten Probleme des technischen SEO ist, JavaScript Content in der Suchmaschine indexiert zu bekommen.

JavaScript kommt im Internet immer häufiger zum Einsatz. Allerdings haben viele Websites zu wenig organischen Wachstum, weil sie die Möglichkeiten von JavaScript SEO vernachlässigen.

Falls deine Website mit JavaScript Frameworks (wie React, Angular oder Vue.js) realisiert wurde, stehst du unweigerlich vor anderen Herausforderungen als bei Websites, die mit WordPress, Shopify oder anderen beliebten CMS-Plattformen entstanden sind.

Um aber in den Suchmaschinen erfolgreich zu sein, solltest du folgende Schritte kennen: Wie du die Seiten deiner Website überprüfen kannst, ob sie korrekt angezeigt und indexiert werden können, wie du Website-Probleme ermittelst und sie suchmaschinenfreundlich umgestaltest.

In diesem Leitfaden erfährst du alles, was du über JavaScript SEO wissen musst. Wir sehen uns folgende Punkte an:

• Was ist JavaScript?
• Was ist JavaScript SEO?
• Wie wird JavaScript von Google gecrawlt und indexiert?
• Wie du JavaScript Content deiner Website SEO-freundlich gestaltest
• Worin besteht der Unterschied zwischen serverseitigem Rendering, clientseitigem Rendering und dynamischem Rendering?
• Häufige JavaScript SEO Probleme und wie du sie verhinderst

Was ist JavaScript?

JavaScript bzw. JS ist eine Programmier- (oder Skript-) Sprache für Websites. 

JavaScript erweitert die Funktionalität von HTML und CSS um zusätzliche Interaktivitätsoptionen, die ansonsten nicht möglich wären. Auf den meisten Websites betrifft das vorwiegend Grafikanimationen und Slider, interaktive Formulare, Karten, webbasierte Spiele und weitere interaktive Funktionen.

Immer öfter werden aber auch ganze Websites mit JavaScript Frameworks wie React oder Angular erstellt, die für mobile Apps und Web-Apps verwendet werden können. Da diese Frameworks für ein- und mehrseitige Web-Anwendungen eingesetzt werden können, werden sie immer populärer. 

Doch bringt der Einsatz von JavaScript und anderen Frameworks eine Reihe von SEO-Problemen mit sich. Wir gehen darauf im Einzelnen ein. 

Was ist JavaScript SEO?

JavaScript SEO gehört zu den technischen SEO-Maßnahmen, bei denen es darum geht, den Suchmaschinen das Crawlen und Indexieren von JavaScript zu erleichtern.

Bei der Suchmaschinenoptimierung für JavaScript-Seiten müssen spezielle Herausforderungen und Prozesse beachtet werden. Wenn du dafür sorgst, dass deine Seiten von den Suchmaschinen indexiert werden können, hast du optimale Chancen auf ein gutes Ranking.

Allerdings können bei der Arbeit mit JavaScript-Seiten leicht Fehler gemacht werden. Du solltest daher eng mit Entwicklern zusammenarbeiten, um sicherzustellen, dass alles funktioniert.

Da JavaScript jedoch immer beliebter wird, ist wichtig zu wissen, wie man solche Websites richtig optimiert.

Wie wird JavaScript von Google gecrawlt und indexiert?

Google kann JavaScript heute besser rendern als noch vor ein paar Jahren, als es gewöhnlich Wochen dauerte, bis dies passierte.

Aber bevor wir uns damit befassen, wie du sicherstellst, dass das JavaScript deiner Website SEO-freundlich ist und tatsächlich gecrawlt und indexiert wird, solltest du verstehen, wie Google JavaScript verarbeitet. Dieser Prozess besteht aus drei Phasen:

1. Crawlen
2. Rendern
3. Indexieren

In der nächsten Abbildung ist dieser Prozess noch ausführlicher dargestellt:

Schauen wir uns diesen Prozess ein wenig genauer an und vergleichen ihn damit, wie der Googlebot eine HTML-Seite crawlt.

Dieser Prozess verläuft schnell und einfach: Eine HTML-Datei wird einfach abgerufen, die Links extrahiert und die CSS-Dateien heruntergeladen, bevor diese Inhalte an Caffeine, den Suchindex von Google, gesendet werden. Caffeine indexiert dann die Seite. 

Wie bei einer HTML-Seite beginnt der JavaScript-Prozess damit, dass die HTML-Datei abgerufen wird. Anschließend werden die Links von JavaScript generiert, diese können aber nicht direkt extrahiert werden. Daher lädt Googlebot die CSS- und JS-Dateien der Seite herunter und muss anschließend den Web Rendering Service (WRS) von Caffeine nutzen, um diese Inhalte indexieren zu können. Der WRS kann den Content dann indexieren und die Links extrahieren.

Dieser Prozess ist in der Tat sehr kompliziert und erfordert mehr Zeit und Ressourcen als bei einer HTML-Seite, denn Google muss JavaScript erst rendern, um den Content indexieren zu können. 

Das Crawlen einer HTML-Website erfolgt schnell und effizient: Googlebot lädt den HTML-Code herunter, extrahiert anschließend die Links auf der Seite und crawlt sie. Sobald JavaScript im Spiel ist, geht das nicht mehr so einfach, denn JavaScript muss zunächst gerendert werden, bevor die Links extrahiert werden können. 

Schauen wir uns also an, wie du den JavaScript Content deiner Website SEO-freundlich gestalten kannst. 

Wie du JavaScript Content deiner Website SEO-freundlich gestaltest

Um deine Website indexieren zu können, muss Google das JavaScript deiner Website crawlen und rendern können. Allerdings kommt es nicht selten zu Problemen, die dies verhindern.

Es gibt verschiedene Schritte, mit denen du sicherstellen kannst, dass das JavaScript deiner Website SEO-freundlich ist, damit dein Content gerendert und indexiert werden kann. 

Drei Dinge sind wichtig:

• Google muss den Content deiner Website crawlen können
• Google muss den Content deiner Website rendern können
• Google muss den Content deiner Website indexieren können

Mit einigen Schritten stellst du sicher, dass das alles klappt, und du kannst die Suchmaschinenfreundlichkeit von JavaScript Content verbessern.

Wir erklären nun diese Schritte. 

Prüfe in der Google Search Console, dass Google deine Webseiten rendern kann

Zwar basiert Googlebot auf der neuesten Version von Chrome, aber er verhält sich nicht so wie ein Browser. Das bedeutet: Öffnest du deine Website damit, gibt es keine Garantie dafür, dass der Content deiner Website auch dargestellt werden kann.

Um zu prüfen, ob Google deine Webseiten rendern kann, solltest du das URL-Prüftool in der Google Search Console verwenden.

Gib dort die URL einer Seite ein, die du testen möchtest, und klicke auf die Schaltfläche „LIVE-URL TESTEN“, die sich oben rechts auf deinem Bildschirm befindet.

Nach einer oder zwei Minuten kannst du über die Registerkarte „Live Test“ einen Screenshot der Seite aufrufen, der dir zeigt, wie Google die Seite darstellt. Klicke hierzu auf „Getestete Seite anzeigen“. Auf der Registerkarte HTML kannst du dir auch den gerenderten Code ansehen.

Prüfe, ob es Ungereimtheiten oder fehlenden Content gibt. Das könnte bedeuten, dass Komponenten (einschließlich JavaScript) blockiert sind oder das Fehler oder Timeouts aufgetreten sind. Klicke anschließend auf die Registerkarte „Weitere Informationen“, um dir alle Fehler anzeigen zu lassen. Dadurch kannst du die Ursache finden.

Häufigster Grund, warum Google die JavaScript-Seiten nicht rendern kann

Google kann JavaScript-Seiten meist nicht darstellen, weil die JavaScript-Ressourcen – oft versehentlich – in der robots.txt-Datei deiner Website blockiert sind.

Ist das der Fall, solltest du den folgenden Code in die robots.txt-Datei einfügen. Damit wird sichergestellt, dass keine wichtigen Ressourcen beim Crawlen blockiert werden:

Berücksichtige, dass Google keine js- oder css-Dateien in den Suchergebnissen indexiert. Diese Ressourcen dienen ausschließlich zum Rendern einer Webseite. 

Es besteht kein Grund, wichtige Ressourcen zu blockieren. Andernfalls kann dein Content nicht gerendert und daher nicht indexiert werden. 

Stelle sicher, dass Google deinen JavaScript Content indexiert

Nachdem du überprüft hast, ob deine Webseite richtig gerendert wird, solltest du herausfinden, ob sie indexiert wird.

Das kannst du entweder über die Google Search Console oder direkt in der Suchmaschine überprüfen.

Gibst du in Google vor dem Namen deiner Webseite den Befehl „site:“ ein, kannst du sehen, ob deine Webseite bereits im Index vorhanden ist. Ersetze beispielsweise yourdomain.com unten durch die URL der Seite, die du testen möchtest:

Befindet sich die Seite im Index von Google, wird sie als Ergebnis angezeigt:

Falls du die URL nicht angezeigt bekommst, heißt das, dass die Seite im Index nicht enthalten ist.

Gehen wir aber davon aus, dass dies der Fall ist, prüfen wir, ob ein Abschnitt mit JavaScript generiertem Content indexiert wird. 

Verwende auch hier den Befehl „site:“ und gib zusätzlich ein Inhaltselement (Snippet) ein. Zum Beispiel:

Hier prüfst du, ob dieser Content indexiert wurde. In diesem Fall ist dieser Text im Snippet enthalten. 

Du kannst auch mit der Google Search Console feststellen, ob JavaScript-Content indexiert wird. Dafür nutzt du ebenfalls das Tool für die URL-Prüfung.

Diesmal klickst du nicht auf die Live-URL, sondern auf die Schaltfläche „Gecrawlte Seite anzeigen“ und siehst dir den HTML-Quellcode der indexierten Seite an.

Überprüfe den HTML-Code auf Content-Snippets, von denen du weißt, dass sie mit JavaScript erstellt wurden. 

Häufige Gründe, warum Google JavaScript Content nicht indexieren kann

Google kann JavaScript Content aus verschiedenen Gründen nicht indexieren.

Dazu gehören:

• Der Content kann in der ersten Instanz nicht gerendert werden.
• Die URL kann nicht gefunden werden, da die Links zu ihr von JavaScript mit dem Event-Handler „Click“ erzeugt wurden.
• Das Zeitlimit der Seite wird überschritten, während Google den Content indexiert.
• Google hat festgestellt, dass die JS-Ressourcen die Seite nicht ausreichend verändern, um einen Download zu rechtfertigen.

Wir erklären dir, wie du einige dieser häufig festgestellten Probleme lösen kannst.

Worin besteht der Unterschied zwischen serverseitigem Rendering, clientseitigem Rendering und dynamischem Rendering?

Ob Google Probleme damit hat, deinen JavaScript-Content zu indexieren, hängt primär davon ab, wie deine Website diesen Code darstellt. Außerdem solltest du zwischen serverseitigem Rendering, clientseitigem Rendering und dynamischem Rendering unterscheiden können.

Suchmaschinenoptimierer sollten deshalb unbedingt mit Entwicklern zusammenzuarbeiten, um die Schwierigkeiten bei der Arbeit mit JavaScript zu meistern. Google verbessert zwar ständig das Crawlen, Rendern und Indexieren von JavaScript Content, aber du kannst verhindern, dass viele der häufig festgestellten Probleme erst gar nicht auftreten.

Für die JavaScript SEO ist es im Grunde am wichtigsten, die verschiedenen Möglichkeiten zu kennen, wie JavaScript gerendert werden kann.

Welche verschiedenen Rendering-Arten gibt es also und was steckt dahinter?

Serverseitiges Rendering (SSR) JavaScript wird auf dem Server gerendert und die gerenderte HTML-Seite wird dem Client (dem Browser, Googlebot usw.) bereitgestellt. Der Prozess, um die Seite zu crawlen und zu indexieren, funktioniert genauso wie bei jeder HTML-Seite, die wir oben beschrieben haben. Hierbei sollten keine JavaScript-spezifischen Probleme auftreten. 

SSR funktioniert so, dass bei jeder von dir aufgerufenen Website dein Browser eine Anfrage an den Server stellt, auf dem der Content der Website gespeichert ist. Nachdem die Anfrage verarbeitet wurde, erhält dein Browser das vollständig gerenderte HTML zurück und zeigt es auf dem Bildschirm an. Das Problem dabei ist, dass SSR recht komplex sein kann und Entwickler manchmal vor Herausforderungen stellt. Es gibt jedoch Tools wie Gatsby und Next.JS (für das React-Framework), Angular Universal (für das Angular-Framework) oder Nuxt.js (für das Vue.js-Framework), die bei der Realisierung helfen.

Clientseitiges Rendering (CSR) CSR ist das Gegenteil von SSR. JavaScript wird vom Client (Browser oder Googlebot) über das DOM (Dokumenten-Objekt-Modell) gerendert. Muss der Client JavaScript rendern, können die oben beschriebenen Schwierigkeiten auftreten, wenn Googlebot versucht, den Content zu crawlen, zu rendern und zu indexieren.

Anstatt den gesamten Content aus dem HTML-Dokument selbst zu beziehen, erhält man ein reines HTML-Dokument mit einer JavaScript-Datei, die den Rest der Website im Browser rendert.

Dynamisches Rendering ist eine Alternative zum serverseitigen Rendering. Mit dieser Lösung kannst du Nutzern eine Website anbieten, die im Browser generierten JavaScript Content enthält, dem Googlebot aber eine statische Variante liefert. 

Dynamisches Rendering ist eine Problemumgehung und keine von Google empfohlene Lösung. Es schafft zusätzliche, unnötige Komplexität und Ressourcen für Google. 

Du kannst die Verwendung von dynamischem Rendering in Betracht ziehen, wenn du eine große Website mit Inhalt hast, die sich schnell ändert und eine schnelle Indizierung erfordert.

Hinweis: Dynamisches Rendering wird übrigens nicht als Cloaking angesehen, solange der angezeigte Content ähnlich ist. Als Cloaking wird es nur dann eingestuft, wenn komplett anderer Content geliefert wird. Beim dynamischen Rendering sehen Nutzer und Suchmaschinen denselben Content, möglicherweise nur mit einem anderen Maß an Interaktivität. 

Weitere Informationen zum Einrichten von dynamischem Rendering und einigen alternativen Ansätzen finden Sie in den Richtlinien von Google.

Prüfe deine JavaScript-Probleme mit dem Semrush Site-Audit

Die regelmäßige Durchführung von Audits auf deiner Website ist wichtig für SEO. 

Das Site-Audit-Tool von Semrush kann JS wie Google crawlen. Auch wenn es clientseitig gerendert wird. 

Gib zunächst deine Domain ein und klicke auf „Projekt erstellen“.

Wähle dann „Aktiviert“ für das JS-Rendering in den Crawler-Einstellungen. 

Nach dem Crawling findest du alle Probleme auf der Registerkarte „Probleme“. 

Häufige JavaScript SEO Probleme und wie du sie verhinderst

SEO-Probleme, die durch JavaScript verursacht werden, sind keine Seltenheit. Nachfolgend zeigen wir dir einige der häufigsten Probleme und geben dir Tipps, wie du sie vermeiden kannst.

• Werden js-Dateien in deiner robots.txt-Datei blockiert, verhindert das möglicherweise, dass Googlebot diese Ressourcen crawlt und entsprechend rendert und indexiert. Du solltest das Crawlen dieser Dateien zulassen, um die damit verbundenen Probleme zu umgehen.
• Google wartet in der Regel nicht lange auf das Rendern von JavaScript Content. Falls sich dieser Prozess verzögert, kann es sein, dass der Content aufgrund eines Timeout-Fehlers nicht indexiert wird. 
• Falls du eine Paginierung (Unterteilung langer Artikel in mehrere kürzere Seiten) einrichtest, bei der Links zu Seiten hinter der ersten Seite (z. B. einer E-Commerce-Kategorie) nur durch Mausklicks generiert werden, können diese nachfolgenden Seiten nicht gecrawlt werden, da Suchmaschinen nicht auf Schaltflächen klicken. Sorge deshalb dafür, dass du statische Links verwendest, damit Googlebot die Seiten deiner Website findet.
• Achte beim verzögerten Laden einer Seite mit JavaScript darauf, dass das Laden von Content, der indexiert werden soll, nicht verzögert wird. Diese Option wird normalerweise für Bilder und nicht für Textinhalt verwendet. 
• JavaScript, das vom Client gerendert wird, kann Serverfehler nicht auf die gleiche Weise anzeigen wie Content, der vom Server gerendert wird. Am besten solltest du Fehler auf eine Seite umleiten, die z. B. einen 404-Statuscode anzeigt. 
• Die URLs für die Seiten deiner Website sollten statisch sein und kein # verwenden. Damit stellst du sicher, dass deine URLs so aussehen (yourdomain.com/web-page) und nicht so (yourdomain.com/#/web-page) oder so (yourdomain.com#web-page). Verwende statische URLs. Andernfalls werden diese Seiten nicht indexiert, da Google die Hashtags in der Regel ignoriert.

Fazit

Es lässt sich nicht leugnen, dass JavaScript Probleme beim Crawlen und Indexieren des Contents deiner Website verursachen kann. Indem du die Gründe dafür kennst und weißt, wie du mit JavaScript generierten Content am besten aufbereitest, kannst du diese Probleme reduzieren.

Es bedarf Zeit, um JavaScript richtig zu verstehen. Und auch wenn Google JavaScript immer besser indexiert, ist es wichtig, dass du deine Kenntnisse darüber ausbaust, um damit einhergehende Probleme zu lösen.