Bastian Grimm, Peak Ace AG | @basgr (Never) change a running system? 10 kleine Impulse mit großer Wirkung 08. November 2022

#1 Signed Exchanges (SXG)

pa.ag @peakaceag 3 SXG erlaubt Google Search, Inhalte vorab zu laden Ähnlich AMP (RIP!) ermöglicht SXG, Ressourcen wie HTML, JS, CSS, Bilder & Fonts direkt aus den SERPs zu pre-fetchen – es entsteht eine „Instant Experience“ nach dem Klick: Quelle: https://pa.ag/3AbSlUg

pa.ag @peakaceag 4 Cloudfare macht euch (auch hier) das Leben leichter! Die technische Implementierung von SXG ist komplex, die 1-Klick-Lösung von CF verspricht daher großes Potenzial und wird die Verbreitung beschleunigen: Quelle: https://pa.ag/3uFs3IW

#2 Sortieren, Paginieren, Filtern, Faceted Navigation etc.

pa.ag @peakaceag 6 Wie viel Sortieren / Filtern ist zu viel? Bitte erst mal sicherstellen, dass die Optionen tatsächlich genutzt werden (Analytics ist dein Freund!) – andernfalls sollten sie eher entfernt / konsolidiert werden.

pa.ag @peakaceag 7 Artikel pro Seite einstellen – wirklich? Hier wird für jedes Kategorie-Listing zusätzlich die 3-fache URL-Anzahl generiert – ein Crawling-Albtraum. Und oft, wenn nicht gesteuert, auch noch Duplicate Content: Client-side JavaScript würde zumindest Crawling- und Indexierungsprobleme lösen – fraglich ist jedoch, ob diese Funktion tatsächlich genutzt wird.“ objectsPerPage=80

… eigentlich nicht wirklich SEO-Probleme.

pa.ag @peakaceag 9 Paginierung (in großen Shops) ist alles andere als trivial! Empfehlung zur „passenden“ Paginierung (je Zielsetzung) von audisto: Quelle: https://pa.ag/3cjlgev For lists with equally important items choose the logarithmic or the Ghostblock pagination (equal PR across all pagination & item pages). For lists with a small number of important items use the “Link first Pages”, “Neighbors”, “Fixed Block” pagination.”

noindex wird zu noindex, nofollow – was denn nun? It depends…! Und wie nun?

pa.ag @peakaceag 11 Warum dein Onlineshop keine Paginierung braucht Hervorragendes Write-up vom Kollegen Stefan Vorwerk: Quelle: https://pa.ag/3r1s8pn 1. Solange Du die Chance hast, Suchmaschinen Deine Paginierung komplett vorzuenthalten, solltest Du diesen Weg gehen und die Links dahin maskieren […] 2. Wenn das nicht möglich ist, verzichte auf Implementierungen, die auf das Canonical setzen. […] 3. Letztendlich bleibt Dir als mittel- fristige Lösung das „noindex, follow“ […] Idealerweise bekommt ihr es über eure Taxonomie so gelöst, dass alle (relevanten) Produktdetailseiten mindestens 1x von der jeweils ersten Seite einer Kategorie/Unterkategorie verlinkt sind.

pa.ag @peakaceag 12 Auch ein SEO-Klassiker: p=1 für die erste Seite im Pager Verlinken aller Seite-1-Pager mit ?p=1 – diese Seite steht hier aber auf „noindex“, denn die „richtige“ Seite 1 funktioniert ohne URL-Parameter: ?p=1 Super ärgerlich, denn hier geht durch die aktive Verlinkung auf eine „noindex“-URL viel Ranking-Potenzial verloren

pa.ag @peakaceag 13 Exit-Strategie für paginierte Kategorien nicht vergessen Kategorien mit hoher Fluktuation erfordern eine Strategie für paginierte Seiten (z. B. wenn es nicht genügend Produkte für eine 2. Seite gibt). Ca. 3.065 Ergebnisse (0,28 Sekunden)

pa.ag @peakaceag 14 Faceted Navigation: Kopfschmerzen inklusive! „Eine Faceted Search ist eine Eingrenzung der Auswahl hinsichtlich verschiedener Eigenschaften, Charakteristika und / oder Werte.” Würde Zalando all diese Filteroptionen zu crawlbaren URLs machen, würde dies zu Millionen und Abermillionen von nutzlosen URLs führen. Nur das Crawlen und Indexieren von URLs, die auf Keywords und Keyword- Kombinationen mit tatsächlichem Suchbedarf abzielen, sollte erlaubt sein. Die interne Kannibalisierung von Keywords ist dabei besonders zu beachten.

pa.ag @peakaceag 15 Schönes Beispiel: Boots – dort nutzt man Client-side JS JavaScript, z. B. für Filteroptionen, empfinden Nutzer häufig als schneller – die wahrgenommene Ladezeit nimmt durch eine gute Client-side-JS-Lösung i. d. R. ab. /shaving-grooming/mens-razors/beardcare /shaving-grooming/mens-razors/beardcare #facet:-104653

pa.ag @peakaceag 16 PRG: „Post-Redirect-Get”-Pattern für SEO nutzen Wenn Links nicht wirklich Links sind, sondern ein

pa.ag @peakaceag 17 PRG: „Post-Redirect-Get”-Pattern für SEO nutzen Wenn Links nicht wirklich Links sind, sondern ein Div, das ein Formular via JS übermittelt: Wird eine der Sortieroptionen (keine s, sondern einfache

s) angeklickt, reagiert ein JS Event Listener und übermittelt einen POST-Request an einen PHP- Controller, der – basierend auf den POST-Daten – anschließend via 303 an sein endgültiges Ziel (List View) weitergeleitet wird. Dieses Ziel gilt es vorab auf noindex zu setzen.“

#3 Interne Suche

pa.ag @peakaceag 19 Wie sollte ich meine (interne) Suche aussteuern? Crawlen und Indexieren von Suchergebnissen verhindern. SERP in SERP führt i. d. R. zu schlechter User Experience / schlechten Signalen – das sieht Google genauso: 1. Crawling & Indexierung verhindern durch POST- Request & noindex 2. Außerdem: eine Goldmine für Keyword-Potenziale

#4 Wiederkehrende Inhalte aussteuern/nachladen

Wie verhindere ich, dass bspw. rechtliche Hinweise und Versandinformationen als Boilerplate gewertet werden und sich ggf. negativ auswirken?

pa.ag @peakaceag 22 Wiederkehrende Elemente auslagern oder nachladen Exakt gleiche Lieferinformationen sowie Kund:innenvorteile auf der Produktseite überdenken; einfaches JS-Nachladen ist u. U. nicht mehr ausreichend:

pa.ag @peakaceag 23 Was sind CSS-Selektoren und wie funktionieren sie? ::before erzeugt ein Pseudoelement – das erste Resultat des gematchten Elements. Quelle: https://pa.ag/2QRr9aH

pa.ag @peakaceag 24 Content im HTML-Markup, hier in einem

Tag Content im CSS-Selektor – hier z. B. ::before

pa.ag @peakaceag 25 Die GSC-Vorschau zeigt euch, wie es aussehen würde Googlebot scheint dies genauso zu handhaben wie Chrome auf Desktop / Smartphone: das gerenderte DOM bleibt unverändert (zu erwarten, da Pseudoklasse). HTML CSS

pa.ag @peakaceag 26 Content innerhalb der CSS-Selektoren wird nicht indexiert Egal, ob Googlebot die URL rendert oder nicht – für die Testphrase, die sich im CSS ::before Selektor befindet, wird die URL nicht gefunden. Content in CSS-Selektoren wie ::before wird nicht indexiert Content im HTML-Markup wird wie erwartet gefunden und indexiert

#5 Verwaltung mehrerer Versionen eines Produkts (Farbe / Größe) Problemstellung: Die Nachfrage ist zu gering, als dass alle PDPs (in all ihren Kombinationen) indexiert werden sollten. Mögliche Lösung: Konsolidierung zu einem Standardprodukt wann immer möglich (z. B. die umsatzstärkste Farbe / Größe).

pa.ag @peakaceag 28 Exakt gleicher Laufschuh, nur in einer anderen Farbe allbirds nutzt hier diverse individuelle URLs für verfügbare Kombinationen: Nicht genug Benutzer suchen nach „allbirds Tree Dashers black" bzw. „blue". Die Nachfrage ist zu gering, als dass die PDPs (in all ihren Kombinationen) indexiert werden sollten. mens-tree-dashers-buoyant-blue mens-tree-dashers

pa.ag @peakaceag 29 Die Kanonisierung auf ein Produkt kann die Lösung sein Ein Canonical Tag ist nur ein Hinweis, keine Direktive – Google kann dieses ignorieren. Daher ist besondere Vorsicht bei der Verwendung von Canonical Tags geboten: ▪ Absolute URLs mit Protokoll und Subdomains nutzen ▪ Rel-canonical-Ziele müssen tatsächlich funktionieren, d.h. keine HTTP 4XX, sondern immer eine HTTP 200 OK Antwort liefern ▪ Keine Canonical-Tag-Ketten, Google ignoriert diese! ▪ Konsistenz wahren: immer das gleiche Protokoll (HTTP vs. HTTPS), entweder mit oder ohne www und die konsequente Verwendung von Slashes am Ende der URLs ▪ Es darf nur eine rel-canonical-Annotation pro URL geben – EINE! ▪ etc.

pa.ag @peakaceag 30 Könnt ihr euch bspw. anschauen bei UnderArmour: ?dwvar_1373565_color=001

pa.ag @peakaceag 31 Salomon reduziert den URL-Umfang erheblich Crawl-Budget- und Link-Equity-Vorteile durch Konsolidierung einer URL! Salomons PDPs profitieren von starken Rankings. product/speedcross-6-wide-lg9372.html #color=69571 product/speedcross-6-wide-lg9372.html #color=73486

pa.ag @peakaceag 32 Pro Produkt nur eine URL verwenden! Ein dezidiertes Produktverzeichnis – unabhängig von der jeweiligen Kategorie – ist in den meisten Fällen die beste Lösung; zudem erleichtert es häufig die Auswertung: Alternativ: Alle Produkte im Root aufhängen Achtung: Die Verwendung von Canonical Tags oder auch noindex für Produkte, die mehrfach existieren, ist möglich – im Hinblick auf das Crawling jedoch wenig effizient.

#6 Verwaltung von alten / (vorübergehend) nicht verfügbaren Produkten Problemstellung: PDPs für Produkte, die (vorübergehend) nicht auf Lager sind, können zu schlechten Engagement- Metriken führen (hohe Bounce Rate etc.) Mögliche Lösung: Implementierung der OOS-Strategie (Redirects, Info-Layer, vollständiges Deaktivieren (410) etc.)

pa.ag @peakaceag 34 Nicht vorrätige Artikel steuern – aber nicht so wie M&S! Sind sie nur temporär nicht verfügbar (für wie lange?) oder werden sie nie wieder erhältlich sein? Außerdem: Welche Art von alternativen Versionen gibt es? Ca. 233.000 Ergebnisse (0,23 Sekunden) M&S hält sämtliche „Nicht-auf-Lager“-Seiten indexiert:

pa.ag @peakaceag 35 Möglichkeiten, mit OOS-Situationen umzugehen? Für nicht lieferbare Produkte gibt es nicht DIE eine Lösung. Häufig läuft es auf eine Kombination heraus. Redirect Interne Suche Redirect Nachfolger Redirect Ähnliche Produkte / andere Farbe bzw. Größe 410 (404) Nur, falls wirklich gelöscht werden soll! Redirect Gleiches Produkt, aber andere Farbe Noindex Newsletter / Lead Gen (temp.) OOS- Handling Dynamisches Info-Layer verwenden, um Besucher über eine Weiterleitung zu alternativem Artikel zu informieren.

pa.ag @peakaceag 36 Achtet auf eine wettbewerbsfähige Anzahl von Artikeln Kategorien mit bspw. nur einem Artikel – wie hier für „Gin Vanille Aroma“ – werden kaum gegen den Wettbewerb mit >250 Artikeln ankommen: Listing Pages / Kategorien, die nicht eine Mindestanzahl von Artikel aufweisen, sollten (temporär) von der Indexierung ausgeschlossen werden. VS

#7 Auffindbarkeit: XML-Sitemaps

pa.ag @peakaceag 38 Nur indexierbare URLs mit 200er-Statuscode hinzufügen! Keine Weiterleitungen, keine URLs, die via robots.txt geblockt sind, keine URLs mit abweichenden (nicht selbst-referenzierenden) Canonical Tags etc. ▪ Screaming Frog ▪ Mode > List ▪ Download XML-Sitemap 20,72 %

pa.ag @peakaceag 39 Google wird nicht müde, an den Sitemap Ping zu erinnern “Pinging a sitemap is a bit different than just providing it in the robots.txt […] If you're keen on having new content indexed quickly, that's a good practice.” [John Mueller] Quellen: https://pa.ag/3DY3eOE & https://pa.ag/3UqdaFY

pa.ag @peakaceag 40 XML Sitemaps für hreflang? Der wohl einfachste und beste Weg, internationale Sitemaps zu bauen/pflegen: Mehr: https://www.hreflangbuilder.com

#8 Web Performance: maximale Lade- geschwindigkeit Problemstellung: Häufig sind v. a. mobile Angebote noch immer extrem langsam; doch besteht nicht nur diesbezüglich Optimierungsbedarf: Fast kein Onlineshop ist vollständig „ausoptimiert“ – Bilder, externe Schriftarten, JavaScripts u. v. m. bieten Chancen auf Performance-Zugewinne. Mögliche Lösung: Facettenreiches Thema, das zahlreiche Optimierungsmöglichkeiten mit sich bringt, die zu großen Teilen von Infrastruktur, Shopsystem etc. abhängig sind – nur gemeinsam mit IT-Team erfolgreich lösbar.

Die Ladezeit wirkt sich erheblich auf die generelle User Experience aus. Performance = User Experience

pa.ag @peakaceag 43 Googles Core Web Vitals als „offizieller“ Ranking-Faktor Die seit 2020 gültigen Metriken konzentrieren sich auf drei Aspekte der User Experience – Laden, Interaktivität und visuelle Stabilität – und beinhalten folgende Schwellwerte: Quelle: https://pa.ag/3irantb Google evaluiert, wie User die Interaktion mit einer Webseite wahrnehmen. Dafür wird ein Set an Metriken verwendet – die Core Web Vitals. Fällt die User Experience diesen Metriken zufolge negativ aus, kann das dazu führen, dass Google die entsprechende Webseite schlechter rankt.

pa.ag @peakaceag 44 Das Thema Metriken bleibt spannend… Öfter mal was Neues, bspw. aktuell: „Interaction to Next Paint (INP)” Quelle: https://web.dev/inp/ Where INP considers all page interactions, First Input Delay (FID) only accounts for the first interaction. It also only measures the first interaction's input delay, not the time it takes to run event handlers, or the delay in presenting the next frame.

pa.ag @peakaceag 45 Ruft eine beliebige Seite auf, um sie in Chrome zu testen „CTRL+SHIFT+I“, „Lighthouse“-Tab öffnen, Einstellungen anpassen & Report generieren #1 #2 #3 #4 Lighthouse immer nur in Chromes Inkognito-Modus verwenden! #5 #6

pa.ag @peakaceag 46 Gesamtwert (zwischen 0 – 100) je nachdem welche Kategorien ausgewählt wurden Detaillierte Aufschlüsselung der Performance- Erhebung anhand der gängigen Metriken, wie z. B. FCP / FMP Filmstreifenansicht mit verschiedenen Browser Paint Timings Import / Export sowie diverse „pretty print“- & JSON-Datenformate

pa.ag @peakaceag 47 Bilder machen über 60 % des gesamten Web Traffics aus Pro URL werden im Durchschnitt zwischen 875 KB und 1 MB an Bildern übertragen! Quelle: https://pa.ag/2xwHOFN

pa.ag @peakaceag 48 13,4 % der mobilen Websites haben Homepages > 5MB…! Echt jetzt…?! Quelle: https://pa.ag/2OQdEqu

pa.ag @peakaceag 49 Das 1x1 der Bildoptimierung: Setzt sie auf Diät! tinyPNG/JPG: Komprimieren von Bildern, Entfernen von Metadaten, sowie u.a. API- Zugriff, div. Plug-ins (z. B. WP) und direkte Photoshop-Integration Quelle: http://tinypng.com | http://tinyjpg.com

Wie kriege ich meine (Listing-) Seiten schneller?

pa.ag @peakaceag 51 Bilder laden, wenn sie benötigt werden: loading = lazy Performance Benefits gepaart mit SEO-Freundlichkeit (und das alles ohne JS) Tipp: Funktioniert übrigens auch für Quelle: https://pa.ag/2YQL9gE Aktuelle Versionen von Chrome, Firefox und Edge bereits mit entsprechender Unterstützung:

pa.ag @peakaceag 52 Sagt Hallo zu AVIF – verfügbar ab Chrome 85 & Firefox 80 Von der „Alliance for Open Media“ in Zusammenarbeit mit Google, Cisco und Xiph.org als lizenzfreies Open-Source-Bildformat entwickelt Quelle: https://pa.ag/3gK9Gdk AV1 (.avif) ist ein stark komprimiertes Bildformat. Netflix zufolge ist .avif den Formaten JPEG, PNG und WebP hinsichtlich des Verhältnisses von Bildqualität zu Größe der komprimierten Datei überlegen.

pa.ag @peakaceag 53 seoday.de könnte ~75 % an Bild-Traffic einsparen Bessere Komprimierung in Kombination mit modernen, responsiven Bildern und Formaten (AVIF) für deutliche schnellere Ladezeiten:

pa.ag @peakaceag 54 Auch noch recht frisch und neu: fetchpriority=high WebPageTest.org hat ein neues „Experiments“ Feature – damit könnt ihr solche Sachen testen, OHNE Codeänderungen auf eurer Website vorzunehmen: Quelle: https://pa.ag/3NJrbfO

pa.ag @peakaceag 55 Nutzt die “Performance Budgets” in Lighthouse LightWallet hilft bei Budgetieren & der Überwachung: (z.B. Dateigrößen, Anzahl von Anfragen und natürlich Performance Metriken inkl. Budgets) Source: http://pa.ag/2WxNjQK "budgets": [ { "cpuThrottling": 1, "connectionType": "wifi", "pageWeight": [ { "resourceType": "script", "budget": 300 }, { "resourceType": "stylesheet", "budget": 50 } ], "timings": [ { "metric": "timeToInteractive", "budget": 5000, "tolerance": 1000 }, { "metric": "firstMeaningfulPaint", "budget": 2000, "tolerance": 500 } ] } ]

pa.ag @peakaceag 56 Ihr braucht Inspiration für Start- & Schwellwerte? Der “Performance Budget Calculator” ist ein guter Einstieg in das Thema: More: http://bit.ly/perf-budget-calculator

pa.ag @peakaceag 57 ▪ Content-First-Ansatz verfolgen: schrittweise Verbesserung, Above-the-Fold-Inhalte priorisieren: 14 kB (komprimiert) ▪ Größe reduzieren: effektive Zwischenspeicherung- und Komprimierungsprozesse implementieren ▪ Wann immer möglich, asynchrone Requests verwenden ▪ CSS- und JavaScript-Dateien verkleinern ▪ Schlankes Markup: keine Kommentare, Inline CSS / JS nur dort verwenden, wo es notwendig oder sinnvoll ist ▪ Bilder optimieren: JPGs & PNGs optimieren (Metadaten etc.), passende Größen anfragen & neue Formate testen ▪ Browser Reflow und Repaint verkürzen Client-side / Frontend: #webperf-Hausaufgaben Verwendet zur Überprüfung unsere Checkliste auf SlideShare: Alle Slides findet ihr auf SlideShare: http://pa.ag/iss18speed

#9 Inhalte löschen „Was, wenn ich Kategorien umbenennen / löschen muss?“

pa.ag @peakaceag 59 Ganz wichtig: 301-Redirects nicht vergessen! Falls der Kategoriename „automatisch“ mit dem URL-Slug verbunden ist, unbedingt auf den „neuen“ Namen weiterleiten; beim Löschen immer weiterleiten. Es gilt: Wurde eine (alte) URL irgendwann einmal extern verlinkt, so hat der interne Redirect (bspw. alter Kategoriename > neuer Kategoriename) nunmehr Bestand für die Ewigkeit.“

pa.ag @peakaceag 60 Redirects & andere Header – Bulk Test mit httpstatus.io HTTP-Statuscodes (Fehler, Redirects etc.) in großen Mengen testen – kostenlos! Schaut es euch an: https://httpstatus.io/

Denn: Mehrere HTTP-Anfragen verschwenden wertvolles Crawl-Budget und sind zudem langsamer! Weiterleitungsketten auflösen – v. a. auf großen Websites

#10 Google Analytics 4 E-Commerce Tracking

pa.ag @peakaceag 63 GA 4 E-Commerce Setup erfordert mehr strategische Planung als jenes für Universal Analytics Quelle: https://pa.ag/3S0AXvz ▪ Standard GA 4 E-Commerce Funnel wird der Website / dem Business-Modell selten gerecht ▪ Granulare Vorab-Planung notwendig: Welche E-Commerce-Daten werden für ▪ Reporting ▪ Identifizierung von Optimierungspotenzialen ▪ Strategie & ROI benötigt? ▪ Hohe Flexibilität bei benutzerdefinierter Implementierung sollte ausgenutzt werden durch „custom Parameter“

pa.ag @peakaceag 64 Tiefgehende Insights beginnen in der BigQuery Google-Analytics-4-E-Commerce-Daten per nativem Konnektor in das leistungsstarke BigQuery Data Warehouse exportieren und via SQL analysieren. Quelle: https://pa.ag/3r7OPbn E-Commerce Analytics in BigQuery ▪ GA 4 BigQuery Export Schema (Link) ▪ BigQuery „Cookbook“ bietet vordefinierte Rezepte für grundlegende bis komplexe Analysen (siehe links; Link) ▪ Event Timestamps ermöglichen Analysen in der Logik von „Wie lange dauert es von Aktion X bis Aktion Y für Nutzersegment Z?“. ▪ Datenanreicherung und Analyse mit Offline-Daten (CLTV…) via übergreifendem Identifier wie z. B. der Customer ID (Datenschutz!)

pa.ag @peakaceag 65 E-Commerce ist auch Content-Analyse! Die Faktoren Copy und Design haben großen Einfluss auf den Umsatz / ROI Gruppierung von Content Für Seitentypen (Kat., PDP, FAQ, Hilfe…) Content-Gruppe, Content ID und Content-Typ zur zusammenfassenden Analyse nutzen. Identifizierung von Produktseiten mit Optimierungspotenzial Produktseiten nach hoher Interaktionsrate aber niedriger durchschnittlicher Interaktionsdauer analysieren. (=Produkt ist relevant für User, aber nicht überzeugend präsentiert?) Content-Attribution Attributionsanalysen in der BigQuery auf Basis von Content-Typen anstelle von Marketingkanälen durchführen („Welche Art von Content trägt wie viel zur Conversion bei?“). Dringende Empfehlung: Nutzt entweder eine interne Auswertung oder z. B. Universal Analytics parallel zu GA4. Es gibt noch einige Bugs, daher besser doppelt messen.

#BONUS Edge SEO: Testen vor der Implementierung

pa.ag @peakaceag 67 Im September 2017 stellte Cloudflare seine „Worker” vor CF Worker nutzen die von Google entwickelte V8-JS-Engine und laufen global auf Cloudflares Edge-Servern. Ein typisches Worker-Skript wird in <1ms ausgeführt! Quelle: https://pa.ag/3otrFMK

Herausforderungen und Einschränkungen gängiger CMS- und E-Commerce- Plattformen überwinden

Worker sind relativ unkompliziert, einfach zu implementieren und erfordern lediglich einen minimalen Entwicklungsaufwand Ideal für Proof-of-Concept- Rollouts und validieren von Business Cases

pa.ag @peakaceag 70 Volle Kontrolle über HTML-Response = einfach, neue Inhalte / Dinge zu testen

pa.ag @peakaceag 71 Der vollständige Talk als Episode im Podcast ~45 Minuten Deep Dive inkl. Beispielen u.v.m. Quelle: https://pa.ag/3DKCmjK

An den Folien interessiert? www.pa.ag twitter.com/peakaceag facebook.com/peakaceag Bereit für den nächsten Karriereschritt? jobs.pa.ag https://pa.ag/seoday22 Bastian Grimm bg@pa.ag