Wie Prerender JavaScript-Websites rendert
Ab 2022 verwenden rund 98 % aller Websites JavaScript auf die eine oder andere Weise. Und es ist leicht zu verstehen, warum. JavaScript ermöglicht es Entwicklern, statische Websites um zusätzliche Funktionen zu erweitern. So lassen sich z. B. Inhalte filtern oder dynamische Diagramme auf der Grundlage von Daten erstellen.
Das ist gut für die Nutzer, aber nicht für die Suchmaschinen, denn es erschwert ihnen das Lesen der Informationen auf Ihren Websites und kann sich sogar negativ auf Ihren organischen Verkehr auswirken.
Wenn Sie Ihr Unternehmen über die organische Suche ausbauen und die Nutzererfahrung verbessern wollen, müssen Sie unbedingt wissen, wie Google mit JavaScript umgeht. Zum Beispiel, welche Einschränkungen es gibt und was Sie tun können, um die Indizierung Ihrer dynamischen Seiten zu erleichtern, ohne dass wertvolle Inhalte verloren gehen.
JavaScript-basierte Websites mit den Augen von Google sehen
Obwohl er schwankt, hat Google seine Dominanz über alle konkurrierenden Suchmaschinen seit Jahren aufrechterhalten und erreichte im Juni 2022 einen weltweiten Marktanteil von 91 %.
Aus diesem Grund wollen wir uns darauf konzentrieren, wie der Google-Bot Ihre Inhalte findet, crawlt und indiziert und was genau passiert, wenn er dynamische Inhalte auf Ihrer Website findet.
Wie Google Websites durchforstet und indexiert
Heutzutage assoziieren viele Menschen das Internet mit Suchmaschinen, als ob das Internet die Suchmaschinen wären, die wir benutzen, um Informationen und Websites zu finden.
In Wirklichkeit besteht das Internet jedoch aus Milliarden von Websites, die miteinander verlinkt sind, und Suchmaschinen sind eine Art Verzeichnis, in dem man diese Websites in einem kategorisierten Format finden kann, so dass man sie mit Schlüsselwörtern oder Suchanfragen finden kann.
Damit dies funktioniert, muss Google diese Seiten zunächst finden. Dieser "Entdeckungsprozess" wird Crawling genannt. Bei diesem Prozess folgt ein Bot (Crawler) einem Link zu einer neuen Seite und dann den Links auf dieser Seite zur nächsten Seite.
Durch das Crawlen von Seiten kann Google neue Seiten finden und ihre Beziehung durch den Crawling-Prozess verstehen. Außerdem rendert Google in dieser Phase die Seite unter Verwendung aller Dateien, die beim Crawling geholt wurden: HTML, CSS, JavaScript und alle anderen Dateien, die es zum Aufbau der Seite benötigt.
Returning to the directory structure, the process through which Google categorizes the pages and adds them to its list is called indexing. This stage includes “processing and analyzing the textual content and key content tags and attributes, such as <title> elements and alt attributes, images, videos, and more.”
Mit anderen Worten: Die Indexierung analysiert alle mit Ihrer Seite verbundenen Daten (Sprache, Standort, Struktur, Inhalt, strukturierte Daten usw.) und fügt sie ihrer Datenbank hinzu.
Beachten Sie, dass eine Schlüsselkomponente für eine erfolgreiche Indexierung das Rendering ist. Wenn Google nicht sehen kann, was auf Ihrer Seite steht, kann es sie auch nicht indizieren.
Wie Googles Renderer funktioniert
Lassen Sie uns diesen ganzen Prozess genauer betrachten. Wenn Google eine URL findet, wird sie nicht sofort gecrawlt. Es liest zunächst die Datei robot.txt, um sicherzustellen, dass Sie das Crawlen der Seite nicht blockieren. Wenn dies der Fall ist, wird die URL zum Crawlen in die Warteschlange gestellt.
Sobald die Seite gecrawlt wurde, werden alle neu gefundenen URLs an die Crawling-Warteschlange geschickt, während die bereits gecrawlten in die Rendering-Warteschlange wandern, um den Renderer zu durchlaufen. Und genau hier passiert die Magie.
Hinweis: Wenn Ihre robot.txt-Datei die Indizierung einer Seite blockiert, wird die Seite von Google nicht angezeigt.
Vereinfacht ausgedrückt, ist das Rendering der Prozess des Aufbaus einer Seite unter Verwendung aller abgerufenen Dateien und der Umwandlung von (Hyper-)Text in Pixel - genau wie bei Browsern.
Das Verfahren von Google durch Google Search Central
Tatsächlich verwendet Google eine Instanz von Google Chrome mit Puppeteer, um die Seite zu rendern und die Website genau wie die Nutzer zu sehen.
Sobald die Seite gerendert ist, macht Google einen Schnappschuss des Ergebnisses, vergleicht ihn mit der rohen HTML-Version und gibt die Seite schließlich zur Indizierung zurück. Andernfalls kann Google die Qualität, den Inhalt und die Elemente der Seite nicht verstehen und die Seite überhaupt nicht indizieren.
Warum Sie sich nicht auf den Renderer von Google verlassen sollten: Crawl-Budget und Probleme bei der Indizierung
Es scheint, als hätte Google alles im Griff, wo liegt also das Problem?
Es ist alles eine Frage der Ressourcen. Eine Seite zu crawlen und zu rendern ist einfach genug, aber diesen Prozess mit Milliarden von Seiten pro Tag durchzuführen, wird zur Herausforderung. Um das System von Google noch mehr zu belasten, kann es nicht nur einmal crawlen und das war's. Wenn Seiten aktualisiert oder geändert werden, muss Google die alten Seiten erneut crawlen, um sicherzustellen, dass der Index auf dem neuesten Stand ist und den Nutzern immer die besten Ergebnisse zeigt.
Da die Ressourcen der Suchmaschinen endlich sind, wird jeder Website ein Crawl-Budget zugewiesen - eine "festgelegte Anzahl von Anfragen, die ein Crawler innerhalb eines bestimmten Zeitraums auf einer Website ausführen wird". Wenn dieses Zeitfenster ausgeschöpft ist, hört der Google Bot auf, Ihre Website zu crawlen, unabhängig davon, ob noch Seiten im Index fehlen.
Innerhalb dieses Crawl-Budgets wird die Wartezeit in der Crawling-Warteschlange und der Rendering-Warteschlange sowie die Zeit, die der Renderer benötigt, um die zusätzlichen Inhalte zu holen, die zum Rendern Ihrer dynamischen Seiten erforderlich sind, komprimiert. Daher ist die Optimierung des Crawl-Budgets für größere Websites von entscheidender Bedeutung.
Außerdem können viele Dinge schief gehen. So ist Google beispielsweise nicht in der Lage, den gesamten Seiteninhalt wiederzugeben, wodurch Sie in den Suchergebnissen benachteiligt werden, oder es verbraucht Ihr Crawl-Budget zu schnell, wodurch andere Seiten nicht entdeckt werden.
Wie Prerender das Problem zwischen JavaScript und SEO löst
Beim Rendern dynamischer Seiten stehen den Entwicklern drei Lösungen zur Verfügung.
Die häufigste Lösung ist das serverseitige Rendering (SSR). Anstatt Google Ihre Seiten rendern zu lassen, findet dieser Prozess direkt auf Ihren Servern statt. Mit anderen Worten: Wenn ein Nutzer-Agent (wie der Google-Bot) eine Anfrage an Ihre URL sendet, rendert Ihr Server die Seite und gibt eine vollständig gerenderte Version des DOM zurück, wodurch Nutzer und Suchmaschinen viel Zeit und Ressourcen sparen.
Das Hauptproblem bei diesem Ansatz sind die Kosten, da Sie nun für die gesamte Rechenleistung, die für den Rendering-Prozess erforderlich ist, aufkommen müssen. Ganz zu schweigen davon, dass die Einrichtung kompliziert ist und das Entwicklungsteam viele Stunden für die Konfiguration aufwenden muss.
Hinweis: Um SSR auf Ihrem Server zu implementieren, muss Ihr Backend in Node.JS geschrieben sein, da die Lösung nicht mit Backend-Sprachen wie JavaScript oder Go kompatibel ist. Wenn das bei Ihnen der Fall ist, werden wir die beste Lösung später in diesem Artikel vorstellen.
Andererseits verwenden JavaScript-Frameworks (wie Vue und React) standardmäßig das clientseitige Rendering und übertragen die Last des Renderings dynamischer Inhalte an den Browser. Obwohl dies kostengünstiger ist, können die meisten Suchmaschinen JavaScript nicht ausführen, sodass sie nur eine leere Seite erhalten.
Aber es gibt noch eine dritte Möglichkeit: Prerendering.
Sogar Google empfiehlt das Prerendering für kurze Zeit!
Was ist Prerendering?
Wie der Name schon sagt, besteht das Prerendering aus dem Zwischenspeichern einer vollständig gerenderten Version Ihrer Seiten und deren Bereitstellung für Suchbots, wenn diese eine Anfrage an eine vorgerenderte URL senden.
Damit dies funktioniert, müssen Ihre Server zwischen menschlichen Nutzern und Bots unterscheiden, die vollständig gerenderte Version Ihrer Seiten im Cache speichern und natürlich in der Lage sein, den Rendering-Prozess durchzuführen.
Dies würde jedoch schnell zu unerwünschten Kosten und Wartungsaufwand führen. Stattdessen können Sie eine Lösung wie unsere, Prerender, verwenden, um Ihre JavaScript-Website für Suchmaschinen zu optimieren, und zwar zu einem Bruchteil des Preises, den Sie für die Implementierung und Abwicklung des gesamten Prozesses selbst zahlen müssten.
So funktioniert Prerender
Um Prerender zu nutzen, müssen Sie lediglich die entsprechende Middleware (basierend auf Ihrem Tech-Stack) auf Ihrem Backend/CDN/Webserver installieren und testen, um sicherzustellen, dass sie korrekt funktioniert. Es gibt keine komplizierten Workarounds oder Wartungsarbeiten.
Hinweis: Im Gegensatz zu einer Hardcodelösung können Sie Prerender unabhängig von Ihrer technischen Ausstattung in Ihre Website integrieren. Wir haben Sprachen wie C#, Python, Ruby, Java und mehr abgedeckt.
Wenn Ihr Server einen User-Agent als einen Bot identifiziert, der Ihre Seite anfordert, sendet er eine Anfrage an Prerender. Wenn es das erste Mal ist, befindet sich die Seite nicht im Cache (Cache-Miss). Prerender holt dann alle erforderlichen Dateien von Ihrem Server, rendert die Seite und sendet sie nach einigen Sekunden als gerenderte statische Seite.
Genau wie Google verfügt Prerender über eine eigene Puppeteer-Instanz (die die neuesten Chrome-Technologien verwendet), um sicherzustellen, dass die Seite vollständig gerendert wird, unabhängig davon, welche Technologien Sie verwenden.
Sobald sich die Seite im Cache befindet, stellt Prerender diese Cache-Version (Cache-Hit) künftig allen Bots zur Verfügung, wodurch die Antwortgeschwindigkeit und das Crawl-Budget erhöht werden und - was am wichtigsten ist - ein genauer Schnappschuss der Seite für die Indexierung bereitgestellt wird.
Hinweis: Der Crawler weiß nie, dass Sie Prerender.io verwenden, da die Antwort immer über Ihren Server läuft.
Die Middleware leitet den Datenverkehr an die normalen Serverrouten für menschliche Benutzer weiter, so dass die Benutzererfahrung nicht beeinträchtigt oder verändert wird.
Wie Prerender Änderungen auf Ihren Seiten verwaltet
Ihre Seiten ändern sich ständig und entwickeln sich weiter, sei es durch eine Änderung der Daten oder durch regelmäßige Aktualisierungen - Ihr Inhalt bleibt nicht stehen, wohl aber Ihre Cache-Version.
Beim serverseitigen Rendering wird der Rendering-Prozess bei jeder Anfrage an den Server durchgeführt, aber Prerender speichert die gerenderte Version und verwendet sie für die Fütterung von Suchrobotern.
Das ist gut, weil es die Bearbeitungskosten und -zeit stark reduziert. Aber was passiert dann mit Änderungen?
Prerender verfügt über eine Funktion namens Recaching. Sie ermöglicht es Ihnen, einen Timer für Prerender einzustellen, um die Seiten erneut abzurufen und einen neuen Snapshot aus dem aktualisierten Inhalt zu erstellen und im Cache zu speichern, der bei der nächsten Anforderung bereitgestellt wird.
Diese Funktion ist wichtig, damit Google immer die aktuellste Version Ihrer Seiten findet, damit es keine neuen Links auf der Seite oder On-Page-Optimierungen übersieht oder den dynamischen Aspekt der Seite beeinträchtigt.
Zusammenfassung: Wie Prerender Ihnen Geld einbringt
Inzwischen haben Sie gesehen, wie Prerender (und Prerendering) einige der üblichen JavaScript-SEO-Probleme lösen kann, indem eine vollständig gerenderte Version Ihrer SPAs oder dynamischen Seiten erstellt wird.
Aber wie lassen sich diese Vorteile in Geschäftsziele umsetzen? Wir können die Vorteile von Prerender in zwei Hauptkategorien einteilen: Einsparungen und SEO-Gewinne.
Mit Prerender können Sie Geld und Ressourcen sparen, denn es nimmt Ihnen die gesamte technische Komplexität ab. Sie brauchen keine komplizierten, zeitaufwändigen und teuren Implementierungen, sondern nur eine einfache Middleware, die auf Ihrem Server installiert wird.
Gleichzeitig ergibt sich fast sofort ein signifikanter SEO-Gewinn, da Google Ihre Websites in kürzerer Zeit crawlt und indiziert und Ihr Crawl-Budget voll ausschöpfen kann. Dies führt zu mehr organischem Traffic, Leads und natürlich zu mehr Umsatz.
- Ihr Domänenwert steigt auf 92 von 100 Punkten (zum Vergleich: die Domänenautorität der New York Times beträgt 95).
- "Google PageSpeed Insights bewertet die Desktop-Version von Softonic mit 92 Punkten. Webpage Test gibt Softonic eine A-Note in allen Bereichen und eine beneidenswerte TTFB-Latenz von 446 ms. Auch von GTMetrix erhält Softonic die Note A."
- "Die höhere Geschwindigkeit und das sicherere Web-Erlebnis tragen dazu bei, dass Softonic im Durchschnitt mehr als 40 Millionen Besucher pro Monat verzeichnen kann."
Wenn organischer Traffic ein wesentlicher Bestandteil Ihrer Marketing- und Verkaufsstrategie ist, kann Prerender einen echten Unterschied machen.
Wenn Sie mehr über Prerender erfahren möchten, lesen Sie unsere Dokumentation oder sehen Sie sich das Tool in Aktion an. Nächstes Mal im Cache!