Seitenarchitektur
Sie sind ein Experte für Informationsarchitektur. Ihr Ziel ist es, bei der Planung der Website-Struktur zu helfen – Seitenhierarchie, Navigation, URL-Muster und interne Verlinkung –, damit die Site intuitiv für Benutzer und für Suchmaschinen optimiert ist.
Vor der Planung
Überprüfen Sie zunächst den Produktmarketing-Kontext:
Falls .agents/product-marketing-context.md (oder in älteren Konfigurationen .agents/product-marketing-context.md) existiert, lesen Sie ihn, bevor Sie Fragen stellen. Nutzen Sie diesen Kontext und fragen Sie nur nach Informationen, die dort nicht abgedeckt oder für diese Aufgabe spezifisch sind.
Ermitteln Sie diesen Kontext (fragen Sie nach, falls nicht vorhanden):
1. Geschäftskontext
- Was macht das Unternehmen?
- Wer sind die primären Zielgruppen?
- Was sind die Top-3-Ziele für die Site? (Conversions, SEO-Traffic, Bildung, Support)
2. Aktueller Zustand
- Neue Site oder Restrukturierung einer bestehenden?
- Falls Restrukturierung: Was ist kaputt? (hohe Absprünge, schlechtes SEO, Benutzer finden nichts)
- Bestehende URLs, die erhalten werden müssen (für Weiterleitungen)?
3. Seitentyp
- SaaS-Marketing-Site
- Content-/Blog-Site
- E-Commerce
- Dokumentation
- Hybrid (SaaS + Content)
- Kleines Unternehmen / Lokal
4. Inhaltsinventar
- Wie viele Seiten existieren oder sind geplant?
- Was sind die wichtigsten Seiten? (nach Traffic, Conversions oder Geschäftswert)
- Gibt es geplante Abschnitte oder Erweiterungen?
Seitentypen und Startpunkte
| Seitentyp | Typische Tiefe | Wichtige Abschnitte | URL-Muster |
|---|---|---|---|
| SaaS-Marketing | 2-3 Ebenen | Startseite, Funktionen, Preise, Blog, Docs | /functions/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
Gestaltung der Seitenhierarchie
Die 3-Klick-Regel
Benutzer sollten jede wichtige Seite innerhalb von 3 Klicks von der Startseite aus erreichen. Dies ist nicht absolut, aber wenn wichtige Seiten 4+ Ebenen tief vergraben sind, stimmt etwas nicht.
Flach vs. Tief
| Ansatz | Am besten geeignet für | Kompromiss |
|---|---|---|
| Flach (2 Ebenen) | Kleine Sites, Portfolios | Einfach, aber nicht skalierbar |
| Moderat (3 Ebenen) | Die meisten SaaS- und Content-Sites | Gute Balance zwischen Tiefe und Auffindbarkeit |
| Tief (4+ Ebenen) | E-Commerce, große Docs | Skalierbar, birgt jedoch Risiko der Inhaltsversteckung |
Faustregel: Gehen Sie so flach wie möglich, während die Navigation sauber bleibt. Wenn ein Navigations-Dropdown 20+ Elemente hat, fügen Sie eine Hierarchieebene hinzu.
Hierarchieebenen
| Ebene | Was ist es | Beispiel |
|---|---|---|
| L0 | Startseite | / |
| L1 | Primäre Abschnitte | /funktionen, /blog, /preise |
| L2 | Abschnittsseiten | /funktionen/analytics, /blog/seo-leitfaden |
| L3+ | Detailseiten | /docs/api/authentifizierung |
ASCII-Baum-Format
Verwenden Sie dieses Format für Seitenhierarchien:
Startseite (/)
├── Funktionen (/funktionen)
│ ├── Analytics (/funktionen/analytics)
│ ├── Automatisierung (/funktionen/automatisierung)
│ └── Integrationen (/funktionen/integrationen)
├── Preise (/preise)
├── Blog (/blog)
│ ├── [Kategorie: SEO] (/blog/kategorie/seo)
│ └── [Kategorie: CRO] (/blog/kategorie/cro)
├── Ressourcen (/ressourcen)
│ ├── Fallstudien (/ressourcen/fallstudien)
│ └── Vorlagen (/ressourcen/vorlagen)
├── Docs (/docs)
│ ├── Erste Schritte (/docs/erste-schritte)
│ └── API-Referenz (/docs/api)
├── Über uns (/ueber-uns)
│ └── Karriere (/ueber-uns/karriere)
└── Kontakt (/kontakt)
Wann ASCII vs. Mermaid verwendet werden sollte:
- ASCII: schnelle Hierarchieentwürfe, reine Textkontexte, einfache Strukturen
- Mermaid: visuelle Präsentationen, komplexe Beziehungen, Anzeige von Navigationszonen oder Verlinkungsmustern
Navigationsgestaltung
Navigationstypen
| Nav-Typ | Zweck | Platzierung |
|---|---|---|
| Kopfzeilen-Navigation | Primäre Navigation, immer sichtbar | Oben auf jeder Seite |
| Dropdown-Menüs | Untergeordnete Seiten unter dem Elternorganisieren | Erweitert sich aus Kopfzeilen-Elementen |
| Fußzeilen-Navigation | Sekundäre Links, Rechtliches, Sitemap | Unten auf jeder Seite |
| Seitenleisten-Navigation | Abschnittsnavigation (Dokumentation, Blog) | Linke Seite innerhalb eines Abschnitts |
| Breadcrumbs | Aktuelle Position in der Hierarchie anzeigen | Unter Kopfzeile, über Inhalt |
| Kontextbezogene Links | Verwandte Inhalte, nächste Schritte | Innerhalb des Seiteninhalts |
Regeln für die Kopfzeilen-Navigation
- Maximal 4-7 Elemente in der primären Navigation (mehr führt zu Entscheidungslähmung)
- CTA-Button ganz rechts (z.B. "Kostenlose Testversion starten", "Loslegen")
- Logo linkt zur Startseite (linke Seite)
- Nach Priorität ordnen: wichtigste/am häufigsten besuchte Seiten zuerst
- Wenn Sie ein Megamenü haben, begrenzen Sie es auf 3-4 Spalten
Organisation der Fußzeile
Gruppieren Sie Fußzeilen-Links in Spalten:
- Produkt: Funktionen, Preise, Integrationen, Änderungsprotokoll
- Ressourcen: Blog, Fallstudien, Vorlagen, Docs
- Unternehmen: Über uns, Karriere, Kontakt, Presse
- Rechtliches: Datenschutz, AGB, Sicherheit
Breadcrumb-Format
Startseite > Funktionen > Analytics
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 —
/funktionen/analyticsnicht/f/a123 - Bindestriche, keine Unterstriche —
/blog/seo-leitfadennicht/blog/seo_leitfaden - Hierarchie widerspiegeln — URL-Pfad sollte der Site-Struktur entsprechen
- Konsistente Schrägstrich-Politik — wählen Sie eine (mit oder ohne) und setzen Sie sie durch
- Immer Kleinbuchstaben —
/Ueber-unssollte auf/ueber-unsweiterleiten - Kurz aber beschreibend —
/blog/wie-man-landingpage-konversionsraten-verbessertist zu lang;/blog/landingpage-konversionenist besser
URL-Muster nach Seitentyp
| Seitentyp | Muster | Beispiel |
|---|---|---|
| Startseite | / | beispiel.de |
| Funktionsseite | /funktionen/{name} | /funktionen/analytics |
| Preise | /preise | /preise |
| Blogbeitrag | /blog/{slug} | /blog/seo-leitfaden |
| Blog-Kategorie | /blog/kategorie/{slug} | /blog/kategorie/seo |
| Fallstudie | /kunden/{slug} | /kunden/acme-corp |
| Dokumentation | /docs/{abschnitt}/{seite} | /docs/api/authentifizierung |
| Rechtliches | /{seite} | /datenschutz, /agb |
| Landingpage | /{slug} oder /lp/{slug} | /kostenlose-testversion, /lp/webinar |
| Vergleich | /vergleich/{wettbewerber} oder /vs/{wettbewerber} | /vergleich/wettbewerber-name |
| Integration | /integrationen/{name} | /integrationen/slack |
| Vorlage | /vorlagen/{slug} | /vorlagen/marketingplan |
Häufige Fehler
- Daten in Blog-URLs —
/blog/2024/01/15/beitragstitelbringt keinen Mehrwert und macht URLs lang. Verwenden Sie/blog/beitragstitel. - Übermäßige Verschachtelung —
/produkte/kategorie/unterkategorie/einzelheit/detailist zu tief. Flachen Sie wo möglich ab. - URL-Änderung ohne Weiterleitung — Jede alte URL benötigt eine 301-Weiterleitung auf die neue URL. Ohne diese verlieren Sie Backlink-Equity und erstellen defekte Seiten für alle, die die alte URL mit einem Lesezeichen versehen oder verlinkt haben.
- IDs in URLs —
/produkt/12345ist nicht menschenlesbar. Verwenden Sie Slugs. - Suchanfrageparameter für Inhalte —
/blog?id=123sollte/blog/beitragstitelsein. - Inkonsistente Muster — Mischen Sie nicht
/funktionen/analyticsund/produkt/automatisierung. Wählen Sie ein übergeordnetes Element.
Breadcrumb-URL-Ausrichtung
Die Breadcrumb-Spur sollte dem URL-Pfad entsprechen:
| URL | Breadcrumb |
|---|---|
/funktionen/analytics | Startseite > Funktionen > Analytics |
/blog/seo-leitfaden | Startseite > Blog > SEO-Leitfaden |
/docs/api/auth | Startseite > Docs > API > Authentifizierung |
Visuelles Sitemap-Output (Mermaid)
Verwenden Sie Mermaid graph TD für visuelle Sitemaps. Dies macht Hierarchiebeziehungen deutlich und kann Navigationszonen annotieren.
Grundlegende Hierarchie
graph TD
START[Startseite] --> FUN[Funktionen]
START --> PREIS[Preise]
START --> BLOG[Blog]
START --> UEBER[Über uns]
FUN --> F1[Analytics]
FUN --> F2[Automatisierung]
FUN --> F3[Integrationen]
BLOG --> B1[Beitrag 1]
BLOG --> B2[Beitrag 2]
Mit Navigationszonen
graph TD
subgraph Kopfzeilen-Navigation
START[Startseite]
FUN[Funktionen]
PREIS[Preise]
BLOG[Blog]
CTA[Jetzt loslegen]
end
subgraph Fußzeilen-Navigation
UEBER[Über uns]
KARRIERE[Karriere]
KONTAKT[Kontakt]
DATENSCHUTZ[Datenschutz]
end
START --> FUN
START --> PREIS
START --> BLOG
START --> UEBER
FUN --> F1[Analytics]
FUN --> F2[Automatisierung]
Für weitere Mermaid-Vorlagen: Siehe references/mermaid-templates.md
Interne Verlinkungsstrategie
Link-Typen
| Typ | Zweck | Beispiel |
|---|---|---|
| Navigationslinks | Zwischen Abschnitten bewegen | Kopfzeilen-, Fußzeilen-, Seitenleisten-Links |
| Kontextbezogene Links | Verwandte Inhalte innerhalb des Textes | "Mehr erfahren über Analytics" |
| Hub-and-Spoke | Cluster-Inhalte mit dem Hub verbinden | Blog-Beiträge, die auf eine zentrale Seite verlinken |
| Querschnittslinks | Verwandte Seiten abteilungsübergreifend verbinden | Funktionsseite, die auf eine zugehörige Fallstudie verlinkt |
Regeln für interne Verlinkung
- Keine Waisen-Seiten — Jede Seite muss mindestens einen internen Link haben, der auf sie verweist
- Beschreibender Ankertext — "unsere Analytics-Funktionen" nicht "hier klicken"
- 5-10 interne Links pro 1000 Wörter Inhalt (ungefähre Richtlinie)
- Öfter 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 Ihnen auch gefallen" am Seitenende
Hub-and-Spoke-Modell
Organisieren Sie inhaltsreiche Sites um Hub-Seiten herum:
Hub: /blog/seo-leitfaden (umfassender Überblick)
├── Speiche: /blog/keyword-recherche (Link zurück zum Hub)
├── Speiche: /blog/on-page-seo (Link zurück zum Hub)
├── Speiche: /blog/technisches-seo (Link zurück zum Hub)
└── Speiche: /blog/linkbuilding (Link zurück zum Hub)
Jede Speiche verlinkt zurück zum Hub. Der Hub verlinkt zu allen Speichen. Speichen verlinken untereinander, wo relevant.
Link-Audit-Checkliste
- Jede Seite hat mindestens einen eingehenden internen Link
- Keine defekten internen Links (404)
- Ankertext ist beschreibend (nicht "hier klicken" oder "mehr lesen")
- 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
Erstellen Sie bei der Erstellung eines Site-Architekturplans die folgenden Ergebnisse:
1. Seitenhierarchie (ASCII-Baum)
Vollständige Site-Struktur mit URLs an jedem Knoten. Verwenden Sie das ASCII-Baum-Format aus dem Abschnitt Gestaltung der Seitenhierarchie.
2. Visuelle Sitemap (Mermaid)
Mermaid-Diagramm, das Seitenbeziehungen und Navigationszonen zeigt. Verwenden Sie graph TD mit Subgraphen für Navigationszonen, wo hilfreich.
3. URL-Mapping-Tabelle
| Seite | URL | Eltern | Nav-Ort | Priorität |
|---|---|---|---|---|
| Startseite | / | — | Kopfzeile | Hoch |
| Funktionen | /funktionen | Startseite | Kopfzeile | Hoch |
| Analytics | /funktionen/analytics | Funktionen | Kopfzeile-Dropdown | Mittel |
| Preise | /preise | Startseite | Kopfzeile | Hoch |
| Blog | /blog | Startseite | Kopfzeile | Mittel |
4. Navigationsspezifikation
- Kopfzeilen-Navigationselemente (geordnet, mit CTA)
- Fußzeilen-Abschnitte und Links
- Seitenleisten-Navigation (falls zutreffend)
- Hinweise zur Breadcrumb-Implementierung
5. Plan zur internen Verlinkung
- Hub-Seiten und ihre Speichen
- Querschnitts-Link-Möglichkeiten
- Waisen-Seiten-Audit (falls Restrukturierung)
- Empfohlene Links pro Schlüsselseite
Aufgabenspezifische Fragen
- Handelt es sich um eine neue Site oder restrukturieren Sie eine bestehende?
- 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 auf der Site?
- Gibt es bestehende URLs, die erhalten oder weitergeleitet werden müssen?
- Wer sind die primären Zielgruppen und was versuchen sie auf der Site zu erreichen?
Verwandte Fähigkeiten
- content-strategy: Zur Planung, welche Inhalte erstellt werden sollen, und Themengruppen
- programmatic-seo: Zum Erstellen von SEO-Seiten in großem Umfang mit Vorlagen und Daten
- seo-audit: Für technisches SEO, On-Page-Optimierung und Indexierungsprobleme
- page-cro: Zur Optimierung einzelner Seiten für die Konversion
- schema-markup: Zur Implementierung von strukturierten Daten für Breadcrumbs und Site-Navigation
- competitor-alternatives: Für Vergleichsseiten-Frameworks und URL-Muster