Server-Side-Rendering: Die Lösung für alle Probleme bei JavaScript SEO?

Beitrag aus Ausgabe 80 / Oktober 2019
Artur Kosch

ist SEO-Experte und geschäftsführender Gesellschafter der Search-Marketing-Agentur Kosch Klink Performance. Regelmäßig schreibt er Fachartikel und hält Vorträge auf Konferenzen zum Thema 
Online-Marketing und SEO.

Wer als SEO-Verantwortlicher in Hinsicht auf Rich-JavaScript-Websites auf Nummer sicher gehen möchte, sollte Server-Side-Rendering in Betracht ziehen. In diesem Beitrag werden die wichtigsten Aspekte für den Einsatz erläutert.

JavaScript bringt heutzutage immer noch einige Herausforderungen mit sich, die es SEO-Verantwortlichen erschweren, eine saubere und schnelle Indexierung benötigter Inhalte zu gewährleisten. Um sich der Risiken bewusst zu werden, die auf einen zukommen, wenn man eine Rich-JavaScript-Website ohne Server-Side-Rendering optimieren möchte, sollte man alle möglichen Problematiken kennen.

Wie wird JavaScript ausgeführt?

Zu Beginn eine wichtige Grundlage, wieso JavaScript im Gegensatz zu herkömmlichem HTML problematisch ist. JavaScript wird nicht vom Server, sondern vom Browser (Client) ausgeführt. Ein vereinfachter Ablauf wird im Folgenden erläutert und ist in Abbildung 1 grafisch dargestellt:

  1. Der Browser stellt eine GET-Anfrage an den Server.
  2. Der Server führt das PHP-Script aus (z. B. beim Einsatz eines CMS).
  3. Der Server gibt den HTML-Quellcode an den Browser zurück.
  4. Der Browser führt das JavaScript aus.

Bei einer Webseite ohne Einsatz von JavaScript liegt bereits nach Punkt 3 der Inhalt einer Webseite dem Browser oder einem Crawler vor. JavaScript-Code wird erst in Punkt 4 vom Browser selbst ausgeführt.

Genau hier liegt das große Problem. Damit ein Crawler Inhalte, die durch JavaScript ausgeführt werden, erfassen kann, muss dieser die Arbeit eines Browsers übernehmen, inklusive aller nötigen Technologien und Ressourcen wie z. B. einer Rendering Engine.

Wie gehen Crawler mit JavaScript um?

Der Crawler von Google (Googlebot) verfügt über eine eigene Rendering Engine (Web Rendering Service), welche auf Google Chrome basiert. Damit ist Google in der Lage, JavaScript auszuführen und Inhalte, die durch JavaScript erzeugt werden, auch zu erfassen. Seit Mai 2019 läuft der Googlebot auch als „Evergreen“. Das bedeutet, dass der Googlebot sich an die neuesten Features und Funktionen der aktuellen Version des Chrome-Browsers anpasst. Dadurch können seit Mai 2019 alle Features und Funktionen, die Google Chrome unterstützt, genutzt werden, um SEO-relevante Inhalte zu erzeugen.

Obwohl Google seine Hausaufgaben in Hinsicht auf JavaScript recht ordentlich gemacht hat, gibt es genügend Negativbeispiele, die verdeutlichen, dass das Thema „JavaScript und SEO“ oft nicht zu funktionieren scheint. Dies liegt nicht unbedingt an Google, sondern an der zunehmenden Komplexität, die JavaScript im Bereich SEO verursacht.

Wie sieht es aber mit anderen Crawlern aus, wie z. B. der Konkurrenz wie Microsoft Bing? Der Crawler von Bing (Bingbot) verfügt über keinerlei Rendering Engine und ist damit nicht in der Lage, Inhalte zu erkennen, die von JavaScript erzeugt werden. Dies gilt auch für die Crawler von Yahoo, Yandex, Baidu und DuckDuckGO. Auch diese Crawler sind blind, wenn es um das Thema JavaScript geht.

Viel interessanter ist zudem die Tatsache, dass die Crawler der großen Social-Media-Konzerne wie Facebook (einschließlich Instagram und WhatsApp), Twitter, LinkedIn, Xing und Co. ebenfalls über keinerlei Rendering Engine verfügen. Wer einen Link einer Rich-JavaScript-Website in den sozialen Netzwerken teilt, wird erkennen, dass keine Vorschau erzeugt wird, da der Crawler weder den Title Tag noch die Meta Description geschweige denn die Open-Graph- oder Twitter-Card-Informationen entnehmen kann. Das stellt für Unternehmen, die einen großen Wert auf Social Media legen, ein Problem dar.

Des Weiteren benötigen Tools, die Webseiten für Analysen oder andere Zwecke crawlen müssen, ebenfalls eine Rendering Engine, um Ergebnisse auswerten zu können. Wenn man also nicht nur auf Google setzen möchte und andere Suchmaschinen ebenfalls berücksichtigt, wenn Social Media einen wichtigen Stellenwert haben oder Tools im Einsatz sind, die die eigene Webseite crawlen müssen, kommt man an dem Thema Server-Side-Rendering nicht vorbei.

Wie funktioniert Server-Side-Rendering?

Server-Side-Rendering bei JavaScript (Prerendering, siehe Abbildung 2) führt dazu, dass JavaScript bereits vom Server vorgerendert und im Cache gespeichert wird. Bei einer Anfrage an den Server wird geschaut, welcher User-Agent hinter einer Anfrage steckt. Wenn es sich hier um einen Bot wie z. B. den Googlebot oder Bingbot handelt, wird diesem der bereits zwischengespeicherte, also gerenderte HTML-Code zur Verfügung gestellt. Damit erspart sich der Crawler das Rendern von JavaScript bzw. ermöglicht es Crawlern, die nicht in der Lage sind, JavaScript auszuführen, die Inhalte der Webseite zu erfassen. Dem gewöhnlichen Webseitenbesucher wird weiterhin die Client-Side-Rendering-Version der Webseite dargestellt. Damit profitiert der Webseitenbesucher weiterhin von allen implementierten Vorteilen von JavaScript.

Google selbst empfiehlt Server-Side-Rendering (Dynamic Rendering)

Google selbst rät in den meisten Fällen zu Server-Side-Rendering für JavaScript. Der Suchmaschinenkonzern nutzt hierfür den Namen „Dynamic Rendering“ (siehe Abbildung 3), was nichts anderes ist als das hier angesprochene Server-Side-Rendering, also eine Lösung, in der JavaScript bereits vom Server gerendert und Crawlern zur Verfügung gestellt wird. Google gibt zusätzlich noch den Tipp, dass für das Rendern ein separater Server genutzt werden soll, da das Rendern die Server zu sehr belasten könne. Dynamic Rendering wurde zum ersten Mal auf der Google I/O 2018 präsentiert.

Einsatz von Server-Side-Rendering bei YouTube

Interessant zu beobachten ist, dass Google für seine hauseigene Videoplattform YouTube selbst Prerendering einsetzt. Dies lässt sich mit dem Google Chrome Browser und einem kostenlosen Add-on wie z. B. „UserAgent-Switcher“ einfach testen.

Mit dem Standard User-Agent von Chrome und aktiviertem JavaScript lädt die Webseite wie gewohnt. Sobald JavaScript im Browser deaktiviert wird, sind keine Inhalte mehr zu sehen, da bei YouTube alle Videos über JavaScript erzeugt werden. Sobald der User-Agent mit dem Chrome-Add-on zusätzlich auf „Googlebot“ gestellt wird, wird die vorgerenderte Version der Webseite dargestellt. Die wichtigsten Inhalte, auch wenn in einer etwas anderen Darstellung, werden nun angezeigt. Dieser Test ist in Abbildung 4 zu sehen. Mit dieser Methodik lassen sich auch alle anderen Websites testen, ob Server-Side-Rendering im Einsatz ist und die Implementierung auch funktioniert.

Es wird also deutlich, dass Google dem Crawler eine gesonderte Version zur Verfügung stellt, ohne JavaScript rendern zu müssen. Bei dem täglichen Neuaufkommen an Videos und der Bedeutung von Social Media für die Videoplattform eine verständliche Maßnahme seitens Google.

Was sollten SEOs bei Server-Side-Rendering beachten?

Da es sich bei Server-Side-Rendering um ein recht technisches Thema handelt, sollte gewährleistet werden, dass der Verantwortliche über das benötigte Know-how verfügt, um solch eine Lösung zu implementieren. Hierbei spielt auch das eingesetzte JavaScript-Framework eine große Rolle. Einige Frameworks wie z. B. AngularJS eignen sich relativ gut für Server-Side-Rendering, einige andere wiederum eher weniger.

Vor allem die Aktualität des Caches, also der vorgerenderten Version der Webseite, sollte beachtet werden. Im Optimalfall sollte eine URL, die angepasst wurde, im selben Zuge erneut gerendert werden und in der vorgerenderten Version landen, damit Crawler immer auf die neueste Version zugreifen können. Bei sehr großen Websites ist auch ein Zeitplan sinnvoll, wann der Cache erneuert werden soll.

Auf die Frage, ob beim Einsatz von Prerendering auf eigene Lösungen oder kostenpflichtige Dienste gesetzt werden sollte, gibt es keine eindeutige Antwort und sollte selbst abgewogen werden. Besonders der Faktor „Kosten und Aufwand“ spielt hier eine große Rolle.

Google selbst empfiehlt beim Einsatz von externen Diensten „Prerender.io“ und als eigene Lösung „Renderton“ oder „Puppeteer“. Des Weiteren wäre unabhängig von Googles Empfehlungen noch „Phantom.js“ zu berücksichtigen.

Fazit

Wer als SEO-Verantwortlicher mit einer Rich-JavaScript-Website in Sachen Crawling, Rendering und Indexierung nicht im Blindflug unterwegs sein, die erhöhte Komplexität durch JavaScript verringern, andere Suchmaschinen nicht komplett ignorieren und dem Thema Social Media einen hohen Stellenwert einräumen möchte, der kommt an dem Thema Server-Side-Rendering nicht vorbei. Wie bei allen Maßnahmen im SEO entscheidet letztendlich der Kosten-Nutzen-Faktor über die Risikobereitschaft.

Spannend? Dieser Artikel ist im suchradar #80 erschienen

Lesen Sie weitere spannende Artikel aus der Ausgabe „JavaScript: Der Code-Baukasten für SEO, SEA & Co.“! Entweder online oder als PDF-Magazin.

Kostenlos als PDF-Version Alle Artikel aus der Ausgabe ansehen