JavaScript und SEO – Praxisguide

Inzwischen hat sich die Technik jedoch verbessert und Google wie andere Suchmaschinen sind in der Lage, JS zu crawlen und zu rendern. Grund genug für Dich, mithilfe dieser Anleitung JavaScript so einzusetzen, dass die Suchmaschinenoptimierung nicht beeinträchtigt wird.

Können Suchmaschinen JavaScript überhaupt crawlen?

In der Praxis ist die Antwort auf diese Frage nicht ganz so simpel, denn mit dem Einsatz von JavaScript für Design und Funktionalität ist immer auch ein gewisses Risiko verbunden. Dieses Risiko besteht darin, dass Crawler die Inhalte falsch interpretieren und Ergebnisse entstehen, die Du so nicht beabsichtigt hast.

Eine Suchmaschine, die mit JavaScript umgehen kann, ist Google. Auch BING kann JavaScript rendern. Zwar hat der Suchmaschinenriese gemeinsam mit BING hierzulande einen Marktanteil bei der Websuche von über 90 Prozent, doch tatsächlich gibt es noch viele weitere Bots, die Deine Webseite crawlen wollen oder crawlen sollen. Von Bing über Facebook bis hin zu bestimmten SEO-Tools werden Bots für das Crawling von Webseiten eingesetzt. Viele dieser Bots können nicht mit JavaScript umgehen. Das kann zum Beispiel dazu führen, dass Backlink-Tools Links auf Deiner Webseite nicht erkennen oder Crawler keine XML-Sitemap erstellen können. Google ist beim Crawling von JS technisch vielen Anbietern voraus. So schränkt BING zum Beispiel die Rendering-Fahigkeiten seines Bots in Bezug auf JavaScript selbst ein: “However, bingbot does not necessarily support all the same JavaScript frameworks that are supported in the latest version of your favorite modern browser.” Deshalb empfiehlt BING, Dynamic Rendering zu verwenden. Auch Google rät Webmastern mit schnell wechselnden JavaScript-Inhalten, Dynamic Rendering einzusetzen.

Auch wenn es eine Reihe von Tests gibt, die erfolgreich belegen, dass zum Beispiel Google JavaScript sehr gut lesen kann, sagt das nur begrenzt etwas über die tägliche Praxis von Millionen von Webseiten aus, die JS einsetzen. Das soll Dich nicht grundsätzlich vor JavaScript abschrecken, doch tatsächlich ist seine Verwendung aus SEO-Sicht (noch) mit Vorsicht zu genießen.

Verlängert JavaScript die Ladezeit einer Webseite?

JavaScript-Webseiten müssen immer erst von einem Client oder Bot gerendert werden, damit sie dargestellt werden können. Dieses Rendering benötigt Zeit. JS-Seiten weisen im Vergleich zu reinen HTML-Seiten deshalb eine höhere Ladezeit auf. Andy Favell von searchenginewatch zeigt zum Beispiel in diesem Artikel, wie JavaScript die Ladezeit mobiler Websites verlängert. Mit entsprechenden Tools (s. letzter Abschnitt) lassen sich die Ladezeiten auch mit JavaScript optimieren.

Wird JavaScript in Form von Trackingcodes oder anderen Codes von Drittanbietern verwendet, empfiehlt es sich, die Codes immer am Ende und asynchron laden zu lassen, damit dadurch der Seitenaufbau nicht abgebremst wird.

Wie steht Google zu JavaScript?

Google hat im Oktober 2015 in der Webmasterzentrale veröffentlicht, dass die Suchmaschine in der Lage sei, Webseiten wie moderne Browser zu rendern und zu verstehen. Hierzu zählen auch JavaScript und CSS. Voraussetzung dafür ist, dass kein JavaScript oder CSS vom Crawling ausgeschlossen wird. In den aktualisierten Webmaster Guidelines wird deshalb empfohlen, keine wichtigen Seitenbestandteile über die robots.txt vom Crawling auszuschließen. Im gleichen Blogpost verweist Google jedoch darauf, dass es das Prinzip des Progressive Enhancement bevorzugt. Damit wird zwar nicht ausgeschlossen, dass JavaScript ausgelesen werden kann, doch Progressive Enhancement ist ein Ansatz, der eher auf die sukzessive Verbesserung von HTML-Webseiten abzielt.

Fassen wir zusammen: Google kann offensichtlich am besten von allen Suchmaschinen mit JavaScript umgehen, die Dateien crawlen und rendern. Doch tatsächlich solltest Du Webseiten nicht nur auf JavaScript-Basis entwickeln, sondern besser nur einige JS-Elemente verwenden.

Dennoch wies Googles John Mueller in einer Antwort auf der Plattform Reddit im Oktober 2018 darauf hin, dass JavaScript in den kommenden Jahren eine immer größere Bedeutung haben wird. Er gibt SEOs sogar den Tipp, sich verstärkt auf JavaScript und die damit verbundenen SEO-Maßnahmen zu beschäftigen: “If you're keen on technical SEO, then past HTML you're going to need to understand JS more and more”.

Allerdings hat Google selbst Projekte wie Google AMP oder Progressive Web Apps (PWA) vorangetrieben. Diese Ansätze fokussieren weniger JavaScript, sondern vielmehr HTML und HTML5. AMP selbst erlaubt nur asynchrones JavaScript.

Auf der Google-Entwicklerkonferenz im Mai 2018 hat Tom Greenaway von Google angekündigt, dass der Googlebot einen eigenen Renderer hat, der mit JavaScript umgehen kann, sobald der Bot JS auf einer Webseite entdeckt. Da jedoch das Rendering von JavaScript viele Ressourcen erfordert, hat Google laut Aussage Greenaways das Rendering von JS-Ressourcen gestoppt, bis der Googlebot mit den nötigen Ressourcen ausgestattet ist. Somit kann es vorkommen, dass der Googlebot eine Website indexiert, bevor das Rendering vollständig ist. Erst wenn der abschließende Renderingvorgang durchgeführt wurde, startet der Googlebot einen neuen Anlauf, um den Content der Client-Side u rendern.

John Mueller soll später auf der gleichen Entwicklerkonferenz laut thesempost ergänzt haben, dass neue Inhalte aus JavaScript länger benötigen, bis sie indexiert werden.

Warum ist es für Suchmaschinen schwer, JS zu crawlen?

Die Antwort auf diese Frage kann sehr ausschweifend werden, da diese Frage komplexe technische Zusammenhänge betrifft. Doch letztlich ist alles eine Frage der Rechenkapazität. So kann HTML, das mit PHP, CSS und anderen Techniken funktioniert, direkt von einem Crawler ausgelesen werden. Hierfür wird der Quellcode sofort beim Aufrufen der URL gerendert.

Bei JavaScript ist dieser direkte Zugang nicht möglich. Denn zunächst muss der Crawler das DOM (Document Object Model) analysieren. Hierfür wird der Code des DOM geladen und ausgeführt. Erst danach kann die Webseite gerendert werden. Diese Arbeit übernimmt beim Surfen im Web jeder Browser automatisch. Willst Du JavaScript testen, kannst Du dafür sogenannte "headless browsers" verwenden. Dabei handelt es sich um Browser ohne grafische Benutzeroberfläche, die über eine Kommandozeile bedient werden.

5 zentrale Regeln für den Einsatz von JavaScript

Basics für die Entwicklung von JS-Webseiten

JavaScript ist oftmals komplexer als HTML. Um zu wissen, was für SEO wichtig ist, solltest Du die Funktionsweise von JavaScript verstehen:

1. Initialer Request: Der Browser und somit auch ein Suchmaschinenbot startet einen GET-Request für den HTML-Code der Webseite und den damit verbundenen Assets.

2. DOM-Rendering: Die JS-Script-Seite liefert das DOM (Document Object Model) an den Browser oder Bot aus. Das Dokument zeigt an, wie der Inhalt auf der Webseite gebildet wird und welche Beziehungen zwischen den einzelnen Elementen auf der Seite bestehen. Der Browser rendert diese Informationen und macht sie für Nutzer sichtbar und verwendbar.

3. IDOM-Load: Während die Zielseite verarbeitet wird, löst der Browser Events aus, die über zum DOMContentLoaded gehören. Das initiale HTMl-Dokument wurde dann bereits geladen und geparst. Der Browser oder der Bot ist nun bereit, um JavaScript-Elemente auszuführen.

4. JavaScript-Ausführung: JavaScript-Elemente können nun Inhalte oder Funktionen der Webseite ändern, ohne dass der HTML-Quellcode verändert, gelöscht oder erweitert werden muss.

5. Load Event: Sobald die Ressource und die davon abhängigen JS-Ressourcen geladen wurden, startet der Browser das Load Event stellt die Seite damit fertig.

6. Post Load Events: Nachdem die JS-Seite geladen wurden, können weitere Content- oder Funktionselemente durch Nutzer verändert oder angepasst werden.

Suchmaschinen wie Google nutzten sogenannte Headless Browser, um den Zugriff eines herkömmlichen Browsers zu simulieren. Im Gegensatz zum "normalen" Browser ruft der Headless Browser den Code über das DOM ab, um daraus eine Webseite zu rendern. Auf diese Weise kann der Googlebot zum Beispiel prüfen, welche Elemente JavaScript einfügt, um die HTML-Seite zu modifizieren. Nach dem Rendering kann der Googlebot das gerenderte Element wie eine HTML-Quelle analysieren und indexieren.

Bei JavaScript-Seiten gibt es demnach für Crawler zwei Versionen, den pre-DOM HTML Code und den gerenderten post-DOM HTML Code.

Wichtige Events von JavaScript, die Einfluss auf SEO haben

Load Events und User Events können Deine SEO deutlich beeinflussen. Hier erfährst Du, warum das so ist.

• Load Event: Das Load Event wird vom Browser „gefeuert“, wenn eine Seite vollständig geladen wurde. Suchmaschinenrobots imitieren herkömmliche Browser beim Rendern von JavaScript. Das Load Event ist für sie demnach wichtig, um einen Snapshot vom gerenderten Content zu machen. Es wird davon ausgegangen, dass alle Elemente, die nach dem Load Event des Browsers geladen werden, nicht mehr zwangsläufig beim JavaScript-Crawling berücksichtigt und somit nicht mehr indexiert werden. Diese Vermutung liegt nahe, denn JavaScript kann Seiteninhalt schnell verändern. Das gilt zum Beispiel besonders für News-Seiten oder Feeds von sozialen Netzwerken wie Twitter und Facebook.

Mit dem Google Entwickler Tool lässt sich die Zeitspanne des DOMContentLoaded messen:

• User Events: Nach dem Load Event können über JavaScript weitere Events ausgelöst werden. Hierzu zählen zum Beispiel sogenannte „onClick-Events“. Dabei handelt es sich von Nutzern ausgelöste Events wie die Eingrenzung von Seiteninhalten oder eine interaktive Navigation. Allerdings wird dieser Content, der durch User Events geschaffen oder verändert wird, in der Regel nicht von Suchmaschinen indexiert, da er nach dem Event Load erfolgt.

Fehler, die Du mit JavaScript vermeiden solltest

Wenn Du JavaScript auf Deiner Webseite einsetzt, kann Google die Elemente mittlerweile nach dem Load Event sehr gut rendern und den Snapshot anschließend wie eine herkömmliche HTML-Seite auslesen und indexieren.

Tatsächlich treten die meisten Probleme mit JavaScript und SEO durch fehlerhafte Implementierungen auf. Viele gängige SEO-Best-Practices lassen sich deshalb ebenso auf JavaScript SEO anwenden. John Müller hat in einem Google+-Post ebenfalls einige Hinweise gegeben, worauf Webmaster bei der Verwendung von JS und AJAX achten sollten.

1. Indexierbare URLs: Jede Webseite benötigt einzigartige und unterscheidbare URLs damit die Seiten überhaupt indexiert werden. Ein pushState, wie er bei JavaScript ausgeführt wird, erzeugt jedoch noch keine URL. Deshalb benötigt Deine JavaScript-Seite auch ein eigenes Webdokument, das einen Statuscode 200 OK als Serverantwort auf eine Client- oder Botanfrage ausgeben kann. Jedes mit JS dargestellte Produkte oder jede mit JS realisierte Kategorie auf Deiner Webseite muss deshalb mit einer serverseitigen URL ausgestattet sein, damit Deine Seite indexiert werden kann.

2. pushState-Fehler: Mit der pushState-Methode kann JavaScript URLs verändern. Dabei sollte unbedingt beachtet werden, dass die Original URL mit serverseitiger Unterstützung weitergegeben wird. Sonst riskierst Du doppelte Inhalte.

3. Fehlende Meta-Daten: Mit dem Einsatz von JavaScript vergessen viele Webmaster oder SEOs die Basics und übergeben keine Meta-Daten an den Bot. Es gelten jedoch die gleichen SEO-Standards für gerenderter JavaScript-Inhalte wie für HTML-Seiten. Denke deshalb an Title, Meta-Description oder ALT-Tags bei Bildern.

4. a href und img src: Damit der Googlebot weitere Seiten finden kann, benötigt er Links, welchen er folgen kann. Deshalb solltest Du in Deinen JS-Dokumenten auch links mit href- oder src-Attributen versehen.

5. Einheitliche Versionen schaffen: Durch das Rendering von JavaScript entstehen preDOM- und postDOM-Versionen. Achte darauf, dass möglichst keine Widersprüche auftreten und zum Beispiel canonical-Tags oder Paginierungen korrekt interpretiert werden. So vermeidest Du Cloaking.

6. Zugang für alle Bots schaffen: Nicht alle Bots können wie der Googlebot mit JavaScript umgehen. Empfehlenswert ist es deshalb Title, Meta-Angaben sowie Social Tags in den HTML-Code zu setzen.

7. Kein JS über robots.txt sperren: Achte darauf, dass Dein JavaScript auch vom Googlebot gecrawlt werden darf. Hierfür dürfen die Verzeichnisse nicht in der robots.txt ausgeschlossen werden.

8. Aktuelle XML-Sitemap verwenden: Um Google mögliche Veränderungen an JS-Inhalten zu zeigen, solltest Du in der XML-Sitemap das Attribut "lastmod" immer aktuell halten.

JS-Webseiten prüfen: So gehst Du beim Audit vor

Wenn es um ein Audit einer JS-Webseite geht, handelt es sich überwiegend um eine manuelle Überprüfung einzelner Elemente. Gängige SEO-Tools beherrschen die Analyse von JavaScript (noch) nicht.

Um JavaScript zu prüfen, kannst du die Google Developer Tools von Google Chrome sowie die Web Developer Erweiterung für Chrome verwenden.

1. Sichtkontrolle

Um ein Gespür dafür zu bekommen, wie ein Besucher die Webseite sieht, solltest Du den Content auf der Webseite einteilen in:

• Sichtbare Inhalte auf der Seite

• Content, der eine Interaktion benötigt

• Versteckte Inhalte

• Inhalte, die von Drittanbietern stammen wie Bewertungen

• Inhalte, die Produktempfehlungen beinhalten

Auf diese Weise kannst Du schon eine Vorauswahl an Elementen treffen, die mit JavaScript realisiert sein könnten. Die Prüfung der JavaScript-Elemente sollte zum Ziel haben, dass diese Elemente auch crawlbar sind.

2. HTML-Code prüfen

Mit den Webdeveloper Tools kannst Du CSS, JavaScript und Cookies ausschalten. Im übrig gebliebenen Code kannst Du anschließend sehen, was auf der Seite fehlt. Diese Elemente werden über JavaScript gesteuert.

Danach kannst Du Meta-Elemente wie Title und Description der Webseite kontrollieren. Damit Bots diese Elemente indexieren können, müssen sie über den Load Event erreichbar sein. In der Regel kann jedoch aktuell nur Google dann diese Elemente auslesen. Es ist deshalb empfehlenswert, auch bei JS-Seiten Title und Meta-Tags in den HTML-Code zu schreiben.

3. Gerendertes HTML prüfen

Lade die Seite mit deaktiviertem JavaScript und CSS neu. Klicke anschließend mit Rechtsklick auf die Seite und wähle im Menü von Chrome "Element untersuchen" aus. Auf der rechten Seite erscheint dann ein eigenes Fenster. Klicke den HTML-Tag an. Mit Rechtsklick erscheint ein Auswahlmenü. Wähle hier "äußeres HTML kopieren". Füge den Code anschließend in einen Editor. Dieser Code kann letztlich von Suchmaschinen wie Google indexiert werden.

Eine weitere Möglichkeit, um Deine JS-Seiten zu testen, bietet die alte Version der Google Search Console. Im neuen Interface der Google Search Console gibt es bis dato (Stand: 02/2019) noch keine entsprechende Funktion. Voraussetzung für die Kontrolle Deiner Webseite ist, dass die Domain in der Search Console hinterlegt und bestätigt wurde. Klicke in der Search Console zunächst auf "Crawling" und danach auf "Abruf wie durch Google". Füge anschließend das Verzeichnis ein, das bearbeitet werden soll und klicke auf "Abrufen und Rendern".

Google zeigt Dir dann mögliche Probleme beim Rendern Deiner Seite an und gibt Hinweise auf fehlende oder vom Crawling gesperrte JavaScript-Elemente.

Abbildung 1: JS-Seiten in der Google Search Console testen.

Darauf solltest Du außerdem achten

• indexierbare URLs: Damit eine Webseite überhaupt indexiert werden und ranken kann, benötigt sie eine indexierbare URL. Wenn Deine Webseite JavaScript-Versionen verwendet, die nicht über eine eigene URL abgerufen werden können, ist es für Suchmaschinen nicht möglich, diese Seite zu indexieren. Existiert eine URL, wird sie jedoch nicht im JS-Code verlinkt, kann die Seite ebenfalls nicht ranken.

• pushState: Wenn beim pushState eine falsche URL produziert wird, kann Duplicate Content entstehen. Prüfe deshalb insbesondere interne Links, die mit JavaScript erzeugt werden.

• Data Attribute: Auf JS-Seiten können weitere Ressourcen wie Bilder in Data Attributen hinterlegt werden. Allerdings können diese Ressourcen in der Regel nicht von Bots geladen, gerendert und indexiert werden. Empfehlenswert ist es darum, Ressourcen wir Bilder traditionell über HTML einzubinden.

Praktische Tools, die helfen eine JS-Seite crawlbar zu machen

Es gibt verschiedene Tools, die Du beim Bearbeiten oder Erstellen von JavaScript-Inhalten einsetzen kannst.

1. prerender.io: Bei prerender.io handelt es sich um eine Open-Source-Software, die das Rendern einer JS-Seite optimiert. Dabei wird die Seite nach Rendern gecacht und kann beim Zugriff durch Bots schneller ausgegeben werden.

2. Brombone: Das Programm lädt Deine Webseiten herunter und rendert sie in einem Webbrowser. Auf diese Weise kannst Du prüfen ob AJAX-Abrufe und JavaScript korrekt funktionieren. Ebenso lassen sich damit DOM-Änderungen testen. Wenn das Rendering funktioniert, lassen sich diese Seiten als HTML speichern. Greift ein Crawler auf Deine Seite zu, kannst Du die gerenderten JS-Seiten über einen Proxy von Brombone ausgeben lassen. Um das Tool korrekt einzusetzen, benötigst Du außerdem eine XML-Sitemap.

3. ANGULAR JS: Mit Angular JS können HTML-Snapshots pre-gerendert werden, damit der Googlebot JS-Seiten schneller erfassen und indexieren kann.

4. SEO.JS: Mit diesem Programm wird der JS-Code ebenfalls als HTML gerendert und für Google crawlbar gemacht. Der Code des Programms wird hierfür auf Deinen Server übertragen. Ein eigenes Dashboard hilft Dir anschließend, Deine JS-Elemente und –Seiten zu verwalten, die gerendert werden müssen. Das Tool erstellt außerdem eine XML-Sitemap mit Deinen JS-Seiten.

5. Google Search Console: Google hilft Dir mit der alten Version der Search Console dabei, JS-Elemente zu prüfen, indem Du einzelne Seiten renderst. Das Tool zeigt Dir anschließend mögliche Crawling-Probleme an.

6. Isomorphes JavaScript: Mit isomorphem JavaScript können Anwendungen Server- und Client-seitig ausgeführt werden. Backend und Frontend teilen dabei den gleichen Code. Durch das ausbleibende Rendern ist JavaScript im Hinblick auf SEO weniger fehleranfällig.

Fazit

JavaScript kann die Funktionalität Deiner Webseite enorm erweitern. Damit der Googlebot und andere Suchmaschinen JavaScript auch tatsächlich rendern können, müssen einige Stellschrauben beachtet werden, die Du in diesem Artikel gefunden hast. Vor dem Hintergrund von AMP oder Progressive Web Apps solltest Du Dich jedoch immer fragen, ob eventuell der Ansatz des Progressive Enhancements sinnvoller ist als die Entwicklung kompletter JavaScript-Seiten. Da jedoch davon auszugehen ist, dass JavaScript auf Websites immer vielseitiger eingesetzt wird und Google immer besser darin wird, diesen Content zu rendern und indexieren, solltest Du Dich mit den Vor- und Nachteilen von JavaScript vor allem im Segement Technical SEO stärker beschäftigen.