Vorlage · Content-Design-System für Online-Shops · Version 1.0

Content-Design-System-Vorlage

Das Playbook für deinen Magazin-, Blog- oder Ratgeberbereich. Diese Vorlage ist die verallgemeinerte Fassung eines Systems, das ich in Kundenprojekten einsetze. Alle Beispiele sind an einem fiktiven Online-Shop für Kaffee und Zubehör durchgespielt. Ersetze sie durch dein Sortiment.

So nutzt du die Vorlage: Arbeite die Kapitel von oben nach unten durch. Kapitel 1 bis 3 sind Strategie (einmalig), Kapitel 4 bis 6 sind dein Baukasten (Referenz für jede Produktion), Kapitel 7 und 8 sind der laufende Betrieb. Die Beispielinhalte in den Tabellen tauschst du gegen deine Themen und Keywords.

1. Strategischer Kern

Der Content-Bereich ist keine Sammlung von Artikeln, sondern eine Beratungsebene deines Shops. Er hat vier Aufgaben:

  1. Sichtbarkeit: Rankings und Zitierfähigkeit für Suchanfragen vor der Kaufentscheidung (Google, AI Overviews, Chatbots).
  2. Beratung: Besucher mit Kaufabsicht zur richtigen Entscheidung führen, wie ein guter Verkäufer im Laden.
  3. Kommerzielle Anbindung: Jede Seite verlinkt kuratiert in Sortiment und Kategorien, ohne Katalog zu spielen.
  4. Markenaufbau: Eigenmarken und Expertise sichtbar in den Inhalten verankern, nicht in Bannern ankleben.

Grundprinzipien: Jede Seite hat genau eine Aufgabe. Das zentrale Funktionselement steht weit oben. Module werden wiederverwendet, nicht je Seite neu erfunden. Sichtbarer Inhalt und Markup passen immer zusammen.

2. Personas: Wer kommt mit welcher Frage?

Definiere drei bis fünf Perspektiven deiner Zielgruppe. Beispiel Kaffee-Shop:

Persona A

Der Einsteiger

Hat bisher Kapselkaffee getrunken, will „richtigen" Kaffee zu Hause. Fragt: Womit fange ich an? Was brauche ich wirklich?

Persona B

Die Aufsteigerin

Hat eine French Press, will besser werden. Fragt: Lohnt sich eine Mühle? Welcher Mahlgrad für welche Methode?

Persona C

Der Ausrüster

Will ein komplettes Setup: Espressomaschine, Mühle, Zubehör. Fragt: Was passt zusammen, was kostet das Gesamtpaket?

Persona D

Die Pflegerin

Besitzt die Ausrüstung, will sie erhalten. Fragt: Wie entkalke ich? Wie reinige ich die Mühle richtig?

3. Journey-Phasen: Wo steht das Thema?

PhaseDer Besucher willPassende Formate
OrientierenÜberblick, Grundlagen, EinstiegeThemen-Hub, Wissens-Snippet
AbwägenOptionen vergleichen, Kriterien verstehenKaufberatung, Vergleich
AusstattenKonkrete Produkte, Setups, AnleitungenSetup-Guide, How-to, Eigenmarken-Guide

4. Format-Katalog mit Beispielthemen

FormatAufgabeBeispielthema (Kaffee-Shop)Beispiel-Keywords
Themen-HubEinstieg in eine Themenwelt, verteilt in die Detailartikel„Espresso zu Hause: der komplette Einstieg"espresso zubereiten, espresso für anfänger
Wissens-SnippetEine Frage, eine Direktantwort, maschinenlesbar„Welcher Mahlgrad für French Press?"mahlgrad french press, kaffee mahlgrad tabelle
KaufberatungVon Kriterien zur Empfehlung führen„Espressomühle kaufen: worauf es wirklich ankommt"espressomühle kaufen, espressomühle test
VergleichZwei Optionen gegenüberstellen, Entscheidung abnehmen„Siebträger oder Vollautomat?"siebträger oder vollautomat, espressomaschine vergleich
Setup-GuideKomplette Lösung zeigen: Ergebnis + Teileliste„Das Heim-Barista-Setup in drei Ausbaustufen"barista setup zuhause, espresso ausstattung
How-to / PflegeAufgabe Schritt für Schritt erledigen„Espressomaschine entkalken in 6 Schritten"espressomaschine entkalken, siebträger reinigen
Optional als siebtes Format: der Eigenmarken- oder System-Guide („Welche Serie unserer Eigenmarke passt zu dir?"), wenn dein Shop eigene Produktlinien führt.

5. Modul-Baukasten

Aus diesen wiederverwendbaren Modulen entsteht jedes Format. Lege sie im CMS als eigene Komponenten an:

GruppeModuleFunktion
A · Struktur & OrientierungHero mit H1, Inhaltsverzeichnis, BreadcrumbsEinordnung für Besucher und Maschinen
B · Antwort & BeratungKurzantwort-Box (AEO), Kriterien-Abschnitte, „Für wen?"-Empfehlung, Quick Check, FAQ-BlockDie eigentliche Beratungsleistung
C · Vergleich & DatenVergleichstabelle (Desktop-Tabelle, mobil Cards), Vorteile/Nachteile, kleine DatentabellenEntscheidungen abnehmen
D · CommerceProdukt-Grid (kuratiert, redaktionell konfigurierbar), Produkt-Karte, Serien-MatrixBrücke ins Sortiment
E · Conversion & VerlinkungCTA-Block, Related-Modul, Hub-Spoke-VerlinkungNächster Schritt, interne Verlinkung

6. Wireframes: Layout-Gerüst je Format

Jedes Format als vollständiges Seiten-Wireframe, durchgespielt am Beispiel-Shop. Die Nummern erklären die Module:

Kaufberatung

deinshop.de/ratgeber/espressomuehle-kaufen1H1: „Welche Espressomühle passt zu mir?“2★ Kurzantwort: die Empfehlung in 2 Sätzen3Inhaltsverzeichnis · Sprungmarken4Kaufkriterien (H2-Abschnitte)5★ Empfehlung: „Für wen passt was?“6Produkt-Grid: kuratierte Auswahl7JaNeinErgebnis8FAQ＋＋9→ Zur Kategorie / Beratung
Format: Kaufberatung
  1. 1H1 stellt die Kauffrage wörtlich, Einleitung holt ab
  2. 2Kurzantwort-Box (AEO): zitierfähig für Google und KI-Systeme
  3. 3Inhaltsverzeichnis mit Sprungmarken
  4. 4Kaufkriterien als H2-Abschnitte: Mahlwerk, Budget, Platz
  5. 5Empfehlung je Nutzertyp statt pauschalem Testsieger
  6. 6Produkt-Grid: 3 kuratierte Mühlen mit Bild, Preis, CTA
  7. 7Quick Check: Ja/Nein-Fragen zur Selbsteinordnung
  8. 8FAQ-Accordion, zitierfähig formuliert, mit Markup
  9. 9CTA in Kategorie oder Beratung

Vergleich

deinshop.de/ratgeber/siebtraeger-oder-vollautomat1H1: „Siebträger oder Vollautomat?“2★ Kurzfazit mit klarer Empfehlung3Vergleichstabelle✓✕✓✓4＋−5★ „Für wen A, für wen B“6Produkt-Grid: beide Optionen7→ Beide Optionen ansehen
Format: Vergleich
  1. 1H1 stellt die Entscheidungsfrage
  2. 2Kurzfazit: die Empfehlung vorweg, nicht erst im Fazit
  3. 3Vergleichstabelle als Zentrum: Desktop-Tabelle, mobil Cards
  4. 4Vorteile und Nachteile je Option
  5. 5Zuordnung je Nutzertyp: wer sollte was kaufen
  6. 6Produkt-Grid mit beiden Optionen
  7. 7CTA zu beiden Produktwelten

Wissens-Snippet

deinshop.de/ratgeber/mahlgrad-french-press1H1: „Welcher Mahlgrad für French Press?“2★ Direktantwort in 1 bis 2 Sätzen3Vertiefung + kleine Tabelle4Related: passende Produkte
Format: Wissens-Snippet (AEO)
  1. 1H1 ist die Frage, wörtlich wie gesucht
  2. 2Direktantwort sofort, ohne Anlauf
  3. 3Vertiefung mit kleiner Mahlgrad-Tabelle
  4. 4Related-Modul: passende Produkte und weiterführende Inhalte

Eigenmarken- / System-Guide

deinshop.de/ratgeber/welche-serie-passt1H1: „Welche Serie passt zu mir?“2★ Kurzantwort / Empfehlung3Serien-MatrixUnoDuoProMaxCasaBarDuo+Set4Das System-Prinzip erklärt5★ „Für wen welche Serie?“6Produkt-Grid je Serie7→ Zur Serie
Format: Eigenmarken- / System-Guide
  1. 1H1: die Serienfrage der Eigenmarke
  2. 2Kurzantwort mit Einstiegsempfehlung
  3. 3Serien-Matrix: alle Linien der Eigenmarke im Überblick
  4. 4Das Modul- oder System-Prinzip der Marke erklärt
  5. 5Zuordnung: welche Serie für welchen Nutzertyp
  6. 6Produkt-Grid je Serie, kuratiert
  7. 7CTA in die Serienwelt

Setup-Guide

deinshop.de/ratgeber/heim-barista-setup1H1: „Das Heim-Barista-Setup“2★ Kurzantwort-Box (AEO)3Inhalt / Checkliste4BudgetAnspruchPlatz5BasisFortgeschr.Profi6Verlinkung in die Spoke-Artikel7→ Setup zusammenstellen
Format: Setup-Guide
  1. 1H1: das große Vorhaben
  2. 2Kurzantwort: das Setup in einem Satz
  3. 3Checkliste als Überblick und Sprungmarken
  4. 4Bedarfs-Logik: drei Fragen ordnen den Besucher ein
  5. 5Ausbaustufen als Karten mit Produkt-Grid je Stufe
  6. 6Verlinkung in die Detailartikel der Themenwelt
  7. 7CTA: Setup zusammenstellen

How-to / Pflege

deinshop.de/ratgeber/espressomaschine-entkalken1H1: „Espressomaschine entkalken“23★ Material- und Werkzeugliste4125Häufige Fehler6→ Produkte aus der Liste
Format: How-to / Pflege
  1. 1H1: die Aufgabe
  2. 2Bild vom Ergebnis: so soll es aussehen
  3. 3Materialliste vor den Schritten, nichts fehlt mittendrin
  4. 4Schritt 1 bis n: nummeriert und bebildert, das Zentrum
  5. 5Häufige Fehler und wie du sie vermeidest
  6. 6CTA: die Produkte aus der Materialliste

7. Themenwelten: Hub und Spoke

Organisiere Themen als Welten: ein Hub pro Welt, Detailartikel als Spokes. Beispiel Kaffee-Shop:

8. Redaktionsplan

So wird aus dem System Produktion. Jede Zeile ordnet ein Thema einem Format zu, bevor geschrieben wird:

ThemaFormatWeltPhaseZiel-KeywordStatus
Espressomühle kaufenKaufberatungEspresso zu HauseAbwägenespressomühle kaufenBeispiel
Welcher Mahlgrad für French Press?Wissens-SnippetFilterkaffeeOrientierenmahlgrad french pressBeispiel
Espressomaschine entkalkenHow-toEspresso zu HauseAusstattenespressomaschine entkalkenBeispiel
Dein Thema ……………Offen

9. Checkliste vor jeder Veröffentlichung

  1. Ist das Thema einem Format zugeordnet und folgt die Seite dessen Gerüst?
  2. Steht das zentrale Funktionselement weit oben, nicht unter langen Einleitungen?
  3. Ist die Kurzantwort so formuliert, dass Google und KI-Systeme sie zitieren können?
  4. Ist das Produkt-Grid kuratiert (3 bis 6 Produkte) statt Katalog?
  5. Funktionieren Tabellen mobil als Cards?
  6. Passen strukturierte Daten exakt zum sichtbaren Inhalt?
  7. Verlinkt die Seite zum Hub ihrer Themenwelt und zu passenden Spokes?

Soll dein Magazin ein System bekommen?

Diese Vorlage bringt dich weit. Wenn du dabei Unterstützung willst, von der Formatplanung bis zur Umsetzung im Shopsystem: 30 Minuten, one-on-one, wir schauen gemeinsam auf deinen Content-Bereich. Ohne Sales-Kram.

Shop-Audit sichernZum Standpunkt-Beitrag

Content-Design-System-Vorlage von Oliver Dahm, SEO- und AI-Consultant für Online-Shops · oliverdahm.de

Hintergrund und Anleitung zur Vorlage: Funktionale Komponenten statt Textwüsten: Warum dein Magazin ein Content-Design-System braucht