SEO, Performance und Qualität

SEO, Performance und Qualität

0:00 SEO und Ladezeit landen in Projekten fast immer am Ende der Liste — als etwas, das man macht, wenn der Shop steht. Das ist eine teure Reihenfolge. Denn beides entsteht aus Entscheidungen, die im Theme und im Katalog längst gefallen sind. In diesem Modul sehen wir uns an, was Shopify selbst erzeugt und was Sie pflegen müssen, warum ein Relaunch ohne Weiterleitungsliste Rankings kostet, welche Kennzahlen zählen — und wie man verhindert, dass der Shop über die Jahre langsam unbemerkt verfällt.

SEO, Performance und Qualität

0:28 Vier Kapitel, und sie bauen aufeinander auf. Zuerst die Grundlagen der Auffindbarkeit: Titel, Beschreibungen, Sitemap, robots.txt — und die klare Trennung, was die Plattform macht und was Sie. Dann der Relaunch mit seinen Weiterleitungen, dem Thema, das die meisten Rankings kostet. Danach Performance, mit konkreten Kennzahlen und einem Schwellenwert, den Shopify selbst nennt. Und zum Schluss die Qualitätskontrolle im laufenden Betrieb.

0:54 In der Übung planen wir für Steglicht einen Theme-Wechsel — mit allem, was dabei schiefgehen kann.

Indexierbare Seiten und URLs

1:01 Beginnen wir mit der Arbeitsteilung. Erstaunlich viel erledigt Shopify selbst — und genau deshalb lohnt es sich zu wissen, was übrig bleibt. Jede Seite trägt einen Seitentitel und eine Meta-Beschreibung; gepflegt werden sie in der Vorschau des Sucheintrags, also direkt dort, wo man auch sieht, wie es bei Google aussieht.

1:21 Zwei Dinge erzeugt Shopify dagegen selbst: Jeder Shop generiert automatisch eine sitemap.xml, und jeder Shop hat eine robots.txt, die für Suchmaschinenoptimierung bereits optimiert ist. Das ist bequem und es nimmt Ihnen eine ganze Klasse von Fehlern ab. Es bedeutet aber auch, dass Eingriffe an dieser Stelle gut begründet sein sollten.

1:41 Diese Tabelle ist eine Zuständigkeitsliste, und die letzte Zeile ist die wichtigste. Sitemap und robots.txt kommen von der Plattform, die Sitemap aktualisiert sich sogar von selbst, wenn Sie etwas anlegen. Seitentitel und Meta-Beschreibung pflegen Sie — mit bis zu siebzig Zeichen im Titel und rund hundertsechzig empfohlenen Zeichen in der Beschreibung.

2:02 Und dann die Weiterleitungen: selbst angelegt, nie automatisch. Diesen Satz sollten Sie sich merken, wir kommen im nächsten Kapitel ausführlich darauf zurück. Die Sitemap enthält übrigens Produkte samt Hauptbild, Seiten, Kollektionen und Blogbeiträge. Zwei Dinge, die regelmäßig schiefgehen. Erstens: Ein Shop im privaten Modus lässt die Sitemap nicht auslesen — auch nicht von Google.

2:26 Wer den Passwortschutz aus Vorsicht anlässt, wundert sich dann über ausbleibende Indexierung. Zweitens die robots.txt: Das Bearbeiten der Datei robots.txt.liquid gilt ausdrücklich als nicht unterstützte Anpassung. Shopify warnt wörtlich, dass falsche Nutzung den gesamten Traffic kosten kann, und der Support hilft bei dieser Datei nicht. Das ist eine bemerkenswert deutliche Ansage.

2:51 Die Verantwortung bleibt vollständig im Haus. Der erste Punkt ist der ärgerlichste, weil er so einfach zu vermeiden wäre: Der Passwortschutz bleibt nach dem Start aktiv, und der Shop bleibt unsichtbar. Das passiert häufiger, als man denkt, besonders bei Shops mit mehreren Beteiligten. Der zweite ist Kosmetik mit Wirkung: Seitentitel über siebzig Zeichen werden abgeschnitten.

3:14 Der dritte ist eine verschenkte Chance — bleibt die Meta-Beschreibung leer, baut Google sich selbst eine, und die ist selten so gut wie Ihre. Und der vierte ist der gefährlichste: an der robots.txt schrauben, um ein Symptom zu beheben.

Relaunch, Mehrsprachigkeit und Rich Results

3:28 Jetzt zu dem Kapitel, das bei jedem Relaunch über Erfolg oder Rückschlag entscheidet — und das fast immer zu spät bearbeitet wird. Hier ist die wichtigste Tatsache dieses Moduls: Shopify legt beim Ändern eines Handles keine Weiterleitung an. Wer eine Produkt- oder Seitenadresse ändert, muss die Weiterleitung selbst erstellen.

3:47 Und es kommt noch eine Feinheit dazu, die viele Stunden Fehlersuche kostet: Eine Weiterleitung greift nur, wenn die alte Adresse einen 404 liefert. Auf einer Seite, die noch funktioniert, wirkt sie schlicht nicht. Wer also vorsorglich umleitet, während die alte Seite noch lebt, wundert sich, dass nichts passiert. Vier Grenzen, die man vor einem Relaunch kennen sollte. Hunderttausend Weiterleitungen je Shop, mit Shopify Plus zwanzig Millionen — das ist für die allermeisten reichlich.

4:17 Interessanter sind die Sperren: Adressen, die mit Pfaden wie apps, cart, orders oder shop beginnen, lassen sich nicht umleiten. Ebenso wenig die festen Pfade products und collections. Wer seine Liste aus einem Crawl des alten Shops erzeugt, hat diese Pfade mit drin und wundert sich über Fehler. Und die gute Nachricht in der Fußzeile: Weiterleitungen lassen sich per CSV importieren. Für einen Relaunch ist das der einzig tragfähige Weg.

4:43 Shopify nennt für Themes drei SEO-Themen ausdrücklich, und diese Auswahl ist selbst eine Information. Erstens SEO-Metadaten, damit Suchmaschinen die Kerninformationen finden. Zweitens robots.txt, um den Zugriff der Crawler zu steuern. Drittens die hreflang-Auszeichnung für regionalisierte und übersetzte Inhalte — die brauchen Sie, sobald Sie einen zweiten Markt eröffnen, und darum geht es in Modul vierzehn.

5:08 Alles Weitere hängt am jeweiligen Theme. Das ist der praktische Punkt: Bei einem Theme-Wechsel ist all das erneut zu prüfen, nicht mitgenommen. Der erste Punkt ist der teuerste Fehler dieses Moduls: Beim Relaunch wird die Weiterleitungsliste erst nach dem Umschalten erstellt. In der Zwischenzeit sammelt Google 404-Seiten ein.

5:28 Der zweite ist die Falle, die wir eben besprochen haben — eine Weiterleitung, die angelegt wird, während die alte Seite noch existiert, und die deshalb nie wirkt. Der dritte betrifft mehrsprachige Shops: Übersetzte Inhalte stehen ohne hreflang nebeneinander und konkurrieren miteinander. Und der vierte ist organisatorisch: Produkt-Handles werden im Zuge einer Umbenennung geändert, ohne dass jemand gefragt wurde.

Performance messen und halten

5:52 Kommen wir zur Ladezeit. Und zu der Frage, die jede Diskussion darüber beendet: Was genau messen wir eigentlich? Shopify misst Storefront-Performance an den Core Web Vitals. Das sind drei Werte: Largest Contentful Paint, also wann das größte sichtbare Element da ist. Cumulative Layout Shift, also wie sehr die Seite beim Laden springt. Und Interaction to Next Paint, also wie schnell die Seite auf eine Eingabe reagiert.

6:19 Google nutzt sie als Ranking-Signal — deshalb stehen SEO und Performance in diesem Modul zusammen. Dazu kommen Time to First Byte und First Contentful Paint als unterstützende Werte. Wichtig ist: Diese drei Zahlen sind diskutierbar, ein Gefühl ist es nicht. Shopify wird hier erfreulich konkret. Ein Theme im Theme Store braucht mindestens sechzig Punkte Lighthouse im Durchschnitt — gemessen über Startseite, Produktseite und Kollektionsseite.

6:46 Das ist ein Mindestmaß, keine Zielmarke, aber es ist eine Zahl. Inhalte gehören mit Liquid und HTML gerendert, nicht unnötig in clientseitiges JavaScript verlagert; das ist eine klare Empfehlung mit Wirkung auf Performance und Auffindbarkeit zugleich. Und für Skripte gilt: nicht kritische Skripte mit defer laden, Module erst bei Interaktion. Das sind Anweisungen, keine Prinzipien.

7:10 Der rote Faden: erst finden, dann optimieren. Bestimmen Sie das LCP-Element, meist das erste große Bild. Sorgen Sie dafür, dass genau dieses Bild sofort und mit hoher Priorität lädt — das ist oft die größte Einzelverbesserung überhaupt. Dann prüfen Sie, ob ein Skript das Rendern blockiert, bevor Inhalt sichtbar wird. Danach gehen Sie Apps, Tracking-Pixel und Theme-Code durch und entfernen, was seine Kosten nicht verdient. Und messen Sie erneut, mit Datum.

7:38 Die häufigste selbstgemachte Verzögerung ist übrigens eine Animation, die genau dieses Heldenbild ausbremst. Der erste Punkt ist fast schon ironisch: Das Heldenbild wird verzögert geladen — und es ist genau das LCP-Element. Der gut gemeinte Trick verschlechtert also den wichtigsten Wert. Der zweite ist in gewachsenen Shops die Regel: Drei Apps bringen dasselbe Tracking mit, und niemand entfernt zwei davon.

8:03 Der dritte verfälscht jede Messung: Gemessen wird am Bürorechner mit schnellem Netz statt unter realistischen Bedingungen. Und der vierte wird unterschätzt: Layoutsprünge durch nachgeladene Banner gelten als Kleinigkeit, sind aber einer der drei Kernwerte.

Qualitätskontrolle im Betrieb

8:18 Bleibt die Frage, wie man das Erreichte hält. Denn Shops werden nicht schlagartig langsam — sie werden es in kleinen Schritten. Ein Performance-Budget legt vorab fest, welche Werte eine Seite nicht überschreiten darf. Der eigentliche Gewinn daran ist nicht die Zahl, sondern die Folge: Jede neue App wird zu einer Entscheidung, die man begründen muss. Ohne Budget ist jede App erstmal harmlos.

8:41 Für den Theme-Code kommt Theme Check dazu — ein Linter für Liquid und JSON in Themes und Theme App Extensions. Das ist dasselbe Prinzip wie in der Softwareentwicklung: Ein Werkzeug findet die Dinge, die Menschen beim Lesen überfliegen. Fünf Befundarten, und sie decken ein erstaunlich breites Feld ab. Syntaxfehler in Liquid oder JSON.

9:02 Fehlende Templates, also eine Seitenart ohne Vorlage — das fällt sonst erst auf, wenn jemand die Seite aufruft. Ungenutzte Variablen und Snippets, meist Reste früherer Anpassungen; das ist der Hinweis, wo man aufräumen kann. Unbekannte und abgekündigte Tags, also Code aus einer älteren Theme-Generation. Und Muster, die das Rendern unnötig bremsen.

9:24 Laufen lässt sich das über die Shopify CLI und in der Liquid-Erweiterung für Visual Studio Code — also auch automatisiert. Vier Gründe, warum eine einmalige Prüfung nichts nützt. Jede installierte App kann Skripte in die Storefront bringen — und Apps werden nicht einmal installiert, sondern laufend. Ein Theme-Update ändert Markup, auf das Ihre Anpassungen sich verlassen.

9:47 Kollektionen wachsen, bis Filter oder Ladezeit kippen; die Grenzwerte aus Modul fünf werden eben nicht am ersten Tag erreicht. Und der vierte Punkt ist der menschliche: Kennzahlen ohne Termin werden nur nach Beschwerden angesehen. Ein Termin im Kalender ist banal und wirkt trotzdem. Der erste Punkt ist das Schicksal vieler guter Vorsätze: Das Budget steht im Protokoll, aber niemand prüft es vor einer Installation. Damit ist es Dekoration.

10:13 Der zweite ist verschenkte Automatisierung: Theme Check läuft einmal beim Aufbau und nie wieder — dabei ließe es sich in die Entwicklungsumgebung hängen. Der dritte ist der Fehler nach dem Relaunch: Niemand kontrolliert, ob die neuen Adressen tatsächlich indexiert werden. Und der vierte betrifft die Inhalte: Ratgeber werden geschrieben, aber nie auf ihre Wirkung geprüft. Dann weiß man nach zwei Jahren nicht, ob sich das lohnt.

Übung

10:38 Jetzt planen Sie einen Theme-Wechsel für Steglicht — und zwar mit allem, was dabei üblicherweise übersehen wird. Die Ausgangslage: Steglicht plant den Wechsel auf ein neues Theme. Der heutige Shop hat vierzig Produktseiten, acht Kollektionen, einen Ratgeberbereich und sechs installierte Apps. Beim Wechsel ändern sich mehrere Adressen, und die Ladezeit auf dem Telefon ist seit Monaten ein Thema — allerdings ohne dass jemand gemessen hätte.

11:04 Das ist typisch: Der Eindruck ist da, die Zahl fehlt. Genau deshalb beginnt Ihre Übung mit einer Messung und nicht mit einer Optimierung. Das Lernziel: Auffindbarkeits- und Ladezeitrisiken vor einem Relaunch benennen und nach Wirkung ordnen — nach Wirkung, nicht nach Aufwand. Das ist der Unterschied zwischen einem Audit und einer Aufgabenliste.

11:24 Erfolgreich sind Sie, wenn eine Weiterleitungsliste für alle geänderten Adressen vorliegt, drei gemessene Performance-Befunde mit Ausgangswert dokumentiert sind und ein Performance-Budget mit Schwellenwert steht. Und wer früh fertig ist, prüft zusätzlich, welche der sechs Apps überhaupt Skripte in die Storefront bringt. Das Ergebnis überrascht fast immer.

11:44 Listen Sie zuerst alle Adressen auf, die sich ändern. Bereiten Sie die Weiterleitungen als CSV vor und prüfen Sie dabei die gesperrten Pfade — sonst scheitert der Import an Zeilen, die gar nicht zulässig sind. Dann messen Sie Startseite, Produkt- und Kollektionsseite und notieren die Werte; ohne Ausgangswert ist jede spätere Verbesserung unbelegbar.

12:05 Benennen Sie je Befund die Ursache und schätzen Sie die Wirkung. Und legen Sie zum Schluss ein Budget fest — samt der Angabe, wer es vor jeder Installation prüft. Der erste Punkt ist der, den Sie gleich selbst erleben werden: Die Weiterleitungsliste enthält Pfade, die Shopify gar nicht umleitet. Lesen Sie die Sperrliste, bevor Sie exportieren. Der zweite ist der häufigste Fehler in Performance-Projekten: Gemessen wird nach der Optimierung, und der Ausgangswert fehlt.

12:33 Damit ist der Erfolg Behauptung. Der dritte klingt harmlos und macht das Budget wertlos: Es nennt keine Zahl und damit keine Grenze. Und der vierte passiert bei fast jedem Relaunch: Der Ratgeberbereich fällt heraus, und niemand bemerkt es — bis die Zugriffe fehlen.