Site Architecture

---
name: Site Architecture
description: Use when the user wants to plan, map, or restructure page hierarchy, navigation, URL structure, breadcrumbs, or internal linking for a website — sitemaps, information architecture, or site navigation.
category: SEO & Content
version: 2.0.0
tools: []
---

# Site Architecture

Plan website structure — page hierarchy, navigation, URL patterns, and internal linking — so the site is intuitive for users and optimized for search engines.

## Before Planning

Search the Knowledge Base for any existing product-marketing context before asking questions; use what's already documented and only ask about what's missing.

Gather this context if not already provided:

1. **Business Context** — what the company does, primary audiences, top 3 goals for the site (conversions, SEO traffic, education, support)
2. **Current State** — new site or restructuring; if restructuring, what's broken (high bounce, poor SEO, users can't find things); existing URLs that must be preserved for redirects
3. **Site Type** — SaaS marketing site, content/blog, e-commerce, documentation, hybrid, or small business/local
4. **Content Inventory** — how many pages exist or are planned, the most important pages by traffic/conversions/business value, any planned expansions

## Site Types and Starting Points

| Site Type | Typical Depth | Key Sections | URL Pattern |
|-----------|--------------|--------------|-------------|
| SaaS marketing | 2-3 levels | Home, Features, Pricing, Blog, Docs | `/features/name`, `/blog/slug` |
| Content/blog | 2-3 levels | Home, Blog, Categories, About | `/blog/slug`, `/category/slug` |
| E-commerce | 3-4 levels | Home, Categories, Products, Cart | `/category/subcategory/product` |
| Documentation | 3-4 levels | Home, Guides, API Reference | `/docs/section/page` |
| Hybrid SaaS+content | 3-4 levels | Home, Product, Blog, Resources, Docs | `/product/feature`, `/blog/slug` |
| Small business | 1-2 levels | Home, Services, About, Contact | `/services/name` |

## Page Hierarchy Design

**The 3-click rule** — users should reach any important page within 3 clicks of the homepage. Not absolute, but critical pages buried 4+ levels deep is a red flag.

**Flat vs. deep** — flat (2 levels) suits small sites but doesn't scale; moderate (3 levels) balances depth and findability for most SaaS/content sites; deep (4+ levels) scales for e-commerce and large docs but risks burying content. Rule of thumb: go as flat as possible while keeping navigation clean — if a nav dropdown has 20+ items, add a level of hierarchy.

**Hierarchy levels** — L0 homepage (`/`), L1 primary sections (`/features`, `/blog`, `/pricing`), L2 section pages (`/features/analytics`), L3+ detail pages (`/docs/api/authentication`).

**ASCII tree format** — render the hierarchy as an indented tree with URLs at each node, e.g.:

```
Homepage (/)
├── Features (/features)
│   ├── Analytics (/features/analytics)
│   └── Automation (/features/automation)
├── Pricing (/pricing)
├── Blog (/blog)
└── Docs (/docs)
```

Use ASCII trees for quick text drafts; use a Mermaid diagram when a visual, presentable structure is needed (see Visual Sitemap below).

## Navigation Design

| Nav Type | Purpose | Placement |
|----------|---------|-----------|
| Header nav | Primary navigation, always visible | Top of every page |
| Dropdown menus | Organize sub-pages under a parent | Expands from header items |
| Footer nav | Secondary links, legal, sitemap | Bottom of every page |
| Sidebar nav | Section navigation (docs, blog) | Left side within a section |
| Breadcrumbs | Show current location in hierarchy | Below header, above content |
| Contextual links | Related content, next steps | Within page content |

**Header rules** — 4-7 items max (more causes decision paralysis); CTA button rightmost ("Start Free Trial," "Get Started"); logo links home on the left; order by priority; mega menus limited to 3-4 columns.

**Footer organization** — group into columns, typically Product (Features, Pricing, Integrations, Changelog), Resources (Blog, Case Studies, Templates, Docs), Company (About, Careers, Contact, Press), and Legal (Privacy, Terms, Security).

**Breadcrumbs** should mirror the URL hierarchy exactly (e.g., `Home > Features > Analytics`), with every segment a clickable link except the current page.

## URL Structure

Design principles: readable by humans (`/features/analytics`, not `/f/a123`); hyphens not underscores; the path should reflect the hierarchy; pick one trailing-slash policy and enforce it; always lowercase; short but descriptive.

| Page Type | Pattern | Example |
|-----------|---------|---------|
| Feature page | `/features/{name}` | `/features/analytics` |
| Blog post | `/blog/{slug}` | `/blog/seo-guide` |
| Blog category | `/blog/category/{slug}` | `/blog/category/seo` |
| Case study | `/customers/{slug}` | `/customers/acme-corp` |
| Documentation | `/docs/{section}/{page}` | `/docs/api/authentication` |
| Comparison | `/compare/{competitor}` or `/vs/{competitor}` | `/compare/competitor-name` |
| Integration | `/integrations/{name}` | `/integrations/slack` |

**Common mistakes**: dates in blog URLs (adds no value, use `/blog/post-title`); over-nesting past 3-4 levels; changing a URL without a 301 redirect (loses backlink equity, breaks bookmarks/links); numeric IDs instead of slugs; content addressed by query parameter instead of path; mixing URL patterns for the same content type (pick one parent and stick to it).

Breadcrumbs should align with the URL path: `/features/analytics` → `Home > Features > Analytics`; `/docs/api/auth` → `Home > Docs > API > Authentication`.

## Visual Sitemap (Mermaid)

Use Mermaid `graph TD` for a visual sitemap when hierarchy relationships need to be presented clearly, optionally with `subgraph` blocks to annotate navigation zones (Header Nav vs. Footer Nav):

```mermaid
graph TD
    HOME[Homepage] --> FEAT[Features]
    HOME --> PRICE[Pricing]
    HOME --> BLOG[Blog]
    FEAT --> F1[Analytics]
    FEAT --> F2[Automation]
```

## Internal Linking Strategy

**Link types** — navigational (header/footer/sidebar), contextual (related content within body text), hub-and-spoke (cluster content linking to a pillar page), cross-section (feature page linking to a related case study).

**Rules** — no orphan pages (every page needs at least one inbound internal link); descriptive anchor text ("our analytics features," not "click here"); roughly 5-10 internal links per 1000 words as a guideline; link to important pages more often; use breadcrumbs as free internal links; add "related content" sections at the bottom of pages.

**Hub-and-Spoke Model** — organize content-heavy sites around hub pages. A comprehensive hub page (e.g., `/blog/seo-guide`) links out to narrower spoke pages (`/blog/keyword-research`, `/blog/on-page-seo`, `/blog/technical-seo`), each of which links back to the hub, and spokes link to each other where relevant. This concentrates topical authority on the hub while still surfacing depth through the spokes.

**Link audit checklist** — every page has at least one inbound internal link; no broken internal links; anchor text is descriptive; important pages carry the most inbound links; breadcrumbs implemented site-wide; related-content links present on blog posts; cross-section links connect features to case studies and blog to product pages.

## Output Format

When producing a site architecture plan, deliver:

1. **Page hierarchy** as an ASCII tree with URLs at each node
2. **Visual sitemap** as a Mermaid diagram showing relationships and nav zones
3. **URL map table** — Page, URL, Parent, Nav Location, Priority
4. **Navigation spec** — header nav items (ordered, with CTA), footer sections, sidebar nav if applicable, breadcrumb notes
5. **Internal linking plan** — hub pages and their spokes, cross-section link opportunities, orphan-page audit if restructuring, recommended links per key page

## Task-Specific Questions

1. New site or restructuring an existing one?
2. What type of site is it?
3. How many pages exist or are planned?
4. What are the 5 most important pages?
5. Are there existing URLs that must be preserved or redirected?
6. Who are the primary audiences, and what are they trying to accomplish?

For adjacent work — content strategy, programmatic SEO at scale, technical SEO audits, or conversion optimization — @mention the teammate who owns that area.