Wenn benutzerdefinierter JavaScript-Code in Webflow verwendet wird, wird er normalerweise clientseitig gerendert. Das bedeutet, dass der daraus resultierende HTML-Code für SEO nicht relevant ist, weil Suchmaschinen-Bots wie Googlebot nur den HTML-Code sehen, der serverseitig von Webflow gerendert wird.
Dies kann dazu führen, dass die Crawler der Suchmaschinen die Inhalte deiner Website nicht richtig indizieren, was zu schlechteren Suchergebnissen und geringerer Sichtbarkeit führt. Um dieses Problem zu beheben, kann ein Reverse Proxy mit Cloudflare Workers und prerender.io eingesetzt werden, um sicherzustellen, dass Suchmaschinen-Crawler auf deine JS-basierten Website-Inhalte zugreifen und sie effektiv indizieren können.
Die Verwendung eines Reverse-Proxys mit Cloudflare Workers und prerender.io ist eine der besten Lösungen, um SEO-Probleme im Zusammenhang mit JavaScript-lastigen Websites zu lösen.
Dieser Ansatz stellt sicher, dass Suchmaschinen-Crawler effektiv auf den Inhalt deiner JavaScript-basierten Website zugreifen und ihn indizieren können.
Hier ist eine Schritt-für-Schritt-Anleitung zum Einrichten des Systems.
Schritt-für-Schritt-Anleitung
1. Melde dich bei Cloudflare und Prerender.io an
Erstelle zunächst ein Konto bei Cloudflare (https://www.cloudflare.com) und Prerender.io (https://prerender.io). Wenn du bereits ein Konto bei Cloudflare hast, vergewissere dich, dass deine Domain hinzugefügt und richtig konfiguriert ist.
2. Webflow mit Cloudflare einrichten
Um eine Webflow-Site mit einem Cloudflare-Proxy einzurichten, befolge die folgenden 6 Schritte:
- Füge deine Domain zu Cloudflare hinzu und konfiguriere sie richtig.
- Vergewissere dich, dass der DNS-Eintrag auf Proxy eingestellt ist (die orangefarbene Wolke ist aktiviert).
- Deaktiviere in Webflow SSL und kopiere die leeren DNS-Einträge (ohne SSL).
- Füge die kopierten Datensätze zu den DNS-Einstellungen in Cloudflare hinzu.
- Aktiviere SSL wieder in den Webflow-Einstellungen.
- Ignoriere alle Warnungen in Webflow bezüglich AAAA-Datensätzen.
3. Einen Cloudflare Worker einrichten
Navigiere im Cloudflare-Dashboard zum Reiter "Workers" und klicke auf "Create a Worker". Dadurch gelangst du zum Worker-Editor, in dem du deinen JavaScript-Code schreiben kannst.
4. Konfiguriere den Reverse Proxy
Im Worker-Editor musst du JavaScript-Code schreiben, um eingehende Anfragen zu bearbeiten und sie je nach Bedarf an deinen Ursprungsserver oder Prerender.io weiterzuleiten.
Hier ist ein Beispielcode, der dir den Einstieg erleichtert:
Kopiere diesen Code von GitHub Gist.
Ersetze "your_prerender_token" durch dein tatsächliches Prerender.io API-Token. Dieser Code prüft, ob die Anfrage von einem Crawler kommt, und wenn ja, sendet er sie zum Rendern an Prerender.io. Andernfalls leitet er die Anfrage an deinen Ursprungsserver weiter.
Hinweis: Dies ist eine einfache Lösung! Um sicherzustellen, dass alle Such- und Social Media Bots richtig erfasst werden, empfehle ich, das vollständige JavaScript von prerender.io zu verwenden. Du findest es im folgenden GitHub-Repository, und eine detaillierte Anleitung für die Cloudflare ESM Syntax Integration findest du hier.
5. Einsetzen des Cloudflare Workers
Speichere und setze deinen Cloudflare Worker ein. Der Worker wird nun für alle Anfragen an deine Domain ausgeführt.
6. Teste deine Einrichtung
Du kannst Tools wie den Google Mobile-Friendly Test oder die Chrome-Erweiterung User-Agent Switcher verwenden, um zu sehen, wie deine Website vom Googlebot gecrawlt und gerendert wird.
Fazit
Wenn du diese Schritte befolgst, richtest du einen Reverse Proxy ein, der die Anfragen von Suchmaschinen-Crawlern über Prerender.io leitet und sicherstellt, dass sie eine vollständig gerenderte Version deiner JavaScript-lastigen Website erhalten. Das sollte die SEO-Leistung deiner Website verbessern, da deine Inhalte für Suchmaschinen besser zugänglich sind. Alle anderen Anfragen werden direkt an deine Webflow-Website weitergeleitet.
