So wird JavaScript SEO-freundlich

JavaScripts bieten viele Vorteile für die Web-Programmierung. Die Bedienbarkeit gestaltet sich interaktiver und auch Pagespeed und User Experience profitieren wesentlich von JS. Aus SEO Perspektive bietet sich aber ein anderes Bild: Der Googlebot weist bei JavaScript immer noch Interpretations-Schwierigkeiten auf. Mithilfe von gezielten Optimierungsmaßnahmen lassen sich böse Überraschungen bezüglich Technisches SEO vermeiden. Hier haben wir uns ausführlich mit dem Thema SEO-freundliches JavaScript auseinandergesetzt und warum die richtige Server Konfiguration und Website Rendering Methode entscheidend für die SEO Performance ist.

Was ist JavaScript?

Bei JavaScript handelt es sich um weit verbreitete Programmiersprache. Entwickelt wurde die Programmiersprache von der Firma Netscape und zuerst noch den Namen LiveScript. Erst später erfolgte die Umbenennung in JavaScript. Ursprünglich konzentrierte sich die Programmiersprache JavaScript auf das Einbinden von dynamischem HTML-Elementen(Pop-up-Fenster, aufklappbare Menüs etc.) in Webbrowsern. Heute kommt JS auch auf Servern oder zum Beispiel in Mikrocontrollern zum Einsatz.

Zudem erlaubt es JavaScript, Benutzereingaben zu verarbeiten, Benutzerinteraktionen auszuwerten und Inhalte zu generieren sowie zu verändern. Im Rahmen des jeweiligen Anwendungsszenarios ist es mithilfe der Programmiersprache möglich, unlogische oder fehlerhafte Eingaben zu identifizieren. Dabei fungiert HTML als stabiles Grundgerüst. Vom grundsätzlichen Aufbau her sorgt die Beschreibungssprache HTML beim Aufbau von Webseiten dabei für ein stabiles Grundgerüst. Hier werden alle relevanten Inhalte, wie Überschriftenstrukturen, Meta Daten und weiter SEO-relevante Informationen hinterlegt. Formatierungen erfolgen immer mittels der Stylesheet-Sprache CSS – für den Suchmaschinen-Bot von weniger Belang. Die Übersetzung in Maschinensprache ist dabei nicht notwendig.

Stattdessen erfolgt die Interpretation der Webseiten-Texterespektive die Ausführung durch den Browser oder alternativ durch Server. Alsgroßer Vorteil der Programmiersprache JavaScript gilt die vergleichsweiseeinfache Handhabung. So funktioniert JS plattformübergreifend, ohne dassInterpreter-Software, Laufzeitumgebungen oder zusätzliche Server-Module für dieAusführung von Skripten installiert werden müssen. Das ist zum Beispiel beiPython und PHP der Fall.

 Wie crawlt Google JavaScript?

Um aber eine JS-Website für Internet-User überhaupt sichtbar zu machen und in den Rankings der Suchmaschinen zu positionieren, ist ein aufwendiger und vor allem ressourcenintensiver Prozess notwendig. Das Crawlen, das Website-Rendering und das Indexieren von JS-Inhalten stellt für Suchmaschinendabei eine echte Herausforderung mit unterschiedlichen Hindernissen dar.

Gerade Google hat dabei zwar die Fähigkeit seines Bots im Laufe der Zeit verbessert, JS zu rendern und entsprechende Inhalte einzubeziehen, dennoch gibt es nach wie vor Fehlerquellen. Dies liegt nicht zuletzt an der ganzheitlichen Prozesskomplexität beim Crawlen und Indexieren seitens der Suchmaschinen. Das wird besonders deutlich beim Vergleich mit dem Crawling von Html-Inhalten.

Die folgende Gegenüberstellung zeigt auf, dass der Aufwand sowohl beim Rendern von JS als auch beim Crawlen von JavaScript-Inhalten im Vergleich zu Html-Content weitaus höher ist.

- - - - -

Prozessablauf beim Crawlen von Html-Inhalten in vereinfachter Darstellung‍

• Download der HTML-Dateien
• Entnahme der Links aus dem Quellcode zwecks Crawling
• Download der erforderlichen CSS-Dateien.
• Übermittlung der Ressourcen vom Crawler (Googlebot) zumIndexer (Caffeine bei Google)
• Übernahme aller weiteren Arbeitsabläufe durch den Indexer

- - - - -

Prozessablauf beim Crawlen von JS-Inhalten in vereinfachter Darstellung‍

• Download aller HTML-Dateien
• Paralleles Herunterladen der jeweiligen CSS- und JavaScript-Daten
• Nutzen von WRS (Web Rendering Service) zwecks Ausführung von JavaScript
• Website Rendering aller Daten durch WRS
• Indexierung der Inhalte durch Caffeine
• Crawling neuer Links durch den Googlebot

- - - - -

Effektive Crawler-Steuerung als Grundlage für die Indexierung

Die Crawlbarkeit einer Seite stellt einen Grundbaustein für eine effiziente SEO dar. Ein Webmaster besitzt hier die Möglichkeit, das Crawling aktiv zu steuern und zu beeinflussen. Das funktioniert auf vielfältige Art und Weise. Bewährt haben sich dabei zum Beispiel diese vier Maßnahmen:

• Crawling-Anweisungen durch die robots.txt(Verweis auf die Adressen von XML-Sitemaps geben, Ausschließen einzelner Crawler von Verzeichnissen oder ganzen Seiten)
• Crawling-Steuerung über die Search Console(beispielsweise Reduktion der Crawling-Frequenz und Ausschließen von URL-Parametern)
• Indexierung steuern mithilfe von Canonicals(praktisch für beispielsweise Online-Shops, die durch Filterfunktionen Kategorieseiten mit Duplicate Content hervorrufen)
• Indexierung untersagen mit dem Meta-Tag "noindex" (besonders nützlich für URLs mit Parametern durch Filterfunktionen, paginierte Seiten und Suchergebnisseiten)

Was ist JavaScript SEO?

Trotz dieser vielen Vorteile bei der Programmierung von Webseiten mit JavaScript können Probleme im Hinblick auf die Ladezeit und die Performance einer Webseite sowie beim Crawlen und Indexieren der Website-Inhalte auftreten.

Die suchmaschinenfreundliche Aufbereitung eines mit JS generierten Contents ist hierbei ein Schlüsselfaktor, der JavaScripts SEO-freundlich gestaltet. In diesem Fall spricht man auch von JavaScript SEO. Hier sind fünf Optimierungsmaßnahmen, die zu JavaScript SEO gehören, zusammen mit den entsprechenden Problemen und Lösungsansätzen:

• Herausforderung: Inhaltsindexierung

Lösungsansatz: Stellen Sie sicher, dass wichtige Inhalte serverseitig gerendert werden (Server-Side Rendering, SSR) oder verwenden Siestatische Rendering-Techniken (Static Site Generation, SSG). Diese Ansätze ermöglichen es Suchmaschinen, den Inhalt zu sehen, ohne auf das Rendern von JavaScript angewiesen zu sein.

• Herausforderung: Crawler-Budget

Lösungsansatz: Minimieren Sie die Anzahl der JavaScript-Dateien und deren Größe, um die Ladezeit zu verkürzen und den Aufwand für das Crawlen zu reduzieren. Verwenden Sie Code-Splitting und Lazy-Loading, um nur die notwendigen JavaScript-Dateien bei Bedarf zu laden.

• Herausforderung: Linkstruktur

Lösungsansatz: Verwenden Sie HTML-basierte Links anstelle von JavaScript-generierten Links. Stellen Sie sicher, dass wichtige Navigationselemente und interne Links in einer für Suchmaschinen leichtzugänglichen Form vorliegen, sodass alle relevanten Seiten gecrawlt werden können.

• Herausforderung: Ladegeschwindigkeit

Lösungsansatz: Optimieren Sie Ihre JavaScript-Dateien durch Minifizierung und Komprimierung. Reduzieren Sie unnötige JavaScript-Bibliotheken und Skripte. Verwenden Sie asynchrone oder verzögerte JavaScript-Ausführung, um die initiale Ladezeit der Seite zu verbessern.

• Problem: Dynamische Inhalte

Lösungsansatz: Implementieren Sie das Dynamic Rendering, beidem der Server zwischen den Crawlern und normalen Nutzern unterscheidet. Suchmaschinen-Bots erhalten eine vollständig gerenderte HTML-Version der Seite, während normale Nutzer die JavaScript-basierte Version sehen. Dies stellt sicher, dass dynamische Inhalte korrekt indexiert werden können.

Wie wird JavaScript SEO-freundlich in die Websitestruktur eingefügt?

Um ein erfolgreiches und konsistentes Crawlen, Indexieren und Rendern zu gewährleisten, sollte dem Googlebot ein vollständig gerendeter HTML-Code angezeigt werden. Empfehlenswert sind diesbezüglich Optionen wie das dynamische Rendering und ein serverseitiges Rendering in Kombination mit Caching.. Dadurch lässt sich sicherstellen, dass Google alle dynamischen Inhalte identifiziert und entsprechend indexiert. Beim serverseitigen Rendering bekommt der Googlebot die gerenderten Inhalte in fertiger Form direkt aus dem Cache.

Auch diese Optimierungsmaßnahmen sind empfehlenswert:

• Langlebiges Caching verwenden
• Aussagekräftige HTTP-Statuscodes verwenden
• History API anstelle von Fragmenten einsetzen
• HTML-Element mit einem href-Attribut bei Linksnutzen
• Statische URLs verwenden und auf # verzichten
• JS-Ressourcen minimieren oder kritischeJS-Ressourcen zurückstellen
• Seiten mit aussagekräftigen Titeln und Snippetsbeschreiben
• Fehler auf Seiten mit einem 404-Statuscodeumleiten

Ein SEO Onsite Audit ist unerlässlich, um die Auswirkungen von JavaScript auf die SEO-Performance zu erkennen. Dabei überprüfen wir als SEO Agentur, ob JavaScript-Inhalte von Suchmaschinen indexiert werden, indem Sie die gerenderte HTML-Version analysieren und Tools wie Google Search Console und SEO-Crawler verwenden. Wir testen die Seitengeschwindigkeit und prüfen die Sichtbarkeit interner Links. Dank dieser Tiefenanalyse identifizieren wir problematische JavaScripts und konzipieren eine sinnvolle SEO Optimierung; individuell für jede Website.  

Autor: f.baer