Der neue Shop sieht großartig aus. Große Bilder, viel Weißraum, ein reduziertes Menü, animierte Übergänge. Sechs Wochen nach dem Relaunch ist der organische Traffic um 40 Prozent gefallen. Das ist kein erfundenes Beispiel, sondern der häufigste Anlass, mit dem Shop-Betreiber zu uns kommen. Die Ursache liegt fast nie an Google, sondern daran, dass Webdesign und SEO getrennt gedacht wurden.
Dieser Artikel zeigt 17 konkrete Webdesign SEO Maßnahmen, wie du ein Shop-Layout aufbaust, das beides kann: Rankings halten oder aufbauen und gleichzeitig verkaufen. Die Tipps gelten für Shopify, WooCommerce und Shopware gleichermaßen. Wir arbeiten sie in der Reihenfolge ab, in der sie in einem Projekt anfallen: Struktur, Startseite, Kategorieseiten, Produktseiten, Technik, Mobil und Relaunch. Am Ende weißt du, worauf du bei Designer, Agentur oder Theme achten musst.
Was Webdesign SEO bedeutet und warum es für Shops zählt
Google bewertet eine Seite nicht nach Schönheit, aber nach vielem, was das Design bestimmt: Welche Inhalte im HTML stehen, wie Seiten verlinkt sind, wie schnell sie laden, wie stabil das Layout beim Laden bleibt und ob Nutzer finden, was sie suchen. Ein Theme, das die Kategoriebeschreibung ans Seitenende schiebt oder in einen aufklappbaren Bereich packt, ändert nichts an der Optik, aber viel daran, wie Google den Inhalt gewichtet.
Umgekehrt bringt das beste Ranking nichts, wenn die Seite Besucher verliert. Webdesign SEO heißt deshalb, die Webseite von Anfang an so zu gestalten, dass Struktur, Ladezeiten und Inhalte die Sichtbarkeit in den Suchergebnissen stützen. Für einen Onlineshop ist das keine Frage von Ästhetik gegen Technik, sondern die Aufgabe, beides in einem Layout zu vereinen. Die folgenden Tipps sind nach Bereichen gegliedert, damit du sie direkt in deinem Shop prüfen kannst.
1. Flache Hierarchie: Jede Kategorie in maximal drei Klicks
Startseite, Hauptkategorie, Unterkategorie, Produkt. Mehr Ebenen braucht kaum ein Shop. Je tiefer eine Seite liegt, desto weniger interne Linkkraft kommt an, und desto seltener crawlt Google sie. Ein Vape-Shop mit „Startseite, Hardware, Vaporizer, Kräuter-Vaporizer, Tragbar, Storz & Bickel, Mighty+“ hat sechs Ebenen. Besser: „Vaporizer, Tragbare Vaporizer, Mighty+“ und die Marke als Filter oder eigene Markenseite.
Das Menü ist die stärkste interne Verlinkung deines Shops, weil es auf jeder Seite steht. Kategorien, die im Menü stehen, bekommen die meiste Linkkraft. Baue es deshalb nach dem, was Kunden suchen, nicht nach dem, wie dein Lager organisiert ist. Ein Headshop, der „Bongs“ als Menüpunkt hat und „Glasbongs“, „Acrylbongs“ und „Bong Zubehör“ als Untermenü, spiegelt die Suchanfragen. Ein Menü mit „Rauchen“, „Zubehör“ und „Sonstiges“ tut das nicht.
3. Sprechende URLs ohne Zahlen und Parameter
Die URL deinshop.at/vaporizer/tragbare-vaporizer/ sagt Google und Nutzern, worum es geht. deinshop.at/c/1234?cat=17 sagt nichts. Bei Shopify ist die Struktur mit /collections/ und /products/ vorgegeben, aber die Handles solltest du bewusst setzen. Bei WooCommerce kannst du die Permalinks frei konfigurieren. Wichtig bei bestehenden Shops: URLs nur mit sauberen Weiterleitungen ändern.
4. Breadcrumbs auf jeder Kategorie- und Produktseite
Die Brotkrumen-Navigation zeigt den Pfad zur aktuellen Seite und verlinkt jede Ebene. Sie gibt Google die Hierarchie mit, hilft Nutzern bei der Orientierung und erscheint mit strukturierten Daten direkt im Suchergebnis. Viele minimalistische Themes blenden sie aus. Schalte sie wieder ein.
Startseite (Tipps 5 bis 7)
5. Hero-Bereich mit Text, nicht nur mit Bild
Der Bereich, den Besucher ohne Scrollen sehen, sollte in Textform sagen, was der Shop verkauft und für wen. Ein Vollbild-Foto mit „Willkommen“ als Überschrift verschenkt die H1 der wichtigsten Seite und gibt Google keine Informationen zum Keyword, für das die Startseite stehen soll. Besser: „Vaporizer, Liquids und Zubehör aus Österreich“ als H1, ein Satz zum Angebot und darunter die Hauptkategorien mit Bild und Link.
6. Kategorien direkt verlinken, nicht nur Produkte
Viele Startseiten zeigen „Neuheiten“ und „Bestseller“ als Produktkacheln, aber keine Kategorien. Für Google ist die Startseite die stärkste Seite im Shop, und diese Kraft soll auf die Kategorien fließen, die ranken sollen. Eine Kachel pro Hauptkategorie mit sprechendem Linktext ist mehr wert als zwanzig Produktkacheln. Wie interne Verlinkung in Shops funktioniert, zeigt unser Video zur internen Verlinkung bei Online Shops.
7. Ein Textblock auf der Startseite
Zwei bis drei Absätze, die den Shop erklären: Sortiment, Herkunft, Versand, Besonderheiten. Das muss nicht oben stehen, aber im HTML vorhanden sein. Viele Shops haben auf der Startseite außer Buttons keinen einzigen Satz, und Google hat dann nichts, woran es das Thema festmachen kann.
Kategorieseiten (Tipps 8 bis 11)
Kategorieseiten sind für Shops die wichtigsten Rankingseiten, weil sie die Suchanfragen mit Kaufabsicht abholen: „Vaporizer kaufen“, „CBD Blüten“, „Glasbong“. Das Layout dieser Seiten entscheidet über einen großen Teil des organischen Umsatzes.
8. Kategorietext oben kurz, unten ausführlich
Ein bis zwei Sätze direkt unter der H1, sichtbar für jeden Besucher. Der ausführliche Text mit 300 bis 800 Wörtern kommt unter das Produktraster. So bleibt die Produktansicht im Vordergrund, Google bekommt trotzdem Inhalt. Wichtig: Der untere Text muss im HTML stehen und nicht per Skript nachgeladen oder hinter einem „Mehr lesen“ versteckt werden, das den Inhalt erst beim Klick einfügt. Wie du solche Texte schreibst, zeigt das Video zu Kategorieseitentexten für Shopify.
9. Filter, die nicht tausende Seiten erzeugen
Filter nach Marke, Preis, Farbe und Größe sind für Nutzer wichtig, erzeugen aber bei falscher Umsetzung tausende URLs mit fast gleichem Inhalt. Die Faustregel: Filterkombinationen per Canonical auf die Hauptkategorie zeigen oder mit Noindex versehen. Nur Filter mit eigener Suchnachfrage, etwa „Vaporizer Storz & Bickel“, bekommen eine eigene indexierbare Seite mit eigenem Text. Mehr dazu im Artikel Duplicate Content im Onlineshop.
10. Paginierung statt Endlos-Scroll
Unendliches Scrollen wirkt modern, aber Google lädt keine Inhalte nach, die erst beim Scrollen erscheinen. Produkte ab Position 24 sind dann für den Crawler unsichtbar. Klassische Seitenzahlen mit echten Links lösen das. Wenn du Endlos-Scroll aus Designgründen willst, muss darunter eine crawlbare Paginierung liegen. Wie du die Canonical-Tags dabei setzt, erklärt unser Video zur Pagination mit dem Canonical Tag.
11. Unterkategorien sichtbar verlinken
Eine Kategorieseite sollte ihre Unterkategorien als Kacheln oder Liste zeigen, mit Text-Link, nicht nur mit Bild. Das ist die zweite Ebene der internen Verlinkung nach dem Menü und der Weg, auf dem Longtail-Seiten Linkkraft bekommen.
Produktseiten (Tipps 12 und 13)
12. Reihenfolge: Bild, Titel, Preis, Kaufen, dann Beschreibung
Das ist die Reihenfolge, die verkauft, und Google hat nichts dagegen, solange die Beschreibung im HTML liegt. Der Fehler vieler Themes: Die Beschreibung steckt in Tabs, die per Skript geladen werden, oder in einem Akkordeon, das den Text erst beim Klick einfügt. Ausgeblendeter Text, der im HTML vorhanden ist, wird von Google gelesen. Nachgeladener Text oft nicht.
13. Varianten ohne eigene indexierbare URL
Ein Liquid in zehn Geschmacksrichtungen ist ein Produkt mit zehn Varianten, nicht zehn Produkte. Wenn jede Variante eine eigene URL mit gleichem Text bekommt, hast du zehn Duplikate. Die Variante gehört in die Auswahl auf einer Produktseite, mit Canonical auf die Hauptvariante. Bei Shopify ist das der Standard, bei WooCommerce hängt es von der Umsetzung ab.
Technik und Ladezeit (Tipps 14 und 15)
14. Bilder, die das Design tragen, ohne es zu bremsen
Ein Hero-Bild mit 3 Megabyte kostet auf dem Smartphone zwei bis drei Sekunden. Die Regel: WebP oder AVIF, maximale Breite an die Anzeige angepasst, Lazy Loading für alles unterhalb des sichtbaren Bereichs, aber nicht für das erste Bild. Produktbilder brauchen zusätzlich sprechende Dateinamen und Alt-Texte. Details im Artikel Bilder SEO für Produktbilder.
15. Weniger Apps, weniger Skripte
Jede Shopify-App und jedes WordPress-Plugin lädt eigene Skripte, oft auf jeder Seite, auch wenn die Funktion nur im Warenkorb gebraucht wird. Zehn Apps können die Ladezeit verdoppeln. Prüfe einmal im Quartal, welche Apps wirklich genutzt werden, und entferne den Rest. Deinstallierte Shopify-Apps hinterlassen manchmal Code-Reste im Theme. Was das für die Core Web Vitals bedeutet, steht im Artikel Core Web Vitals für Shopify und WooCommerce.
Mobil (Tipp 16)
16. Mobile Ansicht ist die Hauptansicht
Responsive Design ist Standard, aber Google bewertet Shops nach der mobilen Version. Was im mobilen Layout ausgeblendet oder entfernt ist, zählt nicht. Häufige Fehler: Der Kategorietext ist nur auf dem Desktop sichtbar, das Menü zeigt mobil nur die Hauptkategorien, die Breadcrumbs fehlen mobil, die interne Verlinkung im Footer ist mobil zusammengeklappt und per Skript entfernt. Prüfe jede Seite auf dem Smartphone und im Quelltext der mobilen Ansicht.
Dazu kommen die Grundregeln der Bedienbarkeit: Buttons mindestens 44 Pixel groß, Abstand zwischen klickbaren Elementen, Schrift ab 16 Pixel, kein horizontales Scrollen, Filter als Overlay statt als Seitenleiste. Weitere Punkte im Artikel Mobile SEO für Onlineshops.
Relaunch und Theme-Wechsel (Tipp 17)
17. Kein Redesign ohne SEO-Abnahme
Die meisten Ranking-Einbrüche, die wir bei Shops sehen, kommen nicht von Google-Updates, sondern vom Relaunch. Neue URLs ohne Weiterleitungen, Kategorietexte, die im neuen Theme keinen Platz haben, Noindex aus der Staging-Umgebung, das live geht, eine neue Menüstruktur, die die stärksten Kategorien versteckt. Die Checkliste vor dem Livegang:
- URL-Mapping: Jede alte URL bekommt eine 301-Weiterleitung auf die passende neue URL, nicht auf die Startseite.
- Inhalte übernehmen: Alle Kategorie- und Produkttexte, Titles und Meta Descriptions sind im neuen Theme vorhanden.
- Noindex und robots.txt prüfen: Die Staging-Sperre darf nicht mit live gehen.
- Interne Links: Menü, Footer, Breadcrumbs und Content-Links zeigen auf die neuen URLs, nicht über Weiterleitungen.
- Ladezeit messen: Vor und nach dem Wechsel mit denselben Seiten vergleichen.
- Search Console beobachten: In den ersten vier Wochen täglich Indexierung und Rankings prüfen. Wie du die Search Console einrichtest, steht in der Anleitung für Shopify und WooCommerce.
Übersicht: Design-Entscheidung und SEO-Wirkung
| Design-Entscheidung | Wirkung auf SEO | Empfehlung |
|---|---|---|
| Vollbild-Hero ohne Text | Startseite ohne Thema, H1 verschenkt | H1 mit Sortiment, Kategoriekacheln darunter |
| Mega-Menü mit allen Unterkategorien | Gute Linkverteilung, aber mobil oft unbrauchbar | Hauptkategorien plus wichtigste Unterkategorien, mobil aufklappbar |
| Kategorietext in Akkordeon | Unproblematisch, wenn im HTML; problematisch, wenn nachgeladen | Text im HTML, Akkordeon nur per CSS |
| Endlos-Scroll | Produkte ab Seite 2 nicht crawlbar | Paginierung mit echten Links, Endlos-Scroll als Ergänzung |
| Filter mit eigenen URLs | Tausende Duplikate | Canonical oder Noindex, Ausnahmen mit Suchnachfrage |
| Überschriften als Bild oder SVG-Text | Für Google unsichtbar | Echte H1 bis H3 im HTML, per CSS gestalten |
| Zehn Apps für Popups, Bewertungen, Chat | Ladezeit verdoppelt, Layoutsprünge | Apps prüfen, Skripte nur laden, wo gebraucht |
Ein Beispiel aus der Praxis
Beim Vaporizer-Shop Norddampf war die Struktur ein zentraler Baustein: klare Hauptkategorien nach Suchnachfrage, eigene Seiten für Marken und Gerätetypen mit ausführlichen Texten unter dem Produktraster, sauberes Handling von Filtern und Paginierung und interne Links aus Ratgeberinhalten in die Kategorien. In zwölf Monaten hat sich der organische Traffic verzwölffacht, auf über 16.000 Besucher pro Monat. Das Design blieb dabei im Wesentlichen gleich. Was sich änderte, war die Art, wie Struktur und Inhalt zusammenspielen. Die Geschichte erzählen wir im Video zur Norddampf Erfolgsstory, das Projekt findest du bei unseren Referenzen.
Webdesign, SEO und KI-Suche
ChatGPT, Perplexity, Gemini und Claude lesen Shops ähnlich wie Google: über das HTML, nicht über die Optik. Eine klare Struktur mit sprechenden Überschriften, Kategorietexten im Quelltext, strukturierten Daten für Produkte und einer verständlichen Hierarchie hilft den Modellen, deinen Shop korrekt einzuordnen und in Antworten zu nennen. Ein Shop, dessen Inhalte nur in Bildern und nachgeladenen Skripten stecken, taucht dort nicht auf.
Ob dein Shop in den Antworten der KI-Systeme vorkommt, prüfen wir mit einem kostenlosen GEO-Check ohne Mindestgröße: zehn Kaufabsichts-Prompts deiner Nische in ChatGPT, Perplexity, Gemini und Claude, Ergebnis in 48 Stunden. Mehr dazu auf unserer Seite als GEO-Agentur.
Häufige Fragen zu Webdesign SEO
Ist ein schönes Design schlecht für SEO?
Nein. Problematisch sind nicht Optik oder Weißraum, sondern Entscheidungen, die Inhalte aus dem HTML entfernen, Links verstecken oder die Ladezeit erhöhen. Ein reduziertes Design mit sauberer Struktur ist oft besser für SEO als ein überladenes.
Welches Shopify-Theme ist am besten für SEO?
Kein Theme rankt von selbst. Die Standard-Themes von Shopify sind technisch sauber und schnell. Wichtiger als die Theme-Wahl ist, was du damit machst: Kategorietexte, Menüstruktur, Bilder, Apps. Typische Shopify-Fehler zeigen wir im Video „SEO für Shopify – Vermeide diese Fehler“.
Wie viel Text braucht eine Kategorieseite?
Für umkämpfte Kategorien 300 bis 800 Wörter, für Unterkategorien reichen oft 150 bis 300. Kurz oben, ausführlich unter dem Produktraster. Mehr zählt nicht automatisch, aber ohne Text rankt eine Kategorieseite selten.
Sollte ich vor dem Relaunch eine Agentur beauftragen?
Zumindest für die Prüfung. Ein SEO-Audit vor dem Livegang kostet einen Bruchteil dessen, was ein Ranking-Verlust über sechs Monate kostet. Die Punkte sind bekannt: URL-Mapping, Inhalte, Noindex, interne Links, Ladezeit.
Zählt Nutzerverhalten wie Verweildauer für das Ranking?
Google äußert sich dazu nicht eindeutig. Unabhängig davon gilt: Ein Layout, bei dem Besucher finden, was sie suchen, verkauft besser. Das ist Grund genug, es zu optimieren.
Fazit: Struktur zuerst, Optik danach
Webdesign SEO für Shops beginnt bei der Struktur: Hierarchie, Menü, URLs, Kategorieseiten mit Text, saubere Filter und Paginierung, Inhalte im HTML und ein mobiles Layout, das nichts versteckt. Die Optik legst du darüber. Wer die Reihenfolge umdreht und erst designt, dann SEO nachrüstet, zahlt doppelt.
Wenn du einen Relaunch planst oder nach einem Theme-Wechsel Rankings verloren hast: Wir kommen nicht aus der Agenturwelt, sondern aus eigenen SEO-Projekten und prüfen im SEO-Audit Struktur, Technik und Inhalte deines Shops, bevor oder nachdem das Design geändert wurde. Alles zu unserem Angebot findest du unter E-Commerce SEO. Oder du sicherst dir direkt ein kostenloses Erstgespräch.
