In der kürzlich von Forbes veröffentlichten Liste der wichtigsten Website-Statistiken für das Jahr 2024 erfahren wir, dass derzeit etwa 1,09 Milliarden Websites im Internet (!) existieren. Wie werden die Nutzer (und potenziellen Kunden) Ihre Website bei über einer Milliarde Websites finden? Höchstwahrscheinlich werden sie mit einer Suchmaschine beginnen. Damit die Suchmaschine die Nutzer jedoch zu Ihrer Website führt, müssen Sie Ihre SEO-Hausaufgaben machen.
SEO sorgt dafür, dass Ihre Website in den Suchmaschinen gut platziert ist. Richtig umgesetzt, bringt SEO mehr Besucher auf Ihre Website. Websites, die auf modernen JavaScript-Frameworks wie React oder Vue.js basieren, sind jedoch stark auf das clientseitige Rendering angewiesen, und Suchmaschinen haben oft Probleme, diese Art von Websites korrekt zu indizieren. Das führt zu einer schlechten Sichtbarkeit in den Suchergebnissen.
Das bringt uns zum Prerendering. Beim Prerendering wird eine statische HTML-Version Ihrer Webseiten erstellt, die von einer Suchmaschine leicht gecrawlt und indiziert werden kann. Diese Technik kann sich dramatisch auf den SEO-Erfolg Ihrer Website auswirken.
In diesem Beitrag werden wir uns ansehen, wie Prerendering-Dienste von Prerender.io Ihnen helfen können, SEO-Hindernisse bei der Verwendung dieser Frameworks zu überwinden. Außerdem zeigen wir Ihnen die richtige Richtung für die Implementierung von Prerendering entweder auf dem Webserver oder auf der Anwendungsebene.
Steigen wir ein.
Die SEO-Herausforderung mit JavaScript-Frameworks
Warum ist SEO eine Herausforderung bei der Verwendung von Frameworks wie React oder Vue.js? Herkömmliche Suchmaschinen-Bots sind darauf ausgelegt, statisches HTML zu lesen. Andere können einen Teil des JavaScript verarbeiten und Seiten teilweise rendern, aber sie haben ihre Grenzen. Wenn Ihre Website stark auf clientseitiges Rendering ausgerichtet ist, wird eine Suchmaschine die Seite höchstwahrscheinlich nicht vollständig crawlen und rendern, so dass sie nicht den vollständigen, tatsächlichen Inhalt für die Indizierung sehen wird.
Als Beispiel gibt Google den Erstellern von clientseitig gerenderten Websites die folgende Anleitung:
Dynamisches Rendering war ein Workaround und keine langfristige Lösung für Probleme mit JavaScript-generierten Inhalten in Suchmaschinen. Wir empfehlen stattdessen die Verwendung von serverseitigem Rendering, statischem Rendering oder Hydration als Lösung.
Welche Auswirkungen hat das auf Ihre Suchmaschinenoptimierung? Natürlich wirkt sich eine unvollständige oder verzögerte Indizierung auf die Platzierung Ihrer Website in den Suchergebnissen aus. Infolgedessen kann es zu Verzögerungen beim Erscheinen Ihrer Website in den Suchergebnissen kommen, was zu verpassten Gelegenheiten für organischen Traffic führt. Die unvollständige oder verzögerte Indizierung kann bedeuten, dass eine Suchmaschine einen zweiten Crawl Ihrer Website durchführen muss, was zu weiteren Verzögerungen führt.
Im obigen Tipp von Google wird empfohlen, "statisches Rendering" zu verwenden - und bis zu einem gewissen Grad ist es das, was man mit Prerendering erreicht.
Wie Prerender.io dieses Problem löst
Prerendering überbrückt im Wesentlichen die Lücke zwischen den dynamischen Fähigkeiten moderner JavaScript-Frameworks und dem Bedarf an statischen HTML-Inhalten, mit denen Suchmaschinen-Bots arbeiten können. Schauen wir uns an, wie das mit Prerender.io funktioniert.
Prerender.io führt das JavaScript auf Ihren Seiten in einem Headless-Browser aus und rendert den gesamten Inhalt. Anschließend speichert es diesen gerenderten Inhalt als statisches HTML. Wenn ein Suchmaschinen-Bot Ihre Website crawlt und eine bestimmte Seite anfordert, lassen Sie Prerender.io das vorgerenderte HTML anstelle Ihrer JavaScript-lastigen Seite bereitstellen. Auf diese Weise können Suchmaschinen schnell und einfach auf den vollständigen Inhalt Ihrer Seiten zugreifen, ohne komplexes JavaScript verarbeiten zu müssen.
Was sind die Vorteile dieses Ansatzes?
- Verbesserte SEO: Da Prerender.io Suchmaschinen mit vollständig gerendertem HTML versorgen kann, werden Ihre Inhalte korrekt und zeitnah indiziert. Dies verbessert Ihr Suchranking und erhöht die Sichtbarkeit Ihrer Website.
- Schnelleres Laden von Seiten: Wenn Sie Prerender.io verwenden, um statisches HTML an einen Suchmaschinen-Bot zu übermitteln, reduzieren Sie die Belastung Ihrer Server. Da Crawler von unzähligen Suchmaschinen ständig in Betrieb sind, kann die Auslagerung ihrer Anfragen an Prerender.io die Ladezeiten von Seiten verbessern und die Benutzerfreundlichkeit für Ihre tatsächlichen Benutzer erhöhen.
- Bessere Nutzererfahrung: Schnellere Seitenladezeiten und eine genauere Indexierung erhöhen die Chancen der Nutzer, Ihre Website schnell zu finden und ein positives Surferlebnis zu genießen.
Wir haben uns mit dem Was, dem Wie und dem Warum beschäftigt. Jetzt geht es ans Eingemachte.
Implementierung von Prerender.io in Ihre Webanwendung
Um Prerender.io in Ihre Webanwendung zu integrieren, sind die beiden einfachsten Ansätze, dies auf der Webserver-Ebene oder auf der Ebene des Anwendungscodes zu tun. Betrachten wir beide Ansätze im Detail.
Ansatz 1: Auf dem Webserver
Wenn Sie eine Node.js Anwendung auf Linode bereitstellen, verwenden Sie wahrscheinlich die Node.js Ein-Klick-Marktplatz-App, die Ihnen hilft, schnell loszulegen. Nachdem Sie eine neue Linode erstellt haben, hilft Ihnen die App, Nginx, Node.js, NPM und PM2 einzurichten.
Um Prerender.io mit Nginx zu verwenden, können Sie der Integrationsanleitung für Nginx folgen. Zunächst erstellen Sie eine Sicherungskopie der nginx.conf-Datei Ihres Systems. Sie werden das Modul ngx_http_map_module verwenden, um einige Variablen auf der Grundlage der Werte anderer Variablen zu erstellen.
Sie werden Ihre nginx.conf-Datei bearbeiten, um Abschnitte aus der Beispielkonfigurationsdatei Nginx von Prerender.io einzufügen. Zunächst fügen Sie die folgenden Map-Blöcke zu Ihrem http-Abschnitt hinzu.
map $http_user_agent $prerender_ua { |
Die erste map Block prüft den User-Agent einer HTTP-Anfrage. Wenn der User-Agent in der Liste der Suchmaschinen-Bots enthalten ist, werden verschiedene andere Variablen und Konfigurationen ausgelöst, um die Weiterleitung an Prerender.io vorzubereiten.
Dann, innerhalb der Haupt location Block, fügen Sie Folgendes hinzu, um die URL umzuschreiben und die prerenderio/ Pfad:
if ($prerender = 1) { |
Fügen Sie schließlich den Standortblock für die prerenderio/ Pfad:
location /prerenderio { |
Diese location Block weist Prerender.io an, die vorgesehene Zielseite zu rendern und das statische HTML zu liefern. Für die Authentifizierung müssen Sie YOUR_TOKEN mit Ihrem aktuellen Prerender.io-Konto-Token. Falls Prerender.io diese Seite bereits in der Vergangenheit gerendert hat, wird möglicherweise eine gecachte Version angezeigt (je nachdem, wie Sie Caching einrichten in Ihrem Prerender.io-Konto).
Die Integrationsanleitung Nginx von Prerender.io ist recht umfassend. Wenn Sie Apache anstelle von Nginx verwenden, können Sie auf die Integrationsanleitung für den Webserver Apache verweisen.
Die vier grundlegenden Schritte zur Integration von Prerender.io
Im Allgemeinen umfasst die Integration von Prerender.io in Ihre Anwendung, unabhängig vom Ansatz, die folgenden Schritte:
- Crawler erkennen. Untersuchen Sie den User-Agent-Header in Anfragen. Im obigen Beispiel von Nginx müssen wir uns nur die
$http_user_agentvariabel. - Umleitung zu prerender.io. Leitet Bot-Anfragen zum Rendern an Prerender.io weiter.
- Ändern Sie die Anforderungspfade. Stellen Sie sicher, dass Ihre Anforderungspfade korrekt für Prerender.io formatiert sind, das die vollständige URL als Pfad erwartet.
- Verwalten Sie das Caching. Finden Sie ein Gleichgewicht zwischen der Nutzung von Prerender.io zur Bereitstellung zwischengespeicherter statischer HTML-Seiten (für Geschwindigkeit) und der Anweisung an Prerender.io, aktualisierte Inhalte auf Ihrer Website erneut zwischenzuspeichern (für Aktualität). Siehe Anleitung zum Caching von Prerender.io.
Ansatz 2: In Ihrem Anwendungscode (Node.js Express)
Wenn Sie eine Anwendung haben, die ein JavaScript-Framework (z. B. React, Vue.js oder Angular) für das Frontend verwendet, können Sie den Anwendungsserver für Ihr Frontend so konfigurieren, dass er die vier oben aufgeführten grundlegenden Schritte ausführt.
Wenn Sie Express verwenden, um Ihr Frontend zu bedienen, können Sie die Vorteile der vorgefertigten Middleware von Prerender.io nutzen, die all dies für Sie erledigt. Weitere Details finden Sie in der Anleitung zur Node-Integration von Prerender.io. Um es für Sie aufzuschlüsseln, hier ist, was beteiligt ist:
Installieren Sie das Paket Node.js :
npm install prerender-node --save |
Fügen Sie den folgenden Code in Ihre Hauptdatei index.js oder app.js ein, in der Ihre Express-Server-Anwendung definiert ist:
app.use(require('prerender-node').set('prerenderToken', 'YOUR_TOKEN')); |
Auch hier gilt, dass Sie zur Authentifizierung die YOUR_TOKEN mit Ihrem aktuellen Prerender.io-Konto-Token.
Starten Sie dann Ihren Express-Server neu.
Das ist alles, was es zu sagen gibt!
Fazit
Das Prerendering Ihrer Seiten kann Ihnen helfen, die SEO-Herausforderungen zu lösen, wenn Sie moderne JavaScript-Frameworks und client-seitiges Rendering verwenden. Prerender.io rendert Ihre Seiten im Voraus und liefert dann das statische HTML an die Crawler der Suchmaschinen. Auf diese Weise können Sie sicherstellen, dass Ihre Inhalte für Suchmaschinen-Bots vollständig zugänglich sind, was zu einer genauen Indizierung und besseren Platzierung in den Suchergebnissen führt. Durch die Lösung dieses SEO-Problems erhält Ihre Website eine bessere Sichtbarkeit und mehr organischen Verkehr.
Wenn Sie diese Prerendering-Techniken mit den einfach zu verwaltenden Cloud Computing-Lösungen von Akamai kombinieren, können Sie im Handumdrehen SEO-optimierte Websites erstellen und betreiben. Weitere Tipps und Anleitungen für die optimale Nutzung der Cloud Computing-Services von Akamai bei der Bereitstellung Ihrer Anwendungen finden Sie in unserer umfangreichen Bibliothek mit Dokumenten.
Kommentare