Wie Sie mit Dynamic Rendering und SEO erfolgreich sind

- • Dynamisches Rendering

JavaScript-Webseiten machen SEO, ein ohnehin schon schwieriges Feld, noch viel komplizierter.

SEO ist eines der technischeren Felder im Bereich des digitalen Marketings. Es ist wie der beliebte Zirkusakt, bei dem der Jongleur drei Teller auf Stangen dreht. Technisches SEO ist wie auf einem Hochseil. JavaScript SEO bedeutet, das Seil, die Teller und sich selbst in Brand zu setzen.

Es ist ein kniffliger Balanceakt. Ihre Website muss nicht nur so formatiert sein, dass sie von den Suchmaschinen leicht verarbeitet werden kann, sondern sie muss auch besser funktionieren und schneller laden als die der Konkurrenz.

Das Schöne an der technischen SEO ist jedoch, dass sie einer der Ranking-Faktoren ist, auf den Sie direkten Einfluss haben.

Wie machen Sie Ihre JavaScript-Website für Google leicht lesbar und verständlich, während Sie Ihren Besuchern gleichzeitig ein gutes Web-Erlebnis bieten?

Die Antwort: Dynamisches Rendering.

Wir erklären Ihnen, was dynamisches Rendering ist, warum es wichtig ist, warum es für die SEO Ihrer Website von Vorteil ist und wie Sie es implementieren.

Google Dynamic Rendering

Was passiert, wenn Google Ihre Webseite besucht

Google verwendet ein automatisiertes Programm, einen so genannten Bot, um jede Webseite im Internet zu indizieren und zu katalogisieren.

Das erklärte Ziel von Google ist es, dem Nutzer das bestmögliche Ergebnis für eine bestimmte Suchanfrage zu liefern. Um dies zu erreichen, versucht es zu verstehen, welche Inhalte sich auf einer bestimmten Webseite befinden, und deren relative Wichtigkeit im Vergleich zu anderen Webseiten zum selben Thema zu bewerten.

Die meisten modernen Webentwicklungen werden mit drei Hauptprogrammiersprachen durchgeführt: HTML, CSS und JavaScript.

Google verarbeitet HTML in zwei Schritten: crawlen und indexieren. Zuerst crawlt der Googlebot das HTML einer Seite. Er liest den Text und die ausgehenden Links auf einer Seite und analysiert die Schlüsselwörter, die ihm helfen zu bestimmen, worum es auf der Webseite geht. Dann indexiert Googlebot die Seite.

Google und andere Suchmaschinen bevorzugen Inhalte, die in statischem HTML gerendert sind.

Bei JavaScript ist dieser Prozess etwas komplizierter. Das Rendering von JavaScript erfolgt in drei Stufen:

  • Kriechen
  • Render
  • Index

Google muss JavaScript mehrfach verarbeiten, damit es den darin enthaltenen Inhalt vollständig verstehen kann. Dieser Vorgang wird als Rendering bezeichnet. Wenn Google auf JavaScript auf einer Webseite stößt, legt es es in eine Warteschlange und kommt darauf zurück, sobald es die Ressourcen zum Rendern hat.

google javascript rendering

Das Problem mit JavaScript-SEO

HTML ist Standard in der Webentwicklung. Suchmaschinen können HTML-basierte Inhalte problemlos darstellen. Im Vergleich dazu ist es für Suchmaschinen schwieriger, Javascript zu verarbeiten. Es ist ressourcenintensiv.

Das bedeutet, dass Webseiten, die auf JavaScript basieren, Ihr Crawl-Budget aufbrauchen. Google gibt an, dass sein Webcrawler JavaScript verarbeiten kann. Dies ist jedoch noch nicht bewiesen. Es erfordert mehr Ressourcen von Google, um Ihre JavaScript-Seiten zu crawlen, zu indizieren und zu rendern. Andere Suchmaschinen wie Bing und DuckDuckGo sind nicht in der Lage, JavaScript überhaupt zu analysieren.

Da Suchmaschinen mehr Ressourcen zum Rendern Ihrer JavaScript-Seiten verwenden müssen, ist es wahrscheinlich, dass viele Elemente Ihrer Seite überhaupt nicht indiziert werden. Google und andere Suchmaschinen könnten z. B. Ihre Metadaten und kanonischen Tags übergehen, die für die Suchmaschinenoptimierung wichtig sind.

Die Sache ist die: Javascript sorgt für ein gutes Benutzererlebnis. Es ist der Grund, warum Sie in der Lage sind, auffällige Websites zu erstellen, die Ihre Benutzer sagen lassen: "Wow, das war so cool!"

Wie können Sie ein modernes Web-Erlebnis schaffen, ohne Ihre SEO zu opfern?

Die meisten Entwickler erreichen dies mit Server-seitigem Rendering.

Dynamisches Rendering vs. Server-seitiges Rendering

Was ist der Unterschied zwischen Client-seitigem und Server-seitigem Rendering?

Die meisten JavaScript-Frameworks wie Angular, Vue und React verwenden standardmäßig das clientseitige Rendering. Sie warten damit, den Inhalt Ihrer Webseite vollständig zu laden, bis sie dies im Browser auf der Seite des Nutzers tun können. Mit anderen Worten: Sie rendern den Inhalt für Menschen und nicht auf dem Server, damit Suchmaschinen ihn sehen können.

Client-seitiges Rendering ist günstiger als andere Alternativen. Außerdem entlastet es Ihre Server, ohne Ihren Entwicklern mehr Arbeit zu machen.

Allerdings birgt es die Gefahr einer schlechten Benutzererfahrung. Zum Beispiel verlängert es die Ladezeit Ihrer Webseiten um Sekunden, was zu einer hohen Absprungrate führen kann.

Client-seitiges Rendering wirkt sich auch auf Bots aus. Googlebot verwendet ein Zwei-Wellen-Indizierungssystem. Er crawlt und indiziert zuerst das statische HTML und crawlt dann den JavaScript-Inhalt, sobald er die Ressourcen dazu hat. Das bedeutet, dass Ihr JavaScript-Inhalt bei der Indizierung möglicherweise übersehen wird.

Das ist schlecht. Sie müssen Google diesen Inhalt zeigen, wenn Sie höher ranken wollen als Ihre Konkurrenten und von Ihren Kunden gefunden werden wollen.

Was ist also die Alternative? Für die meisten Entwicklerteams ist es das serverseitige Rendering: die Konfiguration Ihres JavaScript, so dass der Inhalt auf dem eigenen Server Ihrer Website gerendert wird und nicht im Browser auf der Client-Seite.

Dadurch wird Ihr JavaScript-Inhalt im Voraus gerendert, wodurch er für Bots lesbar wird. SSR hat auch Leistungsvorteile. Sowohl Bots als auch Menschen erhalten schnellere Ergebnisse, und es besteht kein Risiko einer teilweisen Indizierung oder fehlender Inhalte.

Herausforderungen des Server-seitigen Renderings

Warum nutzt nicht jeder das serverseitige Rendering?

Wenn serverseitiges Rendering einfach wäre, dann würde es jede Website tun und JavaScript-SEO wäre kein Problem. Aber, Server-seitiges Rendering ist nicht einfach.

SSR ist teuer, zeitaufwändig und schwierig auszuführen. Sie benötigen ein kompetentes Web-Entwicklungsteam, um es zu realisieren.

Es neigt auch dazu, nicht mit JavaScript von Drittanbietern zu arbeiten. Websites, die serverseitiges Rendering verwenden, benötigen oft externe JavaScript-Bibliotheken oder Plugins, die schwer zu konfigurieren sind.

Dies ist bei Angular der Fall, das die Angular Universal Library benötigt, um das serverseitige Rendering zu aktivieren. Das Aktivieren von SSR mit Angular erfordert eine Menge beweglicher Teile. Wenn auch nur ein Teil nicht an der richtigen Stelle sitzt, könnte dies Web-Crawler verwirren und zu einem Abfall in Ihren Suchergebnissen führen.

React hingegen nutzt die Next.JS-Bibliothek, um das serverseitige Rendering zu ermöglichen. Das bedeutet, dass Ihr Entwicklungsteam einen zusätzlichen Server mit zusätzlichen Kosten unterhalten muss.

Wie machen Sie also Frameworks wie React SEO-freundlich, um IhreKunden und Suchmaschinen zufriedenzustellen? Die Lösung ist dynamisches Rendering. 

was ist dynamisches Rendering

Was ist Dynamic Rendering?

Dynamisches Rendering ist der Prozess der Bereitstellung von Inhalten auf der Grundlage des anfordernden Benutzeragenten.

Im Wesentlichen ist es eine Hybridlösung, die das Beste aus beiden Welten bietet. Sie bietet statisches HTML für Bots und dynamisches JavaScript für Benutzer. Bots erhalten eine maschinenlesbare, abgespeckte Version Ihrer Webseite, die nur aus Text und Links besteht und für sie einfach zu scannen und zu analysieren ist. Es bietet Ihren menschlichen Nutzern ein vollständig gerendertes, vollständig optimiertes, beabsichtigtes Web-Erlebnis, das sie dazu bringt, länger mit Ihrer Website zu interagieren.

Wie implementieren Sie dynamisches Rendering?

Die Implementierung des dynamischen Renderings ist ein dreistufiger Prozess.

Zuerst installieren Sie einen dynamischen Renderer (sagen wir Prerender), um Ihre dynamischen Inhalte in statisches HTML umzuwandeln.

Zweitens wählen Sie die Benutzer-Agenten aus, die Ihrer Meinung nach statische Inhalte erhalten sollen. In den meisten Fällen gehören dazu Suchmaschinen-Crawler wie Googlebot und Bingbot. Es kann sein, dass Sie auch andere, wie z. B. LinkedInbot, einbeziehen möchten. 

Wenn Ihr Prerendering-Dienst Ihren Server verlangsamt oder Ihre HTTP-Anfragen zunehmen, sollten Sie die Implementierung eines Cache zum Speichern von Inhalten in Betracht ziehen. Bestimmen Sie als nächstes, ob Ihre Benutzer-Agenten einen Desktop- oder einen mobilen Inhalt benötigen. Sie können dynamisches Serving verwenden, um ihnen die passende Lösung zu bieten.

Schließlich konfigurieren Sie Ihre Server so, dass sie statisches HTML ausliefern.

Überprüfen Ihrer Konfiguration

Jetzt müssen Sie sicherstellen, dass das dynamische Rendering richtig funktioniert. Hier sind ein paar Dinge zu überprüfen:

Mobile-Friendly-Test: Dies ist eine Funktion der Google Search ConsoleSuite von Tools. Google hat im September 2020 die Umstellung auf Mobile-First-Indizierung für alle Websites vorgenommen. Mit anderen Worten, Google betrachtet die mobile Version Ihrer Website vor der Desktop-Version. Daher ist es wichtig, dass Ihre Website für ein Mobile-First-Erlebnis optimiert ist.

URL-Inspektions-Tool: Sie müssen sicherstellen, dass Ihre Website richtig gecrawlt und indiziert wird. Das URL-Inspektions-Tool wird genau das tun.

Fetch as Google: Dies ist das, was Sie verwenden werden, um die Effektivität Ihres dynamischen Renderers zu bestimmen. Damit können Sie sicherstellen, dass einzelne URLs korrekt zur Indizierung eingereicht werden.

Werkzeug zum Testen strukturierter Daten: Wenn Sie Schema-Markup in Ihrer Website verwenden, dann sollten Sie dieses Tool nutzen. Es stellt sicher, dass Ihr dynamischer Renderer nicht mit Schema-Markup interferiert.

Wann sollten Sie dynamisches Rendering verwenden?

Dynamisches Rendering ist ein idealer Weg, um Ihre JavaScript-SEO-Probleme zu lösen. Wirklich, einer der größten Vorteile des dynamischen Renderings ist, dass es alle Probleme in Bezug auf Ihr Crawl-Budget beseitigt und gleichzeitig kostengünstig ist. Und es erfordert keine fortgeschrittenen technischen Kenntnisse zur Implementierung.

Wann sollten Sie also dynamisches Rendering verwenden?

Dynamisches Rendering ist eine gute Lösung, wenn Sie eine große Website mit vielen Inhalten haben, die sich häufig ändern (z. B. ein E-Commerce-Shop mit wechselndem Bestand). Wenn das der Fall ist, dann benötigt Ihre Website eine schnelle und häufige Indizierung. Dynamisches Rendering sorgt dafür, dass alle Ihre Seiten indiziert und in den SERPs korrekt angezeigt werden.

Es ist auch vorteilhaft für Websites, die auf Social Media Sharing angewiesen sind, wie z.B. solche mit einbettbaren Social Media Walls oder Widgets. 

Wird das dynamische Rendering getarnt?

Cloaking ist die Praxis, deutlich unterschiedliche Inhalte für Suchmaschinen-Bots und Menschen anzubieten. Dies wird als eine Black-Hat-SEO-Taktik betrachtet. Während die kurzfristigen Vorteile des Cloaking verlockend sein mögen, sind die potenziellen Risiken es nicht wert.

Dynamisches Rendering ist kein Cloaking, solange es sowohl Crawlern als auch menschlichen Nutzern denselben Endinhalt serviert. Es ist nur dann Cloaking, wenn Sie beiden völlig unterschiedliche Inhalte servieren.

Einpacken

JavaScript-SEO ist eine Herausforderung. Aber es gibt Dinge, die Sie tun können, um es einfacher zu machen und die Belastung für Ihr Web-Entwicklungsteam und Ihr Budget zu reduzieren.

Wenn Sie einen dynamischen Renderer wünschen, der alle Ihre JavaScript-SEO-Probleme löst, suchen Sie nicht weiter als Prerender. Alles, was Sie tun müssen, ist unsere Middleware zu installieren. Der Rest erledigt sich von selbst. Bringen Sie Google dazu, endlich mit Ihnen und nicht gegen Sie zu arbeiten.