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.
pa.ag @peakaceag 10 Vereinfachte Darstellung eines Request-Lebenszyklus Euer Computer Euer Browser Datenbankserver (in der Regel) DNS-Server z.B. um Domain<>IP zu übersetzen Webserver aka „Origin-Server”
pa.ag @peakaceag 11 Requests werden bei CDNs über „Edge-Server" geleitet 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
pa.ag @peakaceag 12 Requests werden bei CDNs über „Edge-Server" geleitet 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)
pa.ag @peakaceag 14 Im Sep. 2017 stellte Cloudflare seine „Worker“ vor Welche seit März 2018 öffentlich zugänglich sind Source: https://blog.cloudflare.com/introducing-cloudflare-workers/
Worker verwenden die von Google entwickelte V8 JavaScript-Engine und werden global auf den Edge- Servern von Cloudflare betrieben. Doch… was ist ein Worker?
pa.ag @peakaceag 24 Doch funktioniert das nur mit Cloudflare? Ähnliche Anwendungen sind auch bei anderen CDN-Anbietern verfügbar: Lambda@Edge Compute@Edge Edge Workers Cloudflare Workers
pa.ag @peakaceag 25 Heute aber dreht sich alles um Cloudflare, 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
pa.ag @peakaceag 27 Erstellt ein eigenes (kostenloses) Konto bei cloudflare.com 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)
pa.ag @peakaceag 29 Nun wird euch die aktuelle DNS-Konfiguration angezeigt 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!
pa.ag @peakaceag 30 CF schlägt euch nun alternative Nameserver vor: Nameserver beim aktuellen Provider, in meinem Fall nsX.inwx.de Meine neuen Nameserver mit CF, die stattdessen verwendet werden sollen
pa.ag @peakaceag 31 Von bestehenden Nameservern zu Cloudflare wechseln Bei meinem Hosting-Anbieter sieht das wie folgt aus: Die neuen Nameserver, die ich laut CF stattdessen nutzen soll (siehe vorherige Seite)
pa.ag @peakaceag 32 Auf vorherige Seite zurückkehren, wenn ihr soweit seid: Nameserver beim aktuellen Provider, in meinem Fall nsX.inwx.de Meine neuen Nameserver bei Cloudflare, die stattdessen genutzt werden sollen
pa.ag @peakaceag 33 CF schickt euch eine E-Mail, sobald ihr 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:
pa.ag @peakaceag 35 Ein Worker, in der simpelsten Form: Diese 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
pa.ag @peakaceag 42 So könnt ihr einen Worker hinzufügen Ihr 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
pa.ag @peakaceag 44 Vergleich: links (Original), rechts (mit aktiviertem Worker) 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
Bitte bedenkt, dass alle Skripte / Quellcodes nur als Beispiel dienen. Achtet darauf, dass ihr im tatsächlichen Anwendungsfall wisst, was ihr tut! Nicht für Produktionsserver geeignet!
pa.ag @peakaceag 48 Redirects auf der Edge unter Einsatz der Response-API Beliebige HTTP-Weiterleitung mit Response-Runtime-API ausführen, die u.a. statische Methode "redirect()“ anbietet: Source: https://pa.ag/3gvXYoL let response = new Response(body, options) return Response.redirect(destination, status) oder einfach nur:
pa.ag @peakaceag 51 Ein einfacher Weg, die Umsetzung zu prüfen: Source: https://httpstatus.io Richtig, es handelt sich hierbei tatsächlich um keine Weiterleitung ID ist nicht in redirectMap konfiguriert
pa.ag @peakaceag 52 Fetch-API nutzen für Reverse-Proxy-Funktionalität: Bietet die Möglichkeit 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.
pa.ag @peakaceag 53 return await fetch(“https://example.com”) Einen Blog, der auf 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
pa.ag @peakaceag 54 Überprüfen, ob tatsächlich „auf der Edge“ gearbeitet wird Schaut dazu in einen der Response-Header einer ursprünglich angefragten URL wie z.B. bastiangrimm.dev/redirects/302:
pa.ag @peakaceag 56 Lasst eure Worker für euch arbeiten! Vermeidet 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
pa.ag @peakaceag 60 vs Live-Test & Vergleich von robots.txt mit 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…
pa.ag @peakaceag 62 Darf ich vorstellen... Die HTMLRewriter-Klasse! Der HTMLRewriter 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())
pa.ag @peakaceag 63 Versuchen wir es zunächst mit und (#24-25): Tags an ElementHandler senden, (#9-11): wenn , auf "index,nofollow" setzen, (#14-16): bei , weitere Direktive für bingbot hinzufügen:
pa.ag @peakaceag 64 Auch wenn das bereits klar sein sollte… Prüft mit GSC, ob die durch den CF Worker angepassten Robots- Meta-Direktiven vorhanden sind
pa.ag @peakaceag 65 Wenn ihr mit/an jedem HTML-Element arbeiten wollt... 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)
pa.ag @peakaceag 67 Elementselektoren im HTMLRewriter verwenden Oftmals will man ausschließlich bestimmte Elemente bearbeiten, z. B. einzelne - 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
pa.ag @peakaceag 68 Das Aktualisieren von Title & Description ist einfach: (#10): überschreiben, (#14-22): Meta Description dynamisch anpassen Elementselektoren - effizient & nutzerfreundlich zugleich:
pa.ag @peakaceag 70 HTMLRewriter für - und -Tags (#29-30): Weitergabe 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
pa.ag @peakaceag 72 HTTP-hreflang-Direktiven auf der Edge Hier einmal ein Anwendungsbeispiel, welches HTTP-Header verwendet - was ebenso gut funktioniert:
pa.ag @peakaceag 76 HTTP 503-Status mit Retry-After-Header verknüpfen Retry-After gibt 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.
Falls es noch nicht deutlich geworden sein sollte: Ihr habt die volle Kontrolle über das gesamte HTML - das Einfügen von Content ist dementsprechend einfach. 8. Inhalte einfügen
pa.ag @peakaceag 79 Einen externen Feed (dynamisch) auslesen Inhalte aus anderen Quellen hinzuzufügen ist simpel; Das Beispiel zeigt wie ein JSON- Feed gelesen, der Input geparst und in die der Zielseite eingespeist wird:
pa.ag @peakaceag 81 Natives "Lazy Loading" für Bilder Denkt daran: 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:
pa.ag @peakaceag 82 HTML-Code aus Performancegründen bereinigen Z. B. Entfernen unerwünschter Pre*-Stages, oder Hinzufügen von async/defer bei JS: More clean-up Worker scripts: https://gist.github.com/Nooshu
10 Millionen Requests sind inklusive, jede weitere Million kostet derzeit $0,50. Theoretisch nicht viel, aber bei größeren Setups in jedem Fall mit zusätzlichen Kosten verbunden. Kostenrisiko
Worker könnten in die laufenden Prozesse eingreifen; ihr müsstet zumindest dafür sorgen, dass die Worker Teil eines standardisierten Prozesses werden. PCI-Konformität
Die zugrunde liegende Codebasis könnte etwas bspw. Daten benötigen, die (versehentlich) auf der Edge überschrieben werden. Potenzielle Konflikte im Code
Zusätzliche Änderungen auf der Edge könnten zu massivem Debugging Aufwand führen. Es gilt: Sorgfalt bei Dokumentation & Prozessen ist entscheidend! Frontend-Bugs
Care for the slides? www.pa.ag twitter.com/peakaceag facebook.com/peakaceag Take your career to the next level: jobs.pa.ag [email protected] Bastian Grimm [email protected]
pa.ag @peakaceag 95 Dynamisch erstellte Links zu "Bakkarat-Seiten" “[…] at 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.
pa.ag @peakaceag 96 Die verdächtige "hang" Worker-Injektion im Detail: Source: 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
Care for the slides? www.pa.ag twitter.com/peakaceag facebook.com/peakaceag Take your career to the next level: jobs.pa.ag [email protected] Bastian Grimm [email protected]
bastiangrimm
mathoej
clarasoteras
pojda
aleyda
kapwomd
billiegeena
pavelungr
aledandrea
meemi93
stefanse0
sukhsingh
brad_frost
jensimmons
bcantrill
stephaniewalter
hursman
mclloyd
shpigford
malarkey
lemiorhan
danielanewman
swwweet
akmur