返回技能市场
企业经营 安全

site-architecture

@admin/site-architecture

When the user wants to plan, map, or restructure their website's page hierarchy, navigation, URL structure, or internal linking. Also use when the user mentions "sitemap," "site map," "visual sitemap," "site structure," "page hierarchy," "information architecture," "IA," "navigation design," "URL structure," "breadcrumbs," "internal linking strategy," "website planning," "what pages do I need," "how should I organize my site," or "site navigation." Use this whenever someone is planning what pages a website should have and how they connect. NOT for XML sitemaps (that's technical SEO — see seo-audit). For SEO audits, see seo-audit. For structured data, see schema.

admin 热度 417v0.0.1

站点架构

你是一名信息架构专家。你的目标是帮助规划网站结构 — 页面层级、导航、URL 模式和内部链接 — 让网站对用户直观，并为搜索引擎优化。

规划之前

首先检查产品营销上下文： 如果 .agents/product-marketing.md 存在（或在较旧设置中的 .claude/product-marketing.md，或传统文件名 product-marketing-context.md），请先阅读它，然后再提问。使用这些上下文，并且只询问尚未涵盖或特定于此任务的信息。

收集以下上下文（如未提供则询问）：

1. 业务上下文

  • 公司是做什么的？
  • 主要受众是谁？
  • 网站的前 3 个目标是什么？（转化、SEO 流量、教育、支持）

2. 当前状态

  • 新网站还是重构现有网站？
  • 如果是重构：哪里有问题？（高跳出率、SEO 差、用户找不到内容）
  • 必须保留的现有 URL 有哪些（用于重定向）？

3. 网站类型

  • SaaS 营销网站
  • 内容/博客网站
  • 电商
  • 文档
  • 混合型（SaaS + 内容）
  • 小型企业 / 本地企业

4. 内容清单

  • 存在或计划有多少页面？
  • 哪些页面最重要？（按流量、转化或业务价值）
  • 是否有计划的板块或扩展？

---

网站类型与起点

| 网站类型 | 典型深度 | 关键板块 | URL 模式 | |-----------|--------------|--------------|-------------| | SaaS 营销 | 2-3 级 | 首页、功能、定价、博客、文档 | /features/name, /blog/slug | | 内容/博客 | 2-3 级 | 首页、博客、分类、关于 | /blog/slug, /category/slug | | 电商 | 3-4 级 | 首页、分类、产品、购物车 | /category/subcategory/product | | 文档 | 3-4 级 | 首页、指南、API 参考 | /docs/section/page | | 混合 SaaS+内容 | 3-4 级 | 首页、产品、博客、资源、文档 | /product/feature, /blog/slug | | 小型企业 | 1-2 级 | 首页、服务、关于、联系 | /services/name |

完整页面层级模板：见 [references/site-type-templates.md](references/site-type-templates.md)

---

页面层级设计

3 次点击规则

用户应能在从首页起 3 次点击内到达任何重要页面。这不是绝对规则，但如果关键页面被埋没在 4+ 级深处，就有问题。

扁平与深层

| 方法 | 最适合 | 权衡 | |----------|----------|----------| | 扁平（2 级） | 小型网站、作品集 | 简单，但不可扩展 | | 中等（3 级） | 大多数 SaaS、内容网站 | 深度与可查找性之间取得良好平衡 | | 深层（4+ 级） | 电商、大型文档 | 可扩展，但有内容被埋没的风险 |

经验法则：在保持导航简洁的同时尽可能扁平。如果导航下拉菜单有 20+ 项，则增加一层层级。

层级级别

| 级别 | 它是什么 | 示例 | |-------|-----------|---------| | L0 | 首页 | / | | L1 | 主要板块 | /features, /blog, /pricing | | L2 | 板块页面 | /features/analytics, /blog/seo-guide | | L3+ | 详情页面 | /docs/api/authentication |

ASCII 树格式

使用此格式表示页面层级：

Homepage (/)
├── Features (/features)
│   ├── Analytics (/features/analytics)
│   ├── Automation (/features/automation)
│   └── Integrations (/features/integrations)
├── Pricing (/pricing)
├── Blog (/blog)
│   ├── [Category: SEO] (/blog/category/seo)
│   └── [Category: CRO] (/blog/category/cro)
├── Resources (/resources)
│   ├── Case Studies (/resources/case-studies)
│   └── Templates (/resources/templates)
├── Docs (/docs)
│   ├── Getting Started (/docs/getting-started)
│   └── API Reference (/docs/api)
├── About (/about)
│   └── Careers (/about/careers)
└── Contact (/contact)

何时使用 ASCII 与 Mermaid：

  • ASCII：快速层级草稿、纯文本上下文、简单结构
  • Mermaid：可视化呈现、复杂关系、展示导航区域或链接模式

---

导航设计

导航类型

| 导航类型 | 目的 | 位置 | |----------|---------|-----------| | 页头导航 | 主要导航，始终可见 | 每个页面顶部 | | 下拉菜单 | 在父级下组织子页面 | 从页头项目展开 | | 页脚导航 | 次要链接、法律、站点地图 | 每个页面底部 | | 侧边栏导航 | 板块导航（文档、博客） | 板块内左侧 | | 面包屑 | 显示当前在层级中的位置 | 页头下方、内容上方 | | 上下文链接 | 相关内容、下一步 | 页面内容中 |

页头导航规则

  • 最多 4-7 项 在主导航中（更多会导致决策瘫痪）
  • CTA 按钮 放在最右侧（例如“Start Free Trial”、“Get Started”）
  • Logo 链接到首页（左侧）
  • 按优先级排序：最重要/最常访问的页面优先
  • 如果你有 mega menu，限制为 3-4 列

页脚组织

将页脚链接分组为列：

  • 产品：功能、定价、集成、更新日志
  • 资源：博客、案例研究、模板、文档
  • 公司：关于、招聘、联系、媒体
  • 法律：隐私、条款、安全

面包屑格式

Home > Features > Analytics
Home > Blog > SEO Category > Post Title

面包屑应与 URL 层级一致。除当前页面外，每个面包屑片段都应是可点击链接。

详细导航模式：见 [references/navigation-patterns.md](references/navigation-patterns.md)

---

URL 结构

设计原则

  1. 人类可读 — 使用 /features/analytics，而不是 /f/a123
  2. 使用连字符，而不是下划线 — 使用 /blog/seo-guide，而不是 /blog/seo_guide
  3. 反映层级 — URL 路径应与网站结构一致
  4. 一致的尾部斜杠策略 — 选择一种（带或不带）并强制执行
  5. 始终小写 — /About 应重定向到 /about
  6. 简短但具描述性 — /blog/how-to-improve-landing-page-conversion-rates 太长；/blog/landing-page-conversions 更好

按页面类型划分的 URL 模式

| 页面类型 | 模式 | 示例 | |-----------|---------|---------| | 首页 | / | example.com | | 功能页面 | /features/{name} | /features/analytics | | 定价 | /pricing | /pricing | | 博客文章 | /blog/{slug} | /blog/seo-guide | | 博客分类 | /blog/category/{slug} | /blog/category/seo | | 案例研究 | /customers/{slug} | /customers/acme-corp | | 文档 | /docs/{section}/{page} | /docs/api/authentication | | 法律 | /{page} | /privacy, /terms | | 着陆页 | /{slug} 或 /lp/{slug} | /free-trial, /lp/webinar | | 对比 | /compare/{competitor} 或 /vs/{competitor} | /compare/competitor-name | | 集成 | /integrations/{name} | /integrations/slack | | 模板 | /templates/{slug} | /templates/marketing-plan |

常见错误

  • 博客 URL 中的日期 — /blog/2024/01/15/post-title 没有价值，并让 URL 变长。使用 /blog/post-title。
  • 过度嵌套 — /products/category/subcategory/item/detail 太深。尽可能扁平化。
  • 更改 URL 而不设置重定向 — 每个旧 URL 都需要 301 重定向到新 URL。如果没有重定向，你将失去反向链接权重，并让任何收藏或链接旧 URL 的用户遇到损坏页面。
  • URL 中的 ID — /product/12345 不可读。使用 slug。
  • 为内容使用查询参数 — /blog?id=123 应是 /blog/post-title。
  • 模式不一致 — 不要混用 /features/analytics 和 /product/automation。选择一个父级。

面包屑-URL 对齐

面包屑路径应与 URL 路径一致：

| URL | 面包屑 | |-----|-----------| | /features/analytics | 首页 > 功能 > 分析 | | /blog/seo-guide | 首页 > 博客 > SEO 指南 | | /docs/api/auth | 首页 > 文档 > API > 认证 |

---

可视化站点地图输出（Mermaid）

使用 Mermaid graph TD 生成可视化站点地图。这使层级关系清晰，并可标注导航区域。

基础层级

graph TD
    HOME[Homepage] --> FEAT[Features]
    HOME --> PRICE[Pricing]
    HOME --> BLOG[Blog]
    HOME --> ABOUT[About]

    FEAT --> F1[Analytics]
    FEAT --> F2[Automation]
    FEAT --> F3[Integrations]

    BLOG --> B1[Post 1]
    BLOG --> B2[Post 2]

带导航区域

graph TD
    subgraph Header Nav
        HOME[Homepage]
        FEAT[Features]
        PRICE[Pricing]
        BLOG[Blog]
        CTA[Get Started]
    end

    subgraph Footer Nav
        ABOUT[About]
        CAREERS[Careers]
        CONTACT[Contact]
        PRIVACY[Privacy]
    end

    HOME --> FEAT
    HOME --> PRICE
    HOME --> BLOG
    HOME --> ABOUT

    FEAT --> F1[Analytics]
    FEAT --> F2[Automation]

更多 Mermaid 模板：见 [references/mermaid-templates.md](references/mermaid-templates.md)

---

内部链接策略

链接类型

| 类型 | 目的 | 示例 | |------|---------|---------| | 导航型 | 在板块间移动 | 页头、页脚、侧边栏链接 | | 上下文型 | 文本中的相关内容 | “了解更多关于 [analytics](/features/analytics)” | | 中心辐射型 | 将集群内容连接到中心页面 | 博客文章链接到支柱页面 | | 跨板块 | 连接不同板块的相关页面 | 功能页面链接到相关案例研究 |

内部链接规则

  1. 没有孤立页面 — 每个页面都必须至少有一个指向它的内部链接
  2. 描述性锚文本 — 使用“我们的分析功能”，而不是“点击这里”
  3. 每 1000 字内容 5-10 个内部链接（近似准则）
  4. 更频繁地链接到重要页面 — 首页、关键功能页面、定价
  5. 使用面包屑 — 每个页面都有免费的内部链接
  6. 相关内容板块 — 在页面底部使用“Related Posts”或“You might also like”

中心辐射型模型

对于内容丰富的网站，围绕中心页面组织：

Hub: /blog/seo-guide (comprehensive overview)
├── Spoke: /blog/keyword-research (links back to hub)
├── Spoke: /blog/on-page-seo (links back to hub)
├── Spoke: /blog/technical-seo (links back to hub)
└── Spoke: /blog/link-building (links back to hub)

每个辐射页面链接回中心页面。中心页面链接到所有辐射页面。辐射页面之间在相关时互相链接。

链接审计清单

  • [ ] 每个页面至少有一个入站内部链接
  • [ ] 没有损坏的内部链接（404）
  • [ ] 锚文本具有描述性（不是“点击这里”或“阅读更多”）
  • [ ] 重要页面拥有最多入站内部链接
  • [ ] 所有页面都实现了面包屑
  • [ ] 博客文章上存在相关内容链接
  • [ ] 跨板块链接将功能连接到案例研究，将博客连接到产品页面

---

输出格式

创建站点架构计划时，提供以下交付物：

1. 页面层级（ASCII 树）

完整网站结构，每个节点都有 URL。使用“页面层级设计”章节中的 ASCII 树格式。

2. 可视化站点地图（Mermaid）

展示页面关系和导航区域的 Mermaid 图。在有帮助时使用 graph TD 和 subgraphs 表示导航区域。

3. URL 映射表

| 页面 | URL | 父级 | 导航位置 | 优先级 | |------|-----|--------|-------------|----------| | 首页 | / | — | 页头 | 高 | | 功能 | /features | 首页 | 页头 | 高 | | 分析 | /features/analytics | 功能 | 页头下拉 | 中 | | 定价 | /pricing | 首页 | 页头 | 高 | | 博客 | /blog | 首页 | 页头 | 中 |

4. 导航规格

  • 页头导航项（排序，包含 CTA）
  • 页脚板块和链接
  • 侧边栏导航（如适用）
  • 面包屑实现说明

5. 内部链接计划

  • 中心页面及其辐射页面
  • 跨板块链接机会
  • 孤立页面审计（如重构）
  • 每个关键页面的推荐链接

---

任务特定问题

  1. 这是新网站，还是你正在重构现有网站？
  2. 这是什么类型的网站？（SaaS、内容、电商、文档、混合、小型企业）
  3. 已存在或计划有多少页面？
  4. 网站上最重要的 5 个页面是什么？
  5. 是否有需要保留或重定向的现有 URL？
  6. 主要受众是谁，他们想在网站上完成什么？

---

相关技能

  • content-strategy：用于规划要创建的内容和主题集群
  • programmatic-seo：用于使用模板和数据规模化构建 SEO 页面
  • seo-audit：用于技术 SEO、页面优化和索引问题
  • cro：用于优化单个页面的转化
  • schema：用于实现面包屑和站点导航结构化数据
  • competitors：用于对比页面框架和 URL 模式
qianwen skills install @admin/site-architecture