Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Serverless SEO / Edge SEO - SEO-DAY 2021 Cologne

Serverless SEO / Edge SEO - SEO-DAY 2021 Cologne

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.

Bastian Grimm

November 07, 2022
Tweet

More Decks by Bastian Grimm

Other Decks in Marketing & SEO

Transcript

  1. 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”
  2. 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
  3. 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)
  4. 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/
  5. Worker verwenden die von Google entwickelte V8 JavaScript-Engine und werden

    global auf den Edge- Servern von Cloudflare betrieben. Doch… was ist ein Worker?
  6. Eure Möglichkeiten sind quasi unbegrenzt – da ihr vollen Zugriff

    auf die Request- und Response-Objekte habt! Seiteninhalte einfügen/entfernen
  7. 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
  8. 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
  9. 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)
  10. pa.ag @peakaceag 28 Zu Anfang reicht das kostenlose Konto +

    $0-Tarif aus: Zum Ausprobieren völlig ausreichend…!
  11. 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!
  12. 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
  13. 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)
  14. 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
  15. 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:
  16. 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
  17. pa.ag @peakaceag 41 Richten wir den Worker auf den Edge-Servern

    von CF ein! Wählt eure Domain aus via > Workers > Workers verwalten
  18. 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
  19. pa.ag @peakaceag 43 Bestätigt die die Live-Schaltung und weißt eine

    Route zu Geht zurück zu > Workers > Route hinzufügen 1 2
  20. 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
  21. 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!
  22. 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:
  23. pa.ag @peakaceag 50 Überblick verschiedener Implementierungsarten (#18): 302-Redirect, (#22): 301-Redirect,

    (#26): ein Reverse-Proxy-Aufruf und (#31-36): mehrfache Redirects via RedirectMap:
  24. 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
  25. 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.
  26. 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
  27. 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:
  28. 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
  29. pa.ag @peakaceag 57 “Disallow: /“ in robots.txt-Datei verhindern (#5-6): Parameter

    festlegen, (#15-16): bei robots.txt 200, Inhalt lesen, (#19-24): ersetzen, wenn "global disallow" existiert, (#27-29): "allow all" ausgeben, wenn Datei nicht existiert
  30. 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…
  31. 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())
  32. pa.ag @peakaceag 63 Versuchen wir es zunächst mit <head> und

    <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:
  33. 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
  34. 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)
  35. Natürlich ist es auch möglich, beide Elemente zu aktualisieren, zu

    ändern oder auch gänzlich zu ersetzen! 4. Title Tag & Meta Description
  36. pa.ag @peakaceag 67 Elementselektoren im HTMLRewriter verwenden Oftmals will man

    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
  37. pa.ag @peakaceag 68 Das Aktualisieren von Title & Description ist

    einfach: (#10): <title> überschreiben, (#14-22): Meta Description dynamisch anpassen Elementselektoren - effizient & nutzerfreundlich zugleich:
  38. pa.ag @peakaceag 70 HTMLRewriter für <a>- und <img>-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
  39. pa.ag @peakaceag 72 HTTP-hreflang-Direktiven auf der Edge Hier einmal ein

    Anwendungsbeispiel, welches HTTP-Header verwendet - was ebenso gut funktioniert:
  40. pa.ag @peakaceag 73 Überprüft alles, z. B. mit der Chrome-Dev-Konsole:

    Network > %URL (disable cache) > Headers > Response Headers
  41. 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.
  42. 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
  43. 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 <h1> der Zielseite eingespeist wird:
  44. 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:
  45. 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
  46. 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
  47. 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
  48. Die zugrunde liegende Codebasis könnte etwas bspw. Daten benötigen, die

    (versehentlich) auf der Edge überschrieben werden. Potenzielle Konflikte im Code
  49. Zusätzliche Änderungen auf der Edge könnten zu massivem Debugging Aufwand

    führen. Es gilt: Sorgfalt bei Dokumentation & Prozessen ist entscheidend! Frontend-Bugs
  50. 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.
  51. 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 </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.
  52. pa.ag @peakaceag 97 Falls ihr euch fragt, wie diese Worker

    verteilt werden...? Source: https://pa.ag/3zq0Mwd