A hands-on guide on how to use "Edge SEO" to drive your SEO program forward, including a detailed explanation on how to setup, run and create Cloudflare Workers for SEO tasks. Presented at the SEO-DAY 2021 in Cologne, Germany.
DNS, Datenbanken etc. außer Acht gelassen, würde das Ganze so aussehen: 1. Request, jemals peakace.js ist noch nicht auf Edge-Server zwischengespeichert Origin-Server Request: peakace.js Request: peakace.js peakace.js übermittelt vom Origin-Server Response: peakace.js peakace.js wird auf Edge- Server zwischengespeichert
DNS, Datenbanken etc. außer Acht gelassen, würde das Ganze so aussehen: Origin-Server Request: peakace.js peakace.js übermittelt vom Edge-Server peakace.js wurde auf Edge- Server zwischengespeichert 2. Request (unabhängig v. Nutzer)
denn: Die Top-3-Anbieter (CF, AWS, Akamai) vereinen 89 % aller Kunden; Cloudflare allein wird von 81 % aller auf CDN angewiesenen Websites genutzt (laut W3Techs): Source: https://pa.ag/2U9kvAh
Sobald euer Konto aktiviert ist, könnt ihr eure erste Website/Domain hinzufügen: Fügt euren Domainnamen hinzu - der überall registriert sein kann (vorausgesetzt ihr könnt den DNS bei eurem aktuellen Provider ändern)
Eure sollte in etwa so aussehen: mind. zwei Einträge, einen für die Root-Domain und einen für die www sub-domain, die beide auf die IP-Adresse eures Hosters verweisen: Weiter zur nächsten Seite!
loslegen könnt: Beachtet allerdings, dass dies je nach Registrierstelle und Nameserver bis zu 24 Stunden dauern kann: Nach erfolgreicher NS- Änderung sollte euer CF-Dashboard wie folgt aussehen:
Funktion definiert Trigger für die Ausführung eines Worker- Skripts. In diesem Fall fangen wir die Anfrage ab und senden eine (benutzerdefinierte) Antwort Unsere benutzerdefinierte Antwort ist hier festgelegt - es genügt vorerst: (6) das Request-Objekt zu erfassen (7) die angeforderte URL vom Ursprungsserver abzurufen (8) das Response-Objekt zu erfassen (10) die (unveränderte) Antwort an den Client zurückzuschicken
werdet von der Ansicht "all Workers" auf die folgende Maske weitergeleitet: Gebt eurem Worker einen individuellen Namen Kopiert den soeben getesteten Workers-Code und fügt ihn in den Playground ein
Prüft alles noch einmal live! Verwendet die Funktion „Cache deaktivieren" in den Chrome-Entwicklertools, um euch sicher zu sein, dass ihr die aktuellste Version seht: vs
zum (asynchronen) Abrufen von Ressourcen über HTTP- Anfragen innerhalb eines Worker-Skripts: Source: https://pa.ag/3wpS3YT const response = await fetch(URL, options) Asynchronous tasks, such as fetch, are not executed at the top level in a Worker script and must be executed within a FetchEvent handler.
einer Subdomain gehostet wird, einfach in einen Unterordner auf eurer Hauptdomain "migrieren" - ohne ihn tatsächlich zu verschieben. Great tutorial: https://pa.ag/2Tw7LD8 Angezeigter Inhalt von example.com Anfrage von bastiangrimm.dev gesendet
unliebsame Überraschungen, indem euer Worker eure robots.txt-Datei überwacht: Wie ich die robots.txt-Datei auf meinen Testserver hochgeladen habe Was der, im Hintergrund laufende, Worker verändert hat vs
technicalseo.com Links: bastiangrimm.dev/robots.txt wird mit Googlebot User-Agent String abgefragt. Rechts: die Standardausgabe: Free testing tool: https://technicalseo.com/tools/robots-txt/ Or use…
ermöglicht es, umfassende und leistungsstarke HTML-Parser innerhalb einer Cloudflare-Workers-Anwendung zu bauen: Source: https://pa.ag/2RTpqEt new HTMLRewriter() .on("*", new ElementHandler()) .onDocument(new DocumentHandler())
<meta> (#24-25): Tags an ElementHandler senden, (#9-11): wenn <meta name="robots">, auf "index,nofollow" setzen, (#14-16): bei <head>, weitere Direktive für bingbot hinzufügen:
Dieser Selektor leitet jedes HTML-Element an euren ElementHandler weiter. Mit element.tagName könnt ihr dann feststellen, welches Element übertragen wurde: return new HTMLRewriter() .on("*", new ElementHandler()) .transform(response)
ausschließlich bestimmte Elemente bearbeiten, z. B. einzelne <meta>- Tags. Oder es ist nur die Meta Description, um die es geht... new HTMLRewriter() .on('meta[name="description"]', new ElementHandler()) .transform(response) More on selectors: https://pa.ag/35xw073
von href/src-Attributen an eine Klasse, die (#20): oldURL durch newUrl ersetzt und (#16-18): Https-Konsistenz sicherstellt (falls nötig) Based on: https://pa.ag/35llTSo
an, wie lange der UA wartet, bevor eine Folgeanfrage gesendet wird: The server is currently unable to handle the request due to a temporary overloading or maintenance of the server […]. If known, the length of the delay MAY be indicated in a Retry-After header.
anderen Quellen hinzuzufügen ist simpel; Das Beispiel zeigt wie ein JSON- Feed gelesen, der Input geparst und in die <h1> der Zielseite eingespeist wird:
Ihr wollt nicht alle Bilder "lazy loaden" (z.B. nicht das Hero-Image); und falls ihr iframes nutzt, solltet ihr auch "iframe" an den HTMLRewriter übergeben:
the CF Workers management area, there was a suspicious Worker listed called hang. It had been set to run on any URL route requests to the website:” Source: https://pa.ag/3cFq0Nq After further investigation [by sucuri], it was found that the website was actually loading SEO spam content through Cloudflare’s Workers service. This service allows someone to load external third-party JavaScript that’s not on their website’s hosting server.
https://pa.ag/3cFq0Nq ▪ Der JavaScript-Worker prüft zunächst den User-Agent der HTTP-Anfrage und stellt fest, ob sie Google/Googlebot oder Naver im Stringtext enthält. ▪ Enthält der User-Agent-String eines dieser Schlüsselwörter, stellt man via JavaScript eine Anfrage an die bösartige Domain naverbot[.]live, um SEO- Spam-Links zu generieren, die in die Website des Betroffenen eingefügt werden. ▪ Anschließend fügt der Worker die abgerufenen SEO- Spam-Linkdaten direkt vor dem finalen </body>-Tag in den HTML-Quellcode der infizierten Website ein. ▪ Das bösartige JavaScript kann auch dann getriggert werden, wenn der User-Agent mit einem Crawler korreliert, der gänzlich unabhängig vom Googlebot ist: Naver.