Slide 1
Slide 1 text
Serverless SEO
a.k.a. “Edge SEO” - ein Hands-on-Guide.
Bastian Grimm, Peak Ace AG | @basgr
Slide 2
Slide 2 text
Eurem Management zu beweisen, dass es euer SEO-
Programm braucht
Ich werde euch helfen
Slide 3
Slide 3 text
SEO-ROI durch einfache „Feature Test Deployments”
zu veranschaulichen
Ich werde euch helfen
Slide 4
Slide 4 text
Altsysteme zu optimieren, ohne dabei auf
Entwicklungsressourcen angewiesen zu sein
Ich werde euch helfen
Slide 5
Slide 5 text
Proof-of-Concept-Rollouts einfacher und vor allem
schneller zu realisieren
Ich werde euch helfen
Slide 6
Slide 6 text
Aber wie?
Klingt gut? Perfekt!
Slide 7
Slide 7 text
Cloudflare Worker
Slide 8
Slide 8 text
Warte… was?
Denn: in 2022 braucht ihr für SEO
keinen Serverzugang mehr!
Slide 9
Slide 9 text
Bevor es um Worker geht, müssen wir zunächst über
HTTP-Anfragen - und CDNs sprechen:
Grundlagenarbeit
Slide 10
Slide 10 text
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”
Slide 11
Slide 11 text
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
Slide 12
Slide 12 text
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)
Slide 13
Slide 13 text
pa.ag
@peakaceag
13
CDNs im Überblick
Einige der beliebtesten CDN-Anbieter auf dem Markt:
Slide 14
Slide 14 text
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/
Slide 15
Slide 15 text
Worker verwenden die von Google entwickelte V8
JavaScript-Engine und werden global auf den Edge-
Servern von Cloudflare betrieben.
Doch… was ist ein Worker?
Slide 16
Slide 16 text
Einige der möglichen
Anwendungsfälle:
Slide 17
Slide 17 text
301, 302 – und falls nötig sogar geospezifische Redirects
Weiterleitungen implementieren
Slide 18
Slide 18 text
Hinzufügen/Ändern von X-Robots oder
auch hreflang-Direktiven
HTTP-Header anpassen
Slide 19
Slide 19 text
Überschreibt die Datei vollständig, ergänzt oder entfernt
einzelne Direktiven
robots.txt anpassen
Slide 20
Slide 20 text
Ändert, entfernt oder fügt
Robots-Meta-Annotationen hinzu
Meta-Tags anpassen
Slide 21
Slide 21 text
Erstellt bei Bedarf einzigartige Seitentitel
oder Meta-Descriptions
Title & Description verändern
Slide 22
Slide 22 text
… oder schema.org Mark-up
hreflang implementieren
Slide 23
Slide 23 text
Eure Möglichkeiten sind quasi unbegrenzt – da ihr vollen
Zugriff auf die Request- und Response-Objekte habt!
Seiteninhalte einfügen/entfernen
Slide 24
Slide 24 text
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
Slide 25
Slide 25 text
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
Slide 26
Slide 26 text
Ein praktischer Hands-on-Guide zur Einrichtung und
Nutzung von Cloudflare Workern für SEO
Neugierig? Dann mal los!
Slide 27
Slide 27 text
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)
Slide 28
Slide 28 text
pa.ag
@peakaceag
28
Zu Anfang reicht das kostenlose Konto + $0-Tarif aus:
Zum Ausprobieren
völlig ausreichend…!
Slide 29
Slide 29 text
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!
Slide 30
Slide 30 text
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
Slide 31
Slide 31 text
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)
Slide 32
Slide 32 text
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
Slide 33
Slide 33 text
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:
Slide 34
Slide 34 text
So weit, so gut –
nun zu den Workern…
Slide 35
Slide 35 text
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
Slide 36
Slide 36 text
pa.ag
@peakaceag
36
Cloudflare Workers Playground: cloudflareworkers.com
Testet Cloudflare Workers; erstellt/bearbeitet und verfolgt die Ergebnisse live:
Slide 37
Slide 37 text
pa.ag
@peakaceag
37
Cloudflare Workers Playground: cloudflareworkers.com
Testet Cloudflare Workers; erstellt/bearbeitet und verfolgt die Ergebnisse live:
Slide 38
Slide 38 text
pa.ag
@peakaceag
38
Lasst uns unseren ersten eigenen Worker bauen!
Slide 39
Slide 39 text
pa.ag
@peakaceag
39
Probieren wir es direkt auf dem Workers Playground aus:
Slide 40
Slide 40 text
Lasst uns unseren ersten Worker live einsetzen!
Genug getestet…
Slide 41
Slide 41 text
pa.ag
@peakaceag
41
Richten wir den Worker auf den Edge-Servern von CF ein!
Wählt eure Domain aus via > Workers > Workers verwalten
Slide 42
Slide 42 text
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
Slide 43
Slide 43 text
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
Slide 44
Slide 44 text
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
Slide 45
Slide 45 text
Nun zum spannenden Teil: SEO
So viel zur Theorie…
Slide 46
Slide 46 text
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!
Slide 47
Slide 47 text
301 / 302 / Bulk-Redirects & Proxy-Passthrough
1. Weiterleitungen
Slide 48
Slide 48 text
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:
Slide 49
Slide 49 text
pa.ag
@peakaceag
49
Die Cloudflare Workers Docs: ein idealer Ausgangspunkt
More: https://pa.ag/3gNd8Gn
Slide 50
Slide 50 text
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:
Slide 51
Slide 51 text
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
Slide 52
Slide 52 text
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.
Slide 53
Slide 53 text
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
Slide 54
Slide 54 text
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:
Slide 55
Slide 55 text
Sicherheitsvorkehrungen, Monitoring,
Bereitstellung einer Standarddatei, usw.
2. robots.txt
Slide 56
Slide 56 text
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
Slide 57
Slide 57 text
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
Slide 58
Slide 58 text
„Dynamic Serving”
Aus statisch mach dynamisch
Slide 59
Slide 59 text
pa.ag
@peakaceag
59
Nur für Demonstrationszwecke: UA-basierte Auslieferung
(#16-17): dynamischen Sitemap-Link liefern, wenn UA "googlebot" enthält
Slide 60
Slide 60 text
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…
Slide 61
Slide 61 text
Robots-Meta-Direktiven “auf der Edge” anpassen
3. Robots-Meta-Tags
Slide 62
Slide 62 text
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())
Slide 63
Slide 63 text
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:
Slide 64
Slide 64 text
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
Slide 65
Slide 65 text
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)
Slide 66
Slide 66 text
Natürlich ist es auch möglich, beide Elemente zu
aktualisieren, zu ändern oder auch gänzlich zu ersetzen!
4. Title Tag & Meta Description
Slide 67
Slide 67 text
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
Slide 68
Slide 68 text
pa.ag
@peakaceag
68
Das Aktualisieren von Title & Description ist einfach:
(#10): überschreiben, (#14-22): Meta Description dynamisch anpassen
Elementselektoren - effizient
& nutzerfreundlich zugleich:
Slide 69
Slide 69 text
Vielleicht habt ihr bei eurer letzten Migration welche
übersehen oder vergessen?
5. Links umschreiben
Slide 70
Slide 70 text
Slide 71
Slide 71 text
Informiert Google über lokalisierte Versionen
eurer Domain
6. hreflang implementieren
Slide 72
Slide 72 text
pa.ag
@peakaceag
72
HTTP-hreflang-Direktiven auf der Edge
Hier einmal ein Anwendungsbeispiel, welches HTTP-Header verwendet - was ebenso
gut funktioniert:
Slide 73
Slide 73 text
pa.ag
@peakaceag
73
Überprüft alles, z. B. mit der Chrome-Dev-Konsole:
Network > %URL (disable cache) > Headers > Response Headers
Slide 74
Slide 74 text
pa.ag
@peakaceag
74
Soviel vorweg: X-Robots-Direktiven sind auch möglich...
... dasselbe gilt für X-Robots Rel-Canonicals:
Slide 75
Slide 75 text
Auch „Wartungsarbeiten“ könnt ihr via Cloudflare Worker
aussteuern
7. HTTP 503s ausliefern
Slide 76
Slide 76 text
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.
Slide 77
Slide 77 text
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
Slide 78
Slide 78 text
pa.ag
@peakaceag
78
Ersetzen, ändern oder anhängen - was immer ihr wollt:
Slide 79
Slide 79 text
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:
Slide 80
Slide 80 text
So hat alles angefangen...
9. Web Performance
Slide 81
Slide 81 text
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:
Slide 82
Slide 82 text
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
Slide 83
Slide 83 text
pa.ag
@peakaceag
83
Ausführlicher Guide: Caching von HTML mit CF Workers
More: https://pa.ag/3xk8rdt
Slide 84
Slide 84 text
Denn: “With great power comes great responsibility.”
Wir müssen noch über
Verantwortung sprechen
Slide 85
Slide 85 text
Im Grunde könnt ihr ändern,
was auch immer ihr möchtet.
Slide 86
Slide 86 text
pa.ag
@peakaceag
86
Lesenswerte Zusammenfassung auf ContentKing:
Potenzielle Risiken von „Edge SEO”
Source: https://pa.ag/3xhYUUk
Slide 87
Slide 87 text
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
Slide 88
Slide 88 text
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
Slide 89
Slide 89 text
Die zugrunde liegende Codebasis könnte etwas bspw.
Daten benötigen, die (versehentlich) auf der Edge
überschrieben werden.
Potenzielle Konflikte im Code
Slide 90
Slide 90 text
Zusätzliche Änderungen auf der Edge könnten zu
massivem Debugging Aufwand führen. Es gilt: Sorgfalt
bei Dokumentation & Prozessen ist entscheidend!
Frontend-Bugs
Slide 91
Slide 91 text
Stimmt sämtliche Maßnahmen
immer mit relevanten
Stakeholdern ab!
Slide 92
Slide 92 text
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
Slide 93
Slide 93 text
… ist auch Schatten
Wo Licht ist…
Slide 94
Slide 94 text
pa.ag
@peakaceag
94
Worker können auch mißbräuchlich eingesetzt werden
Source: https://pa.ag/3cFq0Nq
Slide 95
Slide 95 text
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.
Slide 96
Slide 96 text
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
Slide 97
Slide 97 text
pa.ag
@peakaceag
97
Falls ihr euch fragt, wie diese Worker verteilt werden...?
Source: https://pa.ag/3zq0Mwd
Slide 98
Slide 98 text
Verwendet bei Cloudflare zumindest eine Zwei-Faktor-
Authentifizierung
Wo wir schon einmal dabei sind:
Slide 99
Slide 99 text
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