L4-10：网站架构设计 —— 六种网站类型模板 + URL设计 + 导航规则 + Hub-and-Spoke内链

🎯 学什么：学会规划网站的页面层级、导航系统和URL结构——你的网站应该有多少页？怎么组织？URL长什么样？用六种网站类型模板快速确定架构起点，用3-Click Rule确保用户3次点击内到达任何页面，用ASCII Tree把架构可视化，用Hub-and-Spoke内链模型消灭孤儿页面。核心洞察：URL是人类和机器第一个共同阅读的东西——/blog/how-to-start-ecommerce 比 /blog/article-2847 好100倍。一个好的URL应该让人一眼就知道页面内容。 💡 难易度：⭐⭐ | ⏱️ 预计时间：45 分钟

---

1. 课程概览

💡 白话小课堂：这个 Skill 就像一个购物中心总设计师——好的购物中心：一楼化妆品和鞋包、二楼女装、三楼男装、四楼运动和户外、地下是超市。每层都有明确的主题，扶梯口有清晰的指示牌（导航），每个店铺有门牌号（URL），你想买运动鞋就知道上四楼——不需要每一层都逛一遍。这就是信息架构：让用户和搜索引擎都能轻松地找到他们想要的。

本课的独特定位——架构设计型 Skill：

🔑 核心秘诀：ASCII Tree是最被低估的架构工具——用纯文本画出站点树，一目了然。导航不超过7项是铁律——选项越多，选择时间对数增长，7项以上导致选择瘫痪。

⚠️ 避坑指南：博客URL里放日期（/blog/2024/03/post-title）是常见错误——日期增加了URL长度但没有提供价值，而且让旧文章看起来"过时"。去掉日期后，文章看起来是永不过时的资源。

来源：Corey Haines marketingskills（coreyhaines31/marketingskills --skill site-architecture）

---

2. 六种网站类型模板

2.1 按类型快速确定架构起点

| 网站类型 | 典型深度 | 关键板块 | URL 模式 |
|---------|:------:|---------|---------|
| SaaS 营销 | 2-3 层 | Home, Features, Pricing, Blog, Docs | /features/name, /blog/slug |
| 内容/博客 | 2-3 层 | Home, Blog, Categories, About | /blog/slug |
| 电商 | 3-4 层 | Home, Categories, Products, Cart | /category/sub/product |
| 文档 | 3-4 层 | Home, Guides, API Reference | /docs/section/page |
| 混合 SaaS+内容 | 3-4 层 | Home, Product, Blog, Resources, Docs | /product/feature |
| 小型企业 | 1-2 层 | Home, Services, About, Contact | /services/name |

选择原则：
  → 电商最需要深层架构——SKU可能有10万个，必须有层级
  → 小型企业最扁平——只有5个页面不需要3层
  → SaaS和内容站在中间——2-3层是最佳平衡

2.2 3-Click Rule与扁平 vs 深层

3-Click Rule：用户从首页出发，3次点击内到达任何页面

架构深度示例：
  ❌ 5层（太深）：首页 → 分类 → 子分类 → 子子分类 → 产品
     → 用户在第3层就开始迷路

  ✅ 3层（最佳）：首页 → 产品列表 → 产品详情
  
  ⚠️ 2层（太浅）：首页 → 所有产品（2000个产品挤在一页）
     → 搜索引擎无法理解内容层次

扁平 vs 深层的选择：
  → 内容少（<50页）→ 扁平（2层）
  → 内容中（50-500页）→ 3层
  → 内容多（>500页）→ 3-4层但做好面包屑和筛选

希克定律：选项越多，选择时间对数增长
  → 导航超过7项 = 用户选择瘫痪
  → 每层展示不超过7个选项（如果超过，分组/折叠/搜索）

---

3. URL设计原则

3.1 URL是人与机器的共同语言

URL设计五原则：

1. 人类可读（Human-Readable）
   ✅ /blog/how-to-start-ecommerce
   ❌ /blog/article-2847
   ❌ /blog?id=123（查询参数承载内容=对SEO不友好）

2. 使用连字符分隔（Hyphens, Not Underscores）
   ✅ /features/analytics-dashboard
   ❌ /features/analytics_dashboard（搜索引擎将下划线视为连接符）

3. 反映页面层级（Mirror Hierarchy）
   ✅ /features/analytics/reports ← URL结构反映导航层级
   ❌ /page-123 ← 丢失了所有上下文

4. 全部小写（Lowercase Only）
   ✅ /blog/seo-guide
   ❌ /blog/SEO-Guide（大小写不一致导致重复内容问题）

5. 尾部斜杠一致（Consistent Trailing Slash）
   → 全站统一：要么都有尾部斜杠，要么都没有
   → 选一个→301重定向另一个
   → 不一致会导致Google将同一页面视为两个不同URL

为什么博客URL里放日期是常见错误？
  → /blog/2024/03/post-title ← 日期增加了URL长度但没提供价值
  → 让旧文章看起来"过时"（即使内容仍然有用）
  → 去掉日期：/blog/post-title ← 看起来是永不过时的资源
  → 唯一例外：新闻类网站（日期信息对用户很重要）

3.2 URL重构的301重定向

当需要改变URL结构时（如课程案例中统一到/blog/）：

旧URL：
  /blog/how-to-sell-on-shopee
  /resources/shopee-selling-guide
  /guides/2024/03/shopee-beginner-tips
  /articles/shopee-fee-calculation

新URL（统一到/blog/）：
  /blog/sell-on-shopee-guide
  /blog/shopee-fee-calculation
  /blog/shopee-beginner-tips

必须建立301重定向映射表：
  /resources/shopee-selling-guide → 301 → /blog/sell-on-shopee-guide
  /guides/2024/03/shopee-beginner-tips → 301 → /blog/shopee-beginner-tips
  /articles/shopee-fee-calculation → 301 → /blog/shopee-fee-calculation

301 = 永久移动 → 搜索引擎将旧URL的权重转移给新URL
不设301 = 旧URL变成404 → 权重全丢 + 用户看到死链

---

4. 导航与内链架构

4.1 导航设计规则

顶部导航（Header Navigation）：
  → 最多4-7项——希克定律
  → 最后一项是CTA按钮（"免费试用""开始使用"）——视觉上醒目
  → 每项都有下拉（如果有子页面）
  → 不是"功能清单"，是"路标"——帮用户到想去的地方

  示例（SaaS营销站）：
    首页 | 功能 | 定价 | 客户案例 | 资源 | [免费试用]

页脚导航（Footer Navigation）：
  → 四列分组法：
    列1: 产品（功能/定价/集成/更新日志）
    列2: 资源（博客/文档/帮助中心/社区）
    列3: 公司（关于/招聘/联系/新闻）
    列4: 法律（隐私/条款/合规）

面包屑导航（Breadcrumbs）：
  → 应镜像URL层级，每段可点击（当前页除外）
  → URL: /features/analytics/reports
  → 面包屑：首页 > 功能 > 数据分析 > 报表
  → 这是每页免费的内链 + 帮助用户理解"我在哪里"

4.2 Hub-and-Spoke内链模型

内链就像商场里的"您可能也喜欢"指示牌：
你在运动鞋区，旁边有块牌子"运动袜在二楼右转"——这就是内链。

无孤儿页面原则：
  → 每个页面至少有一条内链指向它（不只是一条从Hub过来）
  → 课程案例：重构前12%的页面是孤儿页面（340个）
  → 搜索引擎找不到它们，用户也找不到它们
  → 后果：这些页面即使内容再好，在搜索引擎眼里就是不存在

Hub-and-Spoke + 上下文内链：
  Hub页（博客首页/分类页）
   ↓        ↓        ↓
  文章A ←→ 文章B ←→ 文章C
  → Hub到Spoke：分类页 → 文章详情
  → Spoke到Hub：文章 → 所属分类
  → Spoke互链：相关文章、上一篇/下一篇
  → 上下文内链：正文中自然引用的链接

---

5. 架构审计与重构

5.1 常见架构问题

问题1: URL结构不统一
  → 症状：/blog/、/resources/、/guides/、/articles/ 四个目录都在放同类内容
  → 解决：统一到一个目录 + 301重定向

问题2: 导航过载（>7项）
  → 症状：创始团队想把所有功能塞进导航
  → 解决：选4-5个最重要/最多访问的放在导航，其余放下拉或Footer
  → 说服方法：用户调研——课程案例中45%的用户"找不到想要的东西"

问题3: 孤儿页面
  → 症状：页面存在但没有任何内链指向它
  → 解决：爬取全站内链 → 生成页面入链数量报告 → 优先给高价值页面加内链

问题4: 标签/分类系统失控
  → 症状：320个标签，其中80个只被用过1次
  → 解决：合并相似标签 + 归档低频标签 + 限制新标签创建

5.2 ASCII Tree交付物

用纯文本画出站点树——最直观的架构交付物：

首页 (/)
├── 功能 (/features)
│   ├── 数据分析 (/features/analytics)
│   ├── 自动化 (/features/automation)
│   └── 集成 (/features/integrations)
├── 定价 (/pricing)
├── 客户案例 (/customers)
│   ├── 电商 (/customers/ecommerce)
│   └── SaaS (/customers/saas)
├── 资源 (/resources)
│   ├── 博客 (/blog)
│   └── 帮助中心 (/docs)
└── [免费试用] CTA按钮

交付物清单：
  1. ASCII站点树（层级可视化）
  2. Mermaid视觉站点地图（用于演示）
  3. URL映射表（旧URL→新URL，含301方案）
  4. 导航规格（Header/Footer/Breadcrumbs）
  5. 内链计划（Hub-and-Spoke + 上下文内链）

---

6. 结构拆解：架构设计型 Skill 模板

---

7. 电商案例：品牌独立站（DTC护肤品）信息架构重构

🛒 实战案例：某DTC护肤品牌（主打成分护肤，3个产品线共18个SKU，客单价¥169-¥499），独立站上线18个月积累230个页面（包含博客内容），但自然流量连续5个月停滞在月均8,500次。问题诊断：(1) 8%的页面是孤儿页面（19个页面没有任何内链指向）；(2) 产品详情页无法从首页3次点击内到达；(3) 博客URL混乱——/blog/、/journal/、/guides/三个路径都在放同类内容；(4) 导航栏8项，其中"品牌故事"占了一个位置但点击率仅0.3%。

重构方案：

1. URL统一与301重定向：

• 全部内容页面统一到 /blog/，旧路径全部301重定向
• 产品URL统一为 /products/产品线/产品名（三层架构）
• 建立51条301重定向映射（覆盖所有旧URL→新URL）

2. ASCII站点树（重构后）：

首页 (/)
├── 产品 (/products)
│   ├── 洁面系列 (/products/cleansers)
│   │   ├── 氨基酸洁面乳 (/products/cleansers/amino-cleanser)
│   │   └── 卸妆油 (/products/cleansers/cleansing-oil)
│   ├── 精华系列 (/products/serums)
│   │   ├── VC精华 (/products/serums/vc-serum)
│   │   └── ...
│   └── 面霜系列 (/products/moisturizers)
├── 肤质测试 (/skin-quiz)  ← 核心互动页面，引导用户找到适合产品
├── 成分百科 (/ingredients)  ← 知识型内容，SEO核心资产
│   ├── 烟酰胺 (/ingredients/niacinamide)
│   ├── 玻尿酸 (/ingredients/hyaluronic-acid)
│   └── ...（12个核心成分页面）
├── 博客 (/blog)
│   ├── 护肤知识 (/blog/category/skincare-101)
│   ├── 成分科普 (/blog/category/ingredients)
│   └── 用户故事 (/blog/category/real-stories)
├── 关于我们 (/about)
└── [肤质测试] CTA按钮

3. 导航精简：从8项减到5项（产品/肤质测试/成分百科/博客/关于我们）

4. 消灭孤儿页面：

• 19个孤儿页面逐一添加内链：从相关博客文章（上下文内链）+ 分类Hub页 + 面包屑导航
• 孤儿页面发现后：8个是旧产品页（已下架，301重定向到替代产品页），11个是博客文章（补上内链后恢复正常收录）

5. 内链架构：

Hub-and-Spoke + 上下文内链：
  博客分类Hub（"护肤知识"）→ 各篇文章（Spoke）
  文章A（"早上洗脸要用洗面奶吗"）←→ 文章B（"氨基酸vs皂基洁面"）
  上下文内链："如果你不确定自己的肤质，先做一下[[肤质测试]]"
  产品→成分百科："这款精华含有15%的[[烟酰胺]]，点击了解这个成分的作用"

效果（重构后3个月）：

• 自然搜索流量 8,500次/月 → 15,200次/月（+78.8%）
• 收录页面从197页增至228页（孤儿页面修复+内链增强）
• "找不到想要的"用户调研比例从32%降至9%
• 肤质测试页面（新增核心互动页）月均完成3,800次，其中22%在测试后下单
• 成分百科页面贡献了34%的新增自然流量（"烟酰胺 护肤品 作用"排名第3，"玻尿酸和烟酰胺可以一起用吗"排名第1-Featured Snippet）

🔑 启示：DTC独立站的信息架构不是"页面越多越好"，而是"每一个页面用户3次点击内能找到"。成分百科作为独立板块是护肤品独立站的差异化SEO资产——大平台（天猫/京东）不需要做成分百科，但独立站做了，Google就会把"XX成分 护肤品"的长尾流量全部给你。这是一个"大平台不屑做、小品牌做了就是护城河"的信息架构策略。

---

8. 掌握检验

Q1：3-Click Rule的核心要求是什么？以下哪种网站架构最符合该原则？

• A) 首页→分类→子分类→子子分类→产品（5层）
• B) 首页→产品列表→产品详情（3层）
• C) 首页→全部产品（2层，但所有产品挤在一页）
• D) 层级越深越好，以容纳更多内容

Q2：导航设计为什么最多4-7项？如果创始团队坚持要把所有功能都塞进导航，你该怎么说服他们？

Q3：以下哪条URL不符合课程中的设计原则？

• A) /features/analytics
• B) /blog/seo-guide
• C) /blog?id=123
• D) /blog/how-to-start-ecommerce

Q4：URL设计中，为什么博客URL里放日期（/blog/2024/03/post-title）是常见错误？

Q5：内链的"无孤儿页面"原则是什么意思？课程案例中，重构前12%的页面是孤儿页面——这造成了什么后果？

Q6：以下哪种情况应该选择Flat架构（2层）而非Deep架构（4+层）？

• A) 电商平台有10万SKU
• B) 大型文档站有500+文档页
• C) 小型咨询公司网站只有5个页面
• D) SaaS产品有200+博客文章

Q7：请为一个SaaS营销网站设计完整的URL结构和导航方案（至少包含首页+5个一级板块+每个板块下的2-3个二级页面）。

Q8：面包屑导航（Breadcrumbs）和URL层级之间的关系是什么？请设计一个示例。

---

9. 答案

点击查看答案

Q1：B — 3层架构（首页→产品列表→产品详情）是大多数电商和内容站的最佳平衡。A是5层（太深），C虽然只有2层但不实用（所有产品挤一页无法扩展），D违背了"尽量扁平"的原则。

Q2：参考答案 — 希克定律：选项越多，选择时间对数增长，7项以上导致选择瘫痪。说服方法：导航不是"功能清单"，是"路标"——帮助用户到想去的地方。选4-5个最重要/最多访问的放在导航，其余放"更多"下拉菜单或Footer。用户调研数据是最好的说服工具（课程案例：45%的用户"找不到想要的东西"因为导航10项）。

Q3：C — /blog?id=123 用查询参数承载内容，不人类可读，搜索引擎也不友好。应该改成 /blog/post-title。

Q4：参考答案 — 日期增加了URL长度但没有提供价值信息，而且让旧文章看起来"过时"（即使内容仍然有用）。去掉日期后，文章看起来是永不过时的资源。唯一的例外是新闻类网站，日期信息对用户很重要。

Q5：参考答案 — "无孤儿页面"指每个页面至少有一条内链指向它。课程案例中12%的页面（340个）是孤儿页面——搜索引擎找不到它们，用户也找不到它们。这些页面即使内容再好，在搜索引擎眼里就是不存在。后果：自然流量被浪费，收录页面远低于实际页面数。

Q6：C — 小型咨询公司只有5个页面（首页+服务+关于+联系+案例），2层扁平架构最合理。

Q7：参考答案 — 见课程中ASCII Tree示例。导航方案（Header）：首页 | 功能 | 定价 | 客户案例 | 资源 | [免费试用]。

Q8：参考答案 — 面包屑应镜像URL层级，每段都是可点击链接（当前页除外）。示例：URL: /features/analytics/reports → 面包屑：Home > Features > Analytics > Reports（当前页，不可点击）。这是每页免费的内链，同时帮助用户理解自己在哪里以及如何返回上级。

评分：答对 6/8 = 通过。

---

10. 延伸阅读

• [[L4-09-收入运营体系|上一课：收入运营体系]] — 从线索到现金的全链路优化
• [[L4-11-视频营销策略|下一课：视频营销策略]] — 从脚本到发布的全流程AI化