Wenn individueller JavaScript-Code in Webflow verwendet wird, wird er normalerweise clientseitig gerendert. Das heisst, der resultierende HTML-Code ist für die SEO nicht relevant, weil Suchmaschinen-Bots wie Googlebot nur den HTML-Code sehen, der serverseitig von Webflow gerendert wird.
Daher indexieren die Suchmaschinen-Crawler den Inhalt deiner Website möglicherweise nicht korrekt, was zu niedrigeren Suchergebnissen und reduzierter Sichtbarkeit führt. Um dieses Problem zu beheben, kann ein Reverse-Proxy mit Cloudflare Workers und prerender.io verwendet werden, um sicherzustellen, dass Suchmaschinen-Crawler effektiv auf den Inhalt deiner JS-basierten Website zugreifen und ihn indexieren 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 beheben.
Dieser Ansatz stellt sicher, dass Suchmaschinen-Crawler effektiv auf den Inhalt deiner JavaScript-basierten Website zugreifen und ihn indexieren können.
Hier ist eine Schritt-für-Schritt-Anleitung zur Einrichtung.
Schritt-für-Schritt-Anleitung
1. Registriere dich bei Cloudflare und Prerender.io
Erstelle zuerst ein Konto bei Cloudflare (https://www.cloudflare.com) und Prerender.io (https://prerender.io). Wenn 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-Website mit einem Cloudflare-Proxy einzurichten, befolge die folgenden 6 Schritte:
- 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 wieder in den Webflow-Einstellungen.
- Ignoriere alle Warnungen in Webflow bezüglich AAAA-Einträgen.
3. Einen Cloudflare Worker einrichten
Navigiere im Cloudflare-Dashboard zum Tab "Workers" und klicke auf "Worker erstellen". Dadurch gelangst du zum Worker-Editor, in dem du deinen JavaScript-Code schreiben kannst.
4. Den Reverse-Proxy konfigurieren
Im Worker-Editor musst du JavaScript-Code schreiben, um eingehende Anfragen zu verarbeiten und sie an deinen Ursprungsserver oder Prerender.io weiterzuleiten.
Hier ist ein Beispiel-Code-Snippet, um dir den Einstieg zu erleichtern:
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 sendet sie gegebenenfalls zur Wiedergabe 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 korrekt erfasst werden, empfehle ich, das vollständige JavaScript zu verwenden, das von prerender.io bereitgestellt wird. Du findest es im folgenden GitHub-Repository, und detaillierte Anweisungen für die Cloudflare ESM Syntax Integration findest du hier.
5. Den Cloudflare Worker bereitstellen
Speichere und stelle deinen Cloudflare Worker bereit. Der Worker wird nun für alle Anfragen an deine Domain ausgeführt.
6. Deine Einrichtung testen
Du kannst Tools wie Googles Mobile-Friendly Test oder die Chrome-Erweiterung User-Agent Switcher verwenden, um zu sehen, wie deine Website von 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 sicherstellt, dass sie eine vollständig gerenderte Version deiner JavaScript-lastigen Website erhalten. Dies sollte die SEO-Leistung deiner Website verbessern, indem dein Inhalt für Suchmaschinen besser zugänglich gemacht wird. Alle anderen Anfragen werden direkt an deine Webflow-Website weitergeleitet.
Deutsch
English