Visual sitemap examples: a gallery of site architecture patterns

Every agency that has ever pitched a site redesign has wished for a folder of "here's what good architecture looks like" examples to show the client. That folder doesn't exist in any useful form online. The visual sitemap examples you find through search are either too abstract (boxes connected by lines with no context), too specific (one site's architecture with no annotation explaining why), or too old (Photoshop mockups from 2014).

This gallery fills that gap. Seven real architecture patterns, annotated with the reasoning behind each structural choice — not just what the sitemap looks like, but why it's shaped that way and what the SEO tradeoffs are. If you're planning a site restructure, presenting architecture options to a client, or just want to understand how different site types organize content, these examples are the reference.

For the underlying principles behind site architecture, the Website Information Architecture guide covers the theory. This gallery is the practice.

What makes a visual sitemap useful

Before the examples, a quick calibration on what separates a useful visual sitemap from a decoration.

A useful visual sitemap answers three questions at a glance:

1. How deep is the site? How many levels of hierarchy exist between the homepage and the deepest content page?
2. How wide is each level? Does the navigation branch into 4 sections or 40?
3. Where are the structural anomalies? Orphan pages, sections that are disproportionately deep, pages that could be siblings but ended up as cousins.

If the sitemap doesn't answer these questions without supplementary explanation, it's a wireframe, not a sitemap. The difference between an XML sitemap and a visual sitemap is covered in the sitemap vs visual sitemap guide — but in short, visual sitemaps are the communication tool, not the technical implementation.

The seven architecture patterns

Pattern 1: SaaS marketing site (flat, wide)

Structure: Homepage → 5–8 top-level sections (Product, Pricing, Solutions, Resources, Company) → 2–4 pages per section → blog as a separate subtree.

Depth: 3 levels maximum. Most pages are reachable in 2 clicks from the homepage.

Why this works: SaaS marketing sites have a small total page count (typically 30–80 pages) and a conversion-focused IA. Every page exists to move a visitor closer to signup or demo request. Flat architecture ensures every page gets crawled frequently and receives link equity from the homepage.

SEO characteristics: High internal link density at the top level. The homepage typically links to every major section directly. Blog content sits in a parallel subtree (/blog/) that links back to product and feature pages contextually. The site architecture SEO best practices guide covers the linking patterns in detail.

When it breaks: When the site grows past 100 pages without restructuring. SaaS companies that add features, integrations, and use cases over time end up with 15 top-level navigation items and a homepage that links to everything — which means it links to nothing effectively.

Pattern 2: Ecommerce catalog (deep, taxonomic)

Structure: Homepage → Department (5–12) → Category (3–8 per department) → Subcategory (2–5 per category) → Product page.

Depth: 4–5 levels. The deepest pages (products) are 4 clicks from the homepage.

Why this works: Ecommerce sites have thousands to millions of pages organized by a taxonomy that mirrors how shoppers browse. The hierarchy creates a natural faceted navigation: Department → Category → Subcategory mirrors the customer's narrowing intent. Each level page (department, category, subcategory) is a potential organic landing page targeting progressively more specific keywords.

SEO characteristics: Category and subcategory pages are the primary SEO landing pages — not individual products (which compete with every other retailer selling the same product). Internal linking follows the taxonomy: each category page links to its subcategories, each subcategory links to its products, and breadcrumbs provide reverse navigation up the tree. Cross-linking between related categories prevents siloing.

When it breaks: When the taxonomy becomes inconsistent. A product that appears in three categories without a canonical URL strategy creates duplicate content. A subcategory with 500 products and no further subdivision creates a page that's impossible to crawl efficiently. The flat vs deep architecture guide covers when depth is appropriate — ecommerce is the canonical example.

Pattern 3: Media / publishing site (hybrid hub-and-spoke)

Structure: Homepage → Topic hubs (10–20) → Individual articles (50–500 per hub). Cross-links between articles in related hubs.

Depth: 2–3 levels. Articles are typically 2 clicks from the homepage (homepage → hub → article).

Why this works: Publishing sites need to balance two competing needs: editorial freshness (new articles should be discoverable immediately) and topical authority (Google should understand that the site is authoritative on specific topics). The hub-and-spoke model solves both. Hubs are evergreen pages that rank for broad keywords. Articles are the fresh content that feeds the hubs.

SEO characteristics: The homepage acts as a feed of recent content, providing initial crawl discovery. Topic hubs are the permanent structural anchors — they link to every article in their topic and get linked back by every article. This creates a strong topical cluster signal. Pagination on hub pages (or infinite scroll with proper implementation) ensures older articles remain crawlable.

When it breaks: When articles are published without being assigned to a hub. These become orphan content — discoverable through the homepage feed temporarily, but disconnected from the topical structure once they fall off the feed. Regular content audits catch orphaned articles before they lose rankings.

Pattern 4: Documentation site (deep, versioned)

Structure: Homepage → Product version → Section (Getting Started, API Reference, Guides, etc.) → Subsection → Individual page.

Depth: 4–6 levels. Deep by necessity — documentation reflects the complexity of the product it describes.

Why this works: Documentation sites mirror the structure of the product. Depth is meaningful because it represents increasing specificity: from "Getting Started" to "API Reference" to "Authentication" to "OAuth2 PKCE Flow." Users navigate by progressive narrowing, not by browsing.

SEO characteristics: Documentation sites often have the highest page counts of any site type. Versioned documentation creates a unique challenge: each version duplicates the entire page tree. Canonical tags should point to the latest version unless the user explicitly navigates to an older version. Search engines should index the current version and noindex older versions. Sidebar navigation provides dense internal linking that helps crawlers discover deep pages.

When it breaks: When versioning isn't handled with canonical tags and Google indexes three versions of every page. When sidebar navigation is loaded via JavaScript and not available in the initial HTML response — see the JavaScript rendering audit checklist for why this matters.

Pattern 5: Agency portfolio (flat, project-centric)

Structure: Homepage → Services (4–6) → Case Studies / Projects (10–30) → Blog. All top-level, minimal nesting.

Depth: 2 levels maximum. Intentionally shallow.

Why this works: Agencies have a small page count and a simple goal: demonstrate expertise and generate leads. The portfolio structure is flat because there's no taxonomic complexity — services are the categories, case studies are the proof, and the blog provides topical depth for SEO.

SEO characteristics: Case study pages are the primary organic landing pages. They target "[service] case study" and "[industry] agency" long-tail keywords. Internal linking connects each case study to the relevant service page and vice versa. The blog serves the same function as topic hubs in Pattern 3, but at a smaller scale — the content audit checklist for agencies covers how to audit this content.

When it breaks: Rarely, because the page count is small. The most common failure is letting the blog grow without a topic structure, creating a flat stream of unrelated articles that doesn't build topical authority in any single area.

Pattern 6: Corporate / enterprise site (wide, governance-heavy)

Structure: Homepage → Business units or audience segments (6–15) → Sub-sections per unit → Content pages. Often with a separate investor relations subtree and a careers subtree.

Depth: 3–4 levels. Moderate depth, wide at the top.

Why this works: Enterprise sites serve multiple audiences (customers, investors, job seekers, press, partners) and multiple business units. The architecture reflects organizational structure, which is a tradeoff — it's navigable by internal stakeholders who understand the org chart, but can be confusing for external visitors.

SEO characteristics: The homepage distributes link equity across many top-level sections, diluting it compared to a focused SaaS site. Each business unit section functions almost as an independent site. Internal linking between business units is often weak — a finding that surfaces immediately in a visual sitemap with SEO data overlay. The careers section and investor relations section often have strong independent authority due to external links from job boards and financial databases.

When it breaks: When governance is weak and individual business units add pages without coordinating with the central IA. This creates duplicate content (two business units publishing the same solution page), conflicting navigation (the same topic accessible through three different paths), and structural bloat.

Pattern 7: Marketplace / community platform (user-generated, deep)

Structure: Homepage → Category browse (10–30 categories) → Subcategory → Individual listing/profile. Plus user-generated content subtrees (forums, reviews, Q&A).

Depth: 4–5 levels. Similar to ecommerce, but with a user-generated layer.

Why this works: Marketplaces combine the taxonomic structure of ecommerce with user-generated content that provides unique, long-tail keyword coverage. Category and subcategory pages are curated landing pages. Individual listings provide specificity. User-generated content (reviews, questions, forum posts) adds a content layer that no amount of editorial effort could replicate.

SEO characteristics: The primary SEO challenge is quality control. User-generated pages may have thin content, duplicate content, or spam. Deciding which pages to index and which to noindex is a continuous governance task. Faceted navigation creates URL proliferation that needs canonical management and crawl budget control. The technical SEO audit checklist covers the indexation management challenges.

When it breaks: When every user-generated page is indexable by default. A marketplace with 100,000 listings where 40% have no content or duplicate content wastes crawl budget and dilutes quality signals.

What the patterns share

Across all seven patterns, three principles hold:

Every page earns its place through either search intent or structural necessity. A page that exists because "we needed somewhere to put this content" is a page that will underperform. A page that exists because it answers a specific search query or provides necessary navigation structure will compound in value.

Internal linking follows the hierarchy but doesn't stop there. Every pattern includes contextual cross-links between related content that would otherwise be structurally distant. Category-to-category links in ecommerce. Hub-to-hub links in publishing. Service-to-case-study links in agency portfolios. These cross-links are what prevent architectural silos.

The sitemap is a living document, not a launch artifact. Every pattern degrades over time without active governance. New content gets added. Old sections grow disproportionately. Pages get orphaned. A visual sitemap reviewed quarterly catches structural drift before it becomes a ranking problem.

How Evergreen visualizes these patterns

Describing architecture in prose has obvious limitations. The reason visual sitemaps exist is that spatial relationships are easier to see than to read about.

In Evergreen, the visual sitemap builder generates interactive site architecture diagrams from crawl data — not from manual drawing. You crawl a site and the visual sitemap reflects the actual page hierarchy, not the intended one. This distinction matters because the actual architecture often diverges from the intended architecture, and the divergence is where the problems are.

The visual sitemap shows depth distribution, page count per level, orphan pages, and internal link density — all overlaid on the architecture diagram. You can filter by content type, depth level, or SEO attributes (pages missing meta descriptions, pages with low internal link counts) to see not just the structure but the quality of the structure.

For agencies presenting architecture recommendations to clients, the visual sitemap is a shareable artifact. For in-house teams auditing their own site, it's a diagnostic tool. Either way, it answers the three questions from the top of this article — how deep, how wide, where are the anomalies — in seconds rather than hours.

Build yours in Evergreen. Start free →

Related resources

• Website Information Architecture: the complete guide — the foundational theory behind all of these patterns
• Sitemap vs visual sitemap: what's the difference? — XML sitemaps vs visual sitemaps
• Site architecture SEO best practices — the SEO implications of architecture decisions
• Flat vs deep site architecture: what the data says — the depth dimension explored in detail