Website Architecture & Structure

Site Hierarchy and Category Structure

Why Site Structure Matters

• Helps Google understand your site
• Better crawl efficiency
• Distributes authority
• Improves keyword targeting

• Intuitive navigation
• Easy to find information
• Better user experience
• Lower bounce rate

Flat vs Deep Structure

Homepage
├── Page 1
├── Page 2
├── Page 3
└── Page 4

Homepage
├── Category 1
│   ├── Page 1
│   ├── Page 2
│   └── Page 3
├── Category 2
│   ├── Page 4
│   └── Page 5

• 2-3 levels deep maximum
• Logical categories
• Clear navigation paths
• Mix of flat (home, popular) and organized (blog with categories)

Example: harsh-softwaredev.vercel.app Structure

Homepage (/)
├── About (/about)
├── Services
│   ├── Web Development (/services/web-development)
│   ├── Portfolio Design (/services/portfolio-design)
│   └── Technical SEO (/services/seo)
├── Blog (/blog)
│   ├── Tutorials (/blog/category/tutorials)
│   │   ├── React Hooks Guide (/blog/react-hooks)
│   │   ├── Next.js Tutorial (/blog/nextjs-tutorial)
│   │   └── CSS Grid Guide (/blog/css-grid)
│   ├── Web Design (/blog/category/web-design)
│   │   └── Responsive Design (/blog/responsive-design)
│   └── SEO (/blog/category/seo)
│       └── SEO Guide (/blog/seo-guide)
├── Portfolio (/portfolio)
│   ├── Project 1 (/portfolio/ecommerce-site)
│   └── Project 2 (/portfolio/saas-app)
└── Contact (/contact)

Breadcrumb Implementation

What are Breadcrumbs?

• Navigation aid showing current location
• Path from homepage to current page
• Hierarchical structure
• Improves UX and SEO

Home > Services > Web Development > Portfolio Sites

Types of Breadcrumbs

Home > Blog > Web Design > Color Theory Guide

Products > Laptops > Under $1000 > Windows

Home > About > Services > Contact
(based on pages visited)

SEO Benefits of Breadcrumbs

• ✅ Help Google understand site structure
• ✅ Rich snippet in search results
• ✅ Improve click-through rate
• ✅ Reduce bounce rate
• ✅ Better UX = lower bounce

Implementing Breadcrumbs

<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="/blog">
        <span itemprop="name">Blog</span>
      </a>
      <meta itemprop="position" content="2" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="/blog/seo">
        <span itemprop="name">SEO</span>
      </a>
      <meta itemprop="position" content="3" />
    </li>
  </ol>
</nav>

function Breadcrumbs({ items }) {
  return (
    <nav aria-label="breadcrumb">
      <ol className="breadcrumbs">
        {items.map((item, i) => (
          <li key={i}>
            <Link href={item.href}>{item.label}</Link>
            {i < items.length - 1 && <span> / </span>}
          </li>
        ))}
      </ol>
    </nav>
  )
}

Internal Linking Strategy (Deep Dive)

Linking Philosophy

• Distribute authority to important pages
• Create topical clusters
• Help Google understand relationships
• Improve crawlability

Internal Linking for Hierarchy

• Main categories
• High-priority pages
• Popular content
• Services/products

• Subcategories
• Child pages
• Related categories
• Home

• Related content
• Parent category
• Home (maybe)
• External resources

Advanced Internal Linking Strategies

Main Topic: React

Hub Page: "React Complete Guide"
├── Links to: "useState Hook"
├── Links to: "useEffect Hook"
├── Links to: "Custom Hooks"
└── Links to: "React Performance"

Related pages also link back to hub

Pillar: "Complete React Guide" (3,000 words)
  ↓ Links to cluster content
Cluster: "React Hooks" (1,500 words)
Cluster: "React Router" (1,500 words)
Cluster: "React Performance" (1,500 words)
  ↓ Cluster articles link back to pillar

        [Home]
          ↓
    [Main Category]
    ↙    ↓    ↘
  [Sub1] [Sub2] [Sub3]
  └─────────────┘ (all link back)

Topic Clusters and Pillar Pages

What are Topic Clusters?

• Pillar page (main topic, 3,000+ words)
• Cluster pages (subtopics, 1,500-2,000 words each)
• All cluster pages link to pillar
• Pillar links to all cluster pages

• ✅ Establish topical authority
• ✅ Better rankings for variations
• ✅ Clearer site structure
• ✅ More comprehensive coverage

Pillar Page Example

• Overview of e-commerce SEO
• Link to all cluster articles
• Updated regularly

1. "Product Page SEO Optimization" (1,500 words)
2. "E-commerce Technical SEO Checklist" (1,500 words)
3. "Building Backlinks for Online Stores" (1,500 words)
4. "E-commerce Content Strategy" (1,500 words)
5. "Keyword Research for E-commerce" (1,500 words)

• Link back to pillar in introduction
• Link to other related clusters
• Include schema markup
• Use consistent terminology

Navigation Optimization

Types of Navigation

• Logo/home link
• Main categories
• Contact link
• About link

• Breadcrumbs
• Related posts
• Category navigation
• Footer links

• Sidebar (related content)
• Tags
• Archives
• Search

Navigation Best Practices

• ✅ Clear and intuitive
• ✅ Consistent across site
• ✅ Accessible (keyboard, screen readers)
• ✅ Mobile responsive
• ✅ Not too many options

• ✅ Use descriptive anchor text
• ✅ Link to important pages
• ✅ Max depth 3-4 levels
• ✅ Include categories logically

• ❌ Flash-only navigation
• ❌ Image-only links without alt text
• ❌ Confusing navigation structure
• ❌ Duplicate navigation
• ❌ Too many links (> 100 per page)

Mobile Navigation

• Hide secondary nav in menu
• Keep primary links visible
• Touch-friendly buttons (48px+)
• Easy to close

• ✅ Test on actual devices
• ✅ Large touch targets
• ✅ Simple and clear
• ✅ Accessible
• ✅ Same content as desktop

URL Parameters and Tracking

URL Parameters

/product?id=123&color=red&size=large&utm_source=email

• Session ID parameters
• Tracking parameters
• Filter parameters

Managing Parameters

1. Go to Settings
2. URL Parameters
3. Specify crawl parameters:
4. Which parameters affect content
5. Which to ignore
6. Crawl preferences

User-agent: *
Disallow: /*utm_source=
Disallow: /*sessionid=

Best Practices

/product/laptop?utm_source=email&utm_campaign=summer
/blog/article?utm_medium=social&utm_source=twitter