Wenn in Webflow eigener JavaScript-Code verwendet wird, wird dieser in der Regel clientseitig gerendert. Das bedeutet, dass der resultierende HTML-Code für SEO nicht relevant ist, weil Suchmaschinen-Bots wie der Googlebot nur den HTML-Code sehen, der von Webflow serverseitig gerendert wird.
Dadurch indexieren die Suchmaschinen-Crawler die Inhalte deiner Website möglicherweise nicht korrekt, was zu schlechteren Rankings und geringerer Sichtbarkeit führt. Um dieses Problem zu lösen, lässt sich ein Reverse Proxy mit Cloudflare Workers und prerender.io einsetzen, damit Suchmaschinen-Crawler die JS-basierten Inhalte deiner Seite effektiv erfassen und indexieren können.
Ein Reverse Proxy mit Cloudflare Workers und prerender.io ist eine der besten Lösungen für SEO-Probleme bei JavaScript-lastigen Websites.
Dieser Ansatz stellt sicher, dass Suchmaschinen-Crawler die Inhalte deiner JavaScript-basierten Seite effektiv erfassen und indexieren können.
Hier eine Schritt-für-Schritt-Anleitung zur Einrichtung.
Schritt-für-Schritt-Anleitung
1. Bei Cloudflare und Prerender.io registrieren
Erstelle zunächst ein Konto bei Cloudflare (https://www.cloudflare.com) und bei Prerender.io (https://prerender.io). Falls du bereits ein Cloudflare-Konto hast, stelle sicher, dass deine Domain hinzugefügt und korrekt konfiguriert ist.
2. Webflow mit Cloudflare einrichten
Um eine Webflow-Site mit einem Cloudflare-Proxy einzurichten, folge diesen 6 Schritten:
- Füge deine Domain zu Cloudflare hinzu und konfiguriere sie korrekt.
- Stelle sicher, dass der DNS-Eintrag auf Proxy gesetzt ist (orange Wolke aktiviert).
- Deaktiviere in Webflow SSL und kopiere die leeren DNS-Einträge (ohne SSL).
- Füge die kopierten Einträge zu den DNS-Einstellungen in Cloudflare hinzu.
- Aktiviere SSL in den Webflow-Einstellungen wieder.
- Ignoriere allfällige Warnungen in Webflow zu AAAA-Einträgen.
3. Einen Cloudflare Worker einrichten
Navigiere im Cloudflare-Dashboard zum Tab «Workers» und klicke auf «Create a Worker». Das bringt dich zum Worker-Editor, in dem du deinen JavaScript-Code schreibst.
4. Den Reverse Proxy konfigurieren
Im Worker-Editor schreibst du JavaScript-Code, der eingehende Anfragen verarbeitet und sie je nach Bedarf an deinen Origin-Server oder an Prerender.io weiterleitet.
Hier ein Beispiel-Code-Snippet für den Einstieg:
Kopiere diesen Code von GitHub Gist.
Ersetze 'your_prerender_token' durch deinen tatsächlichen Prerender.io-API-Token. Dieser Code prüft, ob die Anfrage von einem Crawler stammt, und schickt sie in diesem Fall zur Darstellung an Prerender.io. Andernfalls leitet er die Anfrage an deinen Origin-Server weiter.
Hinweis: Dies ist eine einfache Lösung! Damit wirklich alle Such- und Social-Media-Bots korrekt erfasst werden, empfehle ich, das vollständige JavaScript von prerender.io zu verwenden. Du findest es im folgenden GitHub-Repository, und eine ausführliche Anleitung zur Cloudflare-ESM-Syntax-Integration findest du hier.
5. Den Cloudflare Worker deployen
Speichere deinen Cloudflare Worker und deploye ihn. Der Worker läuft nun für alle Anfragen an deine Domain.
6. Deine Einrichtung testen
Mit Werkzeugen wie Googles Mobile-Friendly Test oder der Chrome-Erweiterung User-Agent Switcher kannst du sehen, wie deine Website vom Googlebot gecrawlt und gerendert wird.
Fazit
Wenn du diese Schritte befolgst, richtest du einen Reverse Proxy ein, der Anfragen von Suchmaschinen-Crawlern über Prerender.io leitet und ihnen so eine vollständig gerenderte Version deiner JavaScript-lastigen Website liefert. Das sollte die SEO-Performance deiner Seite verbessern, indem deine Inhalte für Suchmaschinen besser zugänglich werden. Alle anderen Anfragen werden direkt an deine Webflow-Website geleitet.