Site Structure & Navigation: Organize for Users and Search Engines

Quick Definition: Site structure is how you organize and connect all the pages on your website. Good structure helps users find what they need quickly and helps Google understand which pages are most important.

Key principle: If users can’t find it in 3 clicks, it might as well not exist.

---

Why Site Structure Matters

1. User Experience

Good structure:

Homepage → Services → Web Design → View Portfolio
(3 clicks to conversion)

Bad structure:

Homepage → About → Team → John's Bio → Projects → Old Client Work → Portfolio
(7 clicks to find the same thing)

Result:

• Good structure: Higher conversion rates, lower bounce rates
• Bad structure: Users leave frustrated

2. SEO Value

How Google understands importance:

• Pages closer to homepage = more important
• Pages with more internal links = more important
• Clear hierarchy = easier to crawl and index

Example:

Homepage (most important)
  → Category Pages (important)
    → Individual Product/Article Pages (less important)
      → Supporting Pages (least important)

3. Crawl Efficiency

Flat structure (good for small sites):

Homepage
  → Page A
  → Page B
  → Page C

Google can crawl entire site in 2 hops.

Deep structure (problematic):

Homepage
  → Category
    → Subcategory
      → Sub-subcategory
        → Page (5 clicks deep!)

Google may not crawl deep pages frequently (or at all).

---

Site Structure Models

Flat Structure (Small Sites)

Best for: Sites with under 50 pages (portfolios, small businesses, landing pages)

Structure:

Homepage
  ├── About
  ├── Services
  ├── Portfolio
  ├── Blog
  └── Contact

Advantages:

• Simple navigation
• Every page is 1-2 clicks from homepage
• Easy to crawl

Disadvantages:

• Doesn’t scale beyond about 50 pages
• Hard to categorize diverse content

Hierarchical Structure (Medium-Large Sites)

Best for: E-commerce, large blogs, corporate sites

Structure:

Homepage
  ├── Products
  │     ├── Category A
  │     │     ├── Product 1
  │     │     └── Product 2
  │     └── Category B
  │           ├── Product 3
  │           └── Product 4
  ├── Blog
  │     ├── SEO
  │     │     └── Article 1
  │     └── Marketing
  │           └── Article 2
  └── Support
        ├── FAQ
        └── Contact

Advantages:

• Scales to thousands of pages
• Clear organization
• Easy to navigate

Disadvantages:

• Deep pages may get less link equity
• Requires careful planning

Database-Driven Structure (Large Sites)

Best for: News sites, directories, marketplace sites (1,000+ pages)

Structure:

Homepage
  → Topic Hub
    → Subtopic
      → Individual Articles (100s or 1,000s)

Example (news site):

Homepage
  → Politics
    → Elections
      → Article 1, 2, 3... 500
    → Policy
      → Article 501, 502... 1,000

Key feature: Pagination, faceted navigation, filters

---

Best Practices

1. Keep Important Pages 3 Clicks from Homepage

Rule: Critical pages (conversions, popular content) should be reachable in 3 clicks or fewer.

Check your structure:

1. Identify conversion pages (products, services, contact)
2. Navigate from homepage
3. Count clicks to reach each page

If >3 clicks:

• Add to main navigation
• Link from homepage
• Create category/hub page closer to homepage

2. Use Logical URL Structure

Good URL hierarchy:

example.com/                          (homepage)
example.com/products/                 (category)
example.com/products/shoes/           (subcategory)
example.com/products/shoes/nike-air   (product)

Bad URL structure:

example.com/p?id=12345
example.com/products-shoes-nike-air-max-2024-blue-size-10
example.com/blog/2024/01/15/post-title

Best practices:

• Mirror navigation structure
• Use keywords in URLs
• Keep URLs short and readable
• Use hyphens (not underscores)
• Don’t include dates (hard to update)
• Don’t use parameters when possible

3. Implement Breadcrumb Navigation

What breadcrumbs look like:

Home > Products > Shoes > Nike Air Max

HTML (with schema markup):

<nav aria-label="Breadcrumb">
  <ol itemscope itemtype="https://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="/"><span itemprop="name">Home</span></a>
      <meta itemprop="position" content="1" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="/products"><span itemprop="name">Products</span></a>
      <meta itemprop="position" content="2" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="/products/shoes"><span itemprop="name">Shoes</span></a>
      <meta itemprop="position" content="3" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <span itemprop="name">Nike Air Max</span>
      <meta itemprop="position" content="4" />
    </li>
  </ol>
</nav>

Benefits:

• Helps Google understand site structure
• Can appear in search results (breadcrumb rich snippets)
• Improves user navigation

4. Create Clear Navigation Menus

Main navigation best practices:

Good navigation:

Home | Products | Services | Blog | Contact
         ↓
    Dropdown:
    - Category A
    - Category B
    - Category C

Bad navigation:

Home | About | About Us | Our Story | Meet the Team | Company History | ...
(Too many top-level items)

Guidelines:

• 5-7 top-level items (max)
• Use dropdowns for subcategories
• Include search bar for large sites
• Highlight current page
• Don’t hide navigation on mobile (use hamburger menu instead)
• Don’t use mega-menus with 50+ links (poor UX, dilutes link equity)

5. Use Categories and Tags (Blogs)

Blog structure:

Blog Homepage
  ├── Category: SEO (10 posts)
  ├── Category: Content Marketing (15 posts)
  └── Category: Social Media (8 posts)

Tags (cross-category):

Tag: Beginner (posts from all categories)
Tag: Tools (posts about tools)
Tag: Case Studies (posts with case studies)

Best practices:

• Categories = broad topics (5-10 max)
• Every post has 1 category
• Tags = specific topics (can have many)
• Every post has 2-5 tags
• Don’t create category with only 1-2 posts
• Don’t create 100+ tags (too granular)

---

Navigation Types

Primary Navigation (Header)

What it includes:

• Main categories
• Search bar
• Login/account link

Example:

[Logo]  Home  Products  Services  Blog  Contact  [Search] [Login]

Secondary Navigation (Footer)

What it includes:

• Company info (About, Careers, Press)
• Legal (Privacy, Terms, Cookies)
• Support (FAQ, Contact, Help Center)
• Social links

Example:

Company:        Products:       Support:        Legal:
- About         - Product A     - FAQ           - Privacy
- Careers       - Product B     - Contact       - Terms
- Press         - Product C     - Help Center   - Cookies

Sidebar Navigation (Contextual)

When to use: Blog posts, documentation, help centers

Example (blog sidebar):

Categories:
- SEO (23)
- Marketing (15)
- Tools (8)

Popular Posts:
- Post A
- Post B
- Post C

Newsletter Signup

Pagination (Large Lists)

For category pages with 100+ items:

Page 1 | 2 | 3 | ... | 10 | Next >

SEO best practices:

<!-- On page 2 -->
<link rel="prev" href="/category/page/1">
<link rel="next" href="/category/page/3">

Alternatively: Use “Load More” button (infinite scroll has SEO downsides)

---

Information Architecture Planning

Step 1: List All Pages

Create a spreadsheet:

| Page Title          | Category      | Priority |
|---------------------|---------------|----------|
| Homepage            | -             | High     |
| About               | Company       | Medium   |
| SEO Services        | Services      | High     |
| Web Design Services | Services      | High     |
| Blog: SEO Tips      | Blog          | Medium   |

Step 2: Group into Categories

Identify patterns:

• Services pages → Group under “Services”
• Product pages → Group under “Products”
• Blog posts → Group under “Blog” with subcategories

Step 3: Sketch Hierarchy

Use a tool like:

• Whimsical
• Miro
• Draw.io
• Pen and paper

Example sketch:

           Homepage
              |
    +---------+---------+
    |         |         |
Products  Services    Blog
    |         |         |
  +-+-+     +-+-+     +-+-+
  | | |     | | |     | | |
  A B C     X Y Z     1 2 3

Step 4: Validate with Users

Card sorting exercise:

1. Write each page title on a card
2. Ask users to group them into categories
3. See if your structure matches their mental model

Result: Structure that makes sense to actual users

---

Common Mistakes

Too Many Top-Level Categories

Problem:

Home | Services | Products | About | Team | Careers | Blog | News | Events | FAQ | Contact | Privacy | Terms

Result: Overwhelming, dilutes link equity, hard to navigate

Fix: Group related items

Home | Services | Products | About | Blog | Contact
                              ↓
                         Dropdown:
                         - Our Team
                         - Careers

---

Orphan Pages

Problem: Important pages with zero internal links

How it happens:

• Page created but never added to navigation
• Old page removed from menu but not deleted
• Temporary page that became permanent

Fix:

• Add to navigation
• Link from relevant pages
• Or delete if truly unnecessary

---

Inconsistent URL Structure

Problem:

example.com/products/shoes
example.com/blog-posts/seo-tips
example.com/service-pages/web-design

Better:

example.com/products/shoes
example.com/blog/seo-tips
example.com/services/web-design

Why consistency matters:

• Easier for users to predict URLs
• Cleaner internal linking
• Better crawl efficiency

---

Tools for Analyzing Site Structure

Google Search Console

Sitemaps report:

• Shows how many pages Google discovered
• Check if all important pages are indexed

Coverage report:

• “Discovered - currently not indexed” = potential orphan pages

Screaming Frog SEO Spider

Tree Graph view:

1. Crawl your site
2. Visualisation → Tree Graph
3. See visual hierarchy of your site

Crawl Depth report:

1. Reports → Crawl Depth
2. Identify pages 5+ clicks from homepage

Orphan pages report:

1. Upload XML sitemap
2. Compare to crawled pages
3. Find pages in sitemap but not linked internally

Visual Sitemaps

Tools:

• Slickplan
• Dynomapper
• Mindomo

What they do: Auto-generate visual sitemap from your site

---

What Surmado Checks

Surmado Scan looks for:

• Orphan pages (pages with no internal links)
• Deep pages (5+ clicks from homepage)
• Broken navigation links
• Inconsistent URL structure
• Missing breadcrumbs (on applicable pages)

---

Quick Reference

Site structure checklist:

• Important pages within 3 clicks of homepage
• Clear URL hierarchy (mirror navigation)
• Breadcrumbs on category/product pages
• 5-7 top-level navigation items
• Every page linked from at least one other page
• Logical categorization (users can predict where things are)
• No orphan pages
• No pages 5+ clicks deep

URL structure:

Good:
example.com/category/subcategory/page

Bad:
example.com/index.php?cat=12&post=456

Navigation hierarchy:

Homepage (100% link equity)
  → Category Pages (30-40% equity)
    → Individual Pages (10-15% equity)

---

→ Related: Internal Linking Strategy | XML Sitemaps Explained | Crawl Budget