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
PRO

November 07, 2022
Tweet

More Decks by Bastian Grimm

Other Decks in Marketing & SEO

Transcript

  1. Serverless SEO a.k.a. “Edge SEO” - ein Hands-on-Guide. Bastian Grimm,

    Peak Ace AG | @basgr
  2. Eurem Management zu beweisen, dass es euer SEO- Programm braucht

    Ich werde euch helfen
  3. SEO-ROI durch einfache „Feature Test Deployments” zu veranschaulichen Ich werde

    euch helfen
  4. Altsysteme zu optimieren, ohne dabei auf Entwicklungsressourcen angewiesen zu sein

    Ich werde euch helfen
  5. Proof-of-Concept-Rollouts einfacher und vor allem schneller zu realisieren Ich werde

    euch helfen
  6. Aber wie? Klingt gut? Perfekt!

  7. Cloudflare Worker

  8. Warte… was? Denn: in 2022 braucht ihr für SEO keinen

    Serverzugang mehr!
  9. Bevor es um Worker geht, müssen wir zunächst über HTTP-Anfragen

    - und CDNs sprechen: Grundlagenarbeit
  10. 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”
  11. 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
  12. 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)
  13. pa.ag @peakaceag 13 CDNs im Überblick Einige der beliebtesten CDN-Anbieter

    auf dem Markt:
  14. 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/
  15. Worker verwenden die von Google entwickelte V8 JavaScript-Engine und werden

    global auf den Edge- Servern von Cloudflare betrieben. Doch… was ist ein Worker?
  16. Einige der möglichen Anwendungsfälle:

  17. 301, 302 – und falls nötig sogar geospezifische Redirects Weiterleitungen

    implementieren
  18. Hinzufügen/Ändern von X-Robots oder auch hreflang-Direktiven HTTP-Header anpassen

  19. Überschreibt die Datei vollständig, ergänzt oder entfernt einzelne Direktiven robots.txt

    anpassen
  20. Ändert, entfernt oder fügt Robots-Meta-Annotationen hinzu Meta-Tags anpassen

  21. Erstellt bei Bedarf einzigartige Seitentitel oder Meta-Descriptions Title & Description

    verändern
  22. … oder schema.org Mark-up hreflang implementieren

  23. Eure Möglichkeiten sind quasi unbegrenzt – da ihr vollen Zugriff

    auf die Request- und Response-Objekte habt! Seiteninhalte einfügen/entfernen
  24. pa.ag @peakaceag 24 Doch funktioniert das nur mit Cloudflare? Ähnliche

    Anwendungen sind auch bei anderen CDN-Anbietern verfügbar: [email protected] [email protected] Edge Workers Cloudflare Workers
  25. 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
  26. Ein praktischer Hands-on-Guide zur Einrichtung und Nutzung von Cloudflare Workern

    für SEO Neugierig? Dann mal los!
  27. 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)
  28. pa.ag @peakaceag 28 Zu Anfang reicht das kostenlose Konto +

    $0-Tarif aus: Zum Ausprobieren völlig ausreichend…!
  29. 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!
  30. 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
  31. 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)
  32. 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
  33. 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:
  34. So weit, so gut – nun zu den Workern…

  35. 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
  36. pa.ag @peakaceag 36 Cloudflare Workers Playground: cloudflareworkers.com Testet Cloudflare Workers;

    erstellt/bearbeitet und verfolgt die Ergebnisse live:
  37. pa.ag @peakaceag 37 Cloudflare Workers Playground: cloudflareworkers.com Testet Cloudflare Workers;

    erstellt/bearbeitet und verfolgt die Ergebnisse live:
  38. pa.ag @peakaceag 38 Lasst uns unseren ersten eigenen Worker bauen!

  39. pa.ag @peakaceag 39 Probieren wir es direkt auf dem Workers

    Playground aus:
  40. Lasst uns unseren ersten Worker live einsetzen! Genug getestet…

  41. pa.ag @peakaceag 41 Richten wir den Worker auf den Edge-Servern

    von CF ein! Wählt eure Domain aus via > Workers > Workers verwalten
  42. 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
  43. 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
  44. 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
  45. Nun zum spannenden Teil: SEO So viel zur Theorie…

  46. 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!
  47. 301 / 302 / Bulk-Redirects & Proxy-Passthrough 1. Weiterleitungen

  48. 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:
  49. pa.ag @peakaceag 49 Die Cloudflare Workers Docs: ein idealer Ausgangspunkt

    More: https://pa.ag/3gNd8Gn
  50. 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:
  51. 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
  52. 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.
  53. 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
  54. 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:
  55. Sicherheitsvorkehrungen, Monitoring, Bereitstellung einer Standarddatei, usw. 2. robots.txt

  56. 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
  57. 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
  58. „Dynamic Serving” Aus statisch mach dynamisch

  59. pa.ag @peakaceag 59 Nur für Demonstrationszwecke: UA-basierte Auslieferung (#16-17): dynamischen

    Sitemap-Link liefern, wenn UA "googlebot" enthält
  60. 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…
  61. Robots-Meta-Direktiven “auf der Edge” anpassen 3. Robots-Meta-Tags

  62. 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())
  63. 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:
  64. 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
  65. 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)
  66. Natürlich ist es auch möglich, beide Elemente zu aktualisieren, zu

    ändern oder auch gänzlich zu ersetzen! 4. Title Tag & Meta Description
  67. 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
  68. pa.ag @peakaceag 68 Das Aktualisieren von Title & Description ist

    einfach: (#10): <title> überschreiben, (#14-22): Meta Description dynamisch anpassen Elementselektoren - effizient & nutzerfreundlich zugleich:
  69. Vielleicht habt ihr bei eurer letzten Migration welche übersehen oder

    vergessen? 5. Links umschreiben
  70. 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
  71. Informiert Google über lokalisierte Versionen eurer Domain 6. hreflang implementieren

  72. pa.ag @peakaceag 72 HTTP-hreflang-Direktiven auf der Edge Hier einmal ein

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

    Network > %URL (disable cache) > Headers > Response Headers
  74. pa.ag @peakaceag 74 Soviel vorweg: X-Robots-Direktiven sind auch möglich... ...

    dasselbe gilt für X-Robots Rel-Canonicals:
  75. Auch „Wartungsarbeiten“ könnt ihr via Cloudflare Worker aussteuern 7. HTTP

    503s ausliefern
  76. 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.
  77. 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
  78. pa.ag @peakaceag 78 Ersetzen, ändern oder anhängen - was immer

    ihr wollt:
  79. 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:
  80. So hat alles angefangen... 9. Web Performance

  81. 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:
  82. 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
  83. pa.ag @peakaceag 83 Ausführlicher Guide: Caching von HTML mit CF

    Workers More: https://pa.ag/3xk8rdt
  84. Denn: “With great power comes great responsibility.” Wir müssen noch

    über Verantwortung sprechen
  85. Im Grunde könnt ihr ändern, was auch immer ihr möchtet.

  86. pa.ag @peakaceag 86 Lesenswerte Zusammenfassung auf ContentKing: Potenzielle Risiken von

    „Edge SEO” Source: https://pa.ag/3xhYUUk
  87. 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
  88. 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
  89. Die zugrunde liegende Codebasis könnte etwas bspw. Daten benötigen, die

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

    führen. Es gilt: Sorgfalt bei Dokumentation & Prozessen ist entscheidend! Frontend-Bugs
  91. Stimmt sämtliche Maßnahmen immer mit relevanten Stakeholdern ab!

  92. 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]
  93. … ist auch Schatten Wo Licht ist…

  94. pa.ag @peakaceag 94 Worker können auch mißbräuchlich eingesetzt werden Source:

    https://pa.ag/3cFq0Nq
  95. 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.
  96. 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.
  97. pa.ag @peakaceag 97 Falls ihr euch fragt, wie diese Worker

    verteilt werden...? Source: https://pa.ag/3zq0Mwd
  98. Verwendet bei Cloudflare zumindest eine Zwei-Faktor- Authentifizierung Wo wir schon

    einmal dabei sind:
  99. 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]