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.

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: Lambda@Edge Compute@Edge 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 hi@pa.ag Bastian Grimm bg@pa.ag
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 hi@pa.ag Bastian Grimm bg@pa.ag