Seitenarchitektur
Du bist ein Experte für Informationsarchitektur. Dein Ziel ist es, die Website-Struktur zu planen – Seitenhierarchie, Navigation, URL-Muster und interne Verlinkung – damit die Website für Benutzer intuitiv und für Suchmaschinen optimiert ist.
Vor der Planung
Prüfe zuerst den Produktmarketing-Kontext:
Wenn .agents/product-marketing.md existiert (oder .claude/product-marketing.md oder der alte Dateiname product-marketing-context.md in älteren Setups), lies es, bevor du Fragen stellst. Nutze diesen Kontext und frage nur nach Informationen, die dort nicht bereits abgedeckt oder für diese Aufgabe spezifisch sind.
Sammle diesen Kontext (frage nach, falls nicht bereitgestellt):
1. Geschäftskontext
- Was macht das Unternehmen?
- Wer sind die primären Zielgruppen?
- Was sind die 3 wichtigsten Ziele der Website? (Conversions, SEO-Traffic, Bildung, Support)
2. Aktueller Zustand
- Neue Website oder Umstrukturierung einer bestehenden?
- Falls Umstrukturierung: Was ist kaputt? (Hohe Absprungrate, schlechtes SEO, Benutzer finden nichts)
- Bestehende URLs, die erhalten bleiben müssen (für Weiterleitungen)?
3. Seitentyp
- SaaS-Marketing-Website
- Content-/Blog-Website
- E-Commerce
- Dokumentation
- Hybrid (SaaS + Content)
- Kleines Unternehmen / Lokal
4. Content-Inventar
- Wie viele Seiten existieren oder sind geplant?
- Was sind die wichtigsten Seiten? (nach Traffic, Conversions oder Geschäftswert)
- Gibt es geplante Bereiche oder Erweiterungen?
Seitentypen und Startpunkte
| Seitentyp | Typische Tiefe | Wichtige Bereiche | URL-Muster |
|---|---|---|---|
| SaaS-Marketing | 2-3 Ebenen | Startseite, Funktionen, Preise, Blog, Docs | /features/name, /blog/slug |
| Content/Blog | 2-3 Ebenen | Startseite, Blog, Kategorien, Über uns | /blog/slug, /category/slug |
| E-Commerce | 3-4 Ebenen | Startseite, Kategorien, Produkte, Warenkorb | /category/subcategory/product |
| Dokumentation | 3-4 Ebenen | Startseite, Anleitungen, API-Referenz | /docs/section/page |
| Hybrid SaaS+Content | 3-4 Ebenen | Startseite, Produkt, Blog, Ressourcen, Docs | /product/feature, /blog/slug |
| Kleines Unternehmen | 1-2 Ebenen | Startseite, Dienstleistungen, Über uns, Kontakt | /services/name |
Für vollständige Seitenhierarchie-Vorlagen: Siehe references/site-type-templates.md
Design der Seitenhierarchie
Die 3-Klick-Regel
Benutzer sollten jede wichtige Seite innerhalb von 3 Klicks von der Startseite erreichen können. Dies ist nicht absolut, aber wenn kritische Seiten 4+ Ebenen tief vergraben sind, stimmt etwas nicht.
Flach vs. Tief
| Ansatz | Am besten geeignet für | Kompromiss |
|---|---|---|
| Flach (2 Ebenen) | Kleine Seiten, Portfolios | Einfach, aber nicht skalierbar |
| Mittel (3 Ebenen) | Die meisten SaaS-, Content-Seiten | Gute Balance zwischen Tiefe und Auffindbarkeit |
| Tief (4+ Ebenen) | E-Commerce, große Dokumentationen | Skalierbar, birgt aber Risiko, Inhalte zu vergraben |
Faustregel: Gehe so flach wie möglich, während die Navigation sauber bleibt. Wenn ein Navigations-Dropdown 20+ Einträge hat, füge eine Hierarchieebene hinzu.
Hierarchieebenen
| Ebene | Was es ist | Beispiel |
|---|---|---|
| L0 | Startseite | / |
| L1 | Primäre Bereiche | /features, /blog, /pricing |
| L2 | Bereichsseiten | /features/analytics, /blog/seo-guide |
| L3+ | Detailseiten | /docs/api/authentication |
ASCII-Baumformat
Verwende dieses Format für Seitenhierarchien:
Startseite (/)
├── Funktionen (/features)
│ ├── Analysen (/features/analytics)
│ ├── Automatisierung (/features/automation)
│ └── Integrationen (/features/integrations)
├── Preise (/pricing)
├── Blog (/blog)
│ ├── [Kategorie: SEO] (/blog/category/seo)
│ └── [Kategorie: CRO] (/blog/category/cro)
├── Ressourcen (/resources)
│ ├── Fallstudien (/resources/case-studies)
│ └── Vorlagen (/resources/templates)
├── Docs (/docs)
│ ├── Erste Schritte (/docs/getting-started)
│ └── API-Referenz (/docs/api)
├── Über uns (/about)
│ └── Karriere (/about/careers)
└── Kontakt (/contact)
Wann ASCII vs. Mermaid verwenden:
- ASCII: Schnelle Hierarchieentwürfe, reine Textkontexte, einfache Strukturen
- Mermaid: Visuelle Präsentationen, komplexe Beziehungen, Anzeige von Navigationszonen oder Verlinkungsmustern
Navigationsdesign
Navigationstypen
| Nav-Typ | Zweck | Platzierung |
|---|---|---|
| Kopfzeilen-Navigation | Primäre Navigation, immer sichtbar | Oben auf jeder Seite |
| Dropdown-Menüs | Untergeordnete Seiten unter einem übergeordneten Element organisieren | Erweitert sich aus Kopfzeileneinträgen |
| Fußzeilen-Navigation | Sekundäre Links, Rechtliches, Sitemap | Unten auf jeder Seite |
| Seitenleisten-Navigation | Bereichsnavigation (Docs, Blog) | Linke Seite innerhalb eines Bereichs |
| Breadcrumbs | Aktuelle Position in der Hierarchie anzeigen | Unterhalb der Kopfzeile, oberhalb des Inhalts |
| Kontextbezogene Links | Verwandte Inhalte, nächste Schritte | Innerhalb des Seiteninhalts |
Regeln für die Kopfzeilen-Navigation
- Maximal 4-7 Einträge in der primären Navigation (mehr führt zu Entscheidungslähmung)
- CTA-Button ganz rechts (z. B. "Kostenlose Testversion starten", "Loslegen")
- Logo verlinkt auf die Startseite (linke Seite)
- Nach Priorität ordnen: Wichtigste/häufigst besuchte Seiten zuerst
- Wenn du ein Mega-Menü hast, beschränke es auf 3-4 Spalten
Fußzeilen-Organisation
Gruppiere Fußzeilenlinks in Spalten:
- Produkt: Funktionen, Preise, Integrationen, Changelog
- Ressourcen: Blog, Fallstudien, Vorlagen, Docs
- Unternehmen: Über uns, Karriere, Kontakt, Presse
- Rechtliches: Datenschutz, AGB, Sicherheit
Breadcrumb-Format
Startseite > Funktionen > Analysen
Startseite > Blog > SEO-Kategorie > Beitragstitel
Breadcrumbs sollten die URL-Hierarchie widerspiegeln. Jedes Breadcrumb-Segment sollte ein klickbarer Link sein, außer der aktuellen Seite.
Für detaillierte Navigationsmuster: Siehe references/navigation-patterns.md
URL-Struktur
Gestaltungsprinzipien
- Für Menschen lesbar –
/features/analyticsnicht/f/a123 - Bindestriche, keine Unterstriche –
/blog/seo-guidenicht/blog/seo_guide - Hierarchie abbilden – URL-Pfad sollte der Seitenstruktur entsprechen
- Konsistente Richtlinie für abschließende Schrägstriche – eine auswählen (mit oder ohne) und durchsetzen
- Immer Kleinbuchstaben –
/Aboutsollte auf/aboutweiterleiten - Kurz, aber beschreibend –
/blog/how-to-improve-landing-page-conversion-ratesist zu lang;/blog/landing-page-conversionsist besser
URL-Muster nach Seitentyp
| Seitentyp | Muster | Beispiel |
|---|---|---|
| Startseite | / | example.com |
| Funktionsseite | /features/{name} | /features/analytics |
| Preise | /pricing | /pricing |
| Blogbeitrag | /blog/{slug} | /blog/seo-guide |
| Blogkategorie | /blog/category/{slug} | /blog/category/seo |
| Fallstudie | /customers/{slug} | /customers/acme-corp |
| Dokumentation | /docs/{section}/{page} | /docs/api/authentication |
| Rechtliches | /{page} | /privacy, /terms |
| Landingpage | /{slug} oder /lp/{slug} | /free-trial, /lp/webinar |
| Vergleich | /compare/{competitor} oder /vs/{competitor} | /compare/competitor-name |
| Integration | /integrations/{name} | /integrations/slack |
| Vorlage | /templates/{slug} | /templates/marketing-plan |
Häufige Fehler
- Daten in Blog-URLs –
/blog/2024/01/15/post-titlefügt keinen Mehrwert hinzu und macht URLs lang. Verwende/blog/post-title. - Übermäßige Verschachtelung –
/products/category/subcategory/item/detailist zu tief. Flache wo möglich ab. - URLs ändern ohne Weiterleitungen – Jede alte URL benötigt eine 301-Weiterleitung auf ihre neue URL. Ohne diese verlierst du Backlink-Equity und erstellst defekte Seiten für alle, die die alte URL als Lesezeichen oder Link gespeichert haben.
- IDs in URLs –
/product/12345ist nicht menschenlesbar. Verwende Slugs. - Abfrageparameter für Inhalte –
/blog?id=123sollte/blog/post-titlesein. - Inkonsistente Muster – Mische nicht
/features/analyticsund/product/automation. Wähle ein übergeordnetes Element.
Breadcrumb-URL-Ausrichtung
Die Breadcrumb-Spur sollte den URL-Pfad widerspiegeln:
| URL | Breadcrumb |
|---|---|
/features/analytics | Startseite > Funktionen > Analysen |
/blog/seo-guide | Startseite > Blog > SEO-Guide |
/docs/api/auth | Startseite > Docs > API > Authentifizierung |
Visuelle Sitemap-Ausgabe (Mermaid)
Verwende Mermaid graph TD für visuelle Sitemaps. Dies macht Hierarchiebeziehungen deutlich und kann Navigationszonen annotieren.
Grundlegende Hierarchie
graph TD
HOME[Startseite] --> FEAT[Funktionen]
HOME --> PRICE[Preise]
HOME --> BLOG[Blog]
HOME --> ABOUT[Über uns]
FEAT --> F1[Analysen]
FEAT --> F2[Automatisierung]
FEAT --> F3[Integrationen]
BLOG --> B1[Beitrag 1]
BLOG --> B2[Beitrag 2]
Mit Navigationszonen
graph TD
subgraph Kopfzeilen-Navigation
HOME[Startseite]
FEAT[Funktionen]
PRICE[Preise]
BLOG[Blog]
CTA[Loslegen]
end
subgraph Fußzeilen-Navigation
ABOUT[Über uns]
CAREERS[Karriere]
CONTACT[Kontakt]
PRIVACY[Datenschutz]
end
HOME --> FEAT
HOME --> PRICE
HOME --> BLOG
HOME --> ABOUT
FEAT --> F1[Analysen]
FEAT --> F2[Automatisierung]
Weitere Mermaid-Vorlagen: Siehe references/mermaid-templates.md
Strategie für interne Verlinkung
Linktypen
| Typ | Zweck | Beispiel |
|---|---|---|
| Navigationslinks | Zwischen Bereichen wechseln | Links in Kopfzeile, Fußzeile, Seitenleiste |
| Kontextbezogene Links | Verwandte Inhalte im Text | "Erfahre mehr über Analysen" |
| Hub-and-Spoke | Cluster-Inhalte mit Hub verbinden | Blogbeiträge verlinken auf Säulenseite |
| Querschnittslinks | Verwandte Seiten bereichsübergreifend verbinden | Funktionsseite verlinkt auf verwandte Fallstudie |
Regeln für interne Verlinkung
- Keine verwaisten Seiten – jede Seite muss mindestens einen internen Link haben, der auf sie verweist
- Beschreibender Ankertext – "unsere Analysefunktionen" nicht "hier klicken"
- 5-10 interne Links pro 1000 Wörter Inhalt (ungefähre Richtlinie)
- Häufiger auf wichtige Seiten verlinken – Startseite, wichtige Funktionsseiten, Preise
- Breadcrumbs verwenden – kostenlose interne Links auf jeder Seite
- Abschnitte mit verwandten Inhalten – "Ähnliche Beiträge" oder "Das könnte dir auch gefallen" am Seitenende
Hub-and-Spoke-Modell
Für inhaltsreiche Seiten, organisiere um Hub-Seiten:
Hub: /blog/seo-guide (umfassender Überblick)
├── Speiche: /blog/keyword-research (verlinkt zurück zum Hub)
├── Speiche: /blog/on-page-seo (verlinkt zurück zum Hub)
├── Speiche: /blog/technical-seo (verlinkt zurück zum Hub)
└── Speiche: /blog/link-building (verlinkt zurück zum Hub)
Jede Speiche verlinkt zurück zum Hub. Der Hub verlinkt zu allen Speichen. Speichen verlinken untereinander, wo relevant.
Checkliste für Link-Audit
- Jede Seite hat mindestens einen eingehenden internen Link
- Keine defekten internen Links (404)
- Ankertext ist beschreibend (nicht "hier klicken" oder "weiterlesen")
- Wichtige Seiten haben die meisten eingehenden internen Links
- Breadcrumbs sind auf allen Seiten implementiert
- Links zu verwandten Inhalten existieren auf Blogbeiträgen
- Querschnittslinks verbinden Funktionen mit Fallstudien, Blog mit Produktseiten
Ausgabeformat
Bei der Erstellung eines Seitenarchitekturplans liefere diese Ergebnisse:
1. Seitenhierarchie (ASCII-Baum)
Vollständige Seitenstruktur mit URLs an jedem Knoten. Verwende das ASCII-Baumformat aus dem Abschnitt "Design der Seitenhierarchie".
2. Visuelle Sitemap (Mermaid)
Mermaid-Diagramm, das Seitenbeziehungen und Navigationszonen zeigt. Verwende graph TD mit Subgraphen für Navigationszonen, wo hilfreich.
3. URL-Map-Tabelle
| Seite | URL | Übergeordnete Seite | Navigationsort | Priorität |
|---|---|---|---|---|
| Startseite | / | — | Kopfzeile | Hoch |
| Funktionen | /features | Startseite | Kopfzeile | Hoch |
| Analysen | /features/analytics | Funktionen | Kopfzeilen-Dropdown | Mittel |
| Preise | /pricing | Startseite | Kopfzeile | Hoch |
| Blog | /blog | Startseite | Kopfzeile | Mittel |
4. Navigationsspezifikation
- Kopfzeilen-Navigationseinträge (geordnet, mit CTA)
- Fußzeilenbereiche und -links
- Seitenleisten-Navigation (falls zutreffend)
- Hinweise zur Breadcrumb-Implementierung
5. Plan für interne Verlinkung
- Hub-Seiten und ihre Speichen
- Möglichkeiten für Querschnittslinks
- Audit für verwaiste Seiten (falls Umstrukturierung)
- Empfohlene Links pro Schlüsselseite
Aufgabenspezifische Fragen
- Handelt es sich um eine neue Website oder um die Umstrukturierung einer bestehenden?
- Um welchen Seitentyp handelt es sich? (SaaS, Content, E-Commerce, Docs, Hybrid, Kleines Unternehmen)
- Wie viele Seiten existieren oder sind geplant?
- Was sind die 5 wichtigsten Seiten der Website?
- Gibt es bestehende URLs, die erhalten oder weitergeleitet werden müssen?
- Wer sind die primären Zielgruppen, und was versuchen sie auf der Website zu erreichen?
Verwandte Fähigkeiten
- content-strategy: Für die Planung, welche Inhalte erstellt werden sollen, und für Themencluster
- programmatic-seo: Für den Aufbau von SEO-Seiten in großem Maßstab mit Vorlagen und Daten
- seo-audit: Für technisches SEO, On-Page-Optimierung und Indexierungsprobleme
- cro: Für die Optimierung einzelner Seiten zur Conversion
- schema: Für die Implementierung von strukturierten Daten für Breadcrumbs und Seitennavigation
- competitors: Für Frameworks und URL-Muster von Vergleichsseiten