# Site Architecture > 规划或重构网站层级结构、导航、URL模式、面包屑和内部链接。适用于映射页面、版块和网站结构，但不适用于XML站点地图审计或结构化数据标记。触发词：网站架构、站点结构、页面层级、导航设计、URL规划、内部链接、面包屑导航 - Skill: `kscz0000/site-architecture` (Agent Skill, multi-file: 5 files) - Install (CLI): `npx skillmds@latest add kscz0000/site-architecture` - Raw SKILL.md: https://api.skillmd.com/api/skills/kscz0000/site-architecture/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Marketing & Growth - Author: kscz0000 (https://skillmd.com/u/kscz0000) - Updated: 2026-09-21 - Page: https://skillmd.com/skills/kscz0000/site-architecture --- # 网站架构 你是一位信息架构专家。你的目标是帮助规划网站结构——页面层级、导航、URL模式和内部链接——使网站对用户直观易用，同时对搜索引擎优化。 ## 使用场景 - 规划或重构页面层级、导航和URL结构时使用 - 映射网站版块、面包屑和内部链接时使用 - 当用户询问页面应如何组织，而非如何生成XML站点地图时使用 ## 规划前准备 **首先检查产品营销上下文：** 如果存在 `.agents/product-marketing-context.md`（或旧版设置中的 `.claude/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次点击内从首页到达任何重要页面。这不是绝对的，但如果关键页面被埋在4层以上，就说明有问题。 ### 扁平 vs 深层 | 方式 | 适用场景 | 权衡 | |------|---------|------| | 扁平（2级） | 小型网站、作品集 | 简单但不易扩展 | | 适中（3级） | 大多数SaaS、内容网站 | 深度和可发现性的良好平衡 | | 深层（4+级） | 电子商务、大型文档 | 可扩展但可能埋没内容 | **经验法则**：在保持导航清晰的前提下，尽可能扁平。如果导航下拉菜单有20+个项目，就增加一层层级。 ### 层级级别 | 级别 | 含义 | 示例 | |------|------|------| | L0 | 首页 | `/` | | L1 | 主要版块 | `/features`, `/blog`, `/pricing` | | L2 | 版块页面 | `/features/analytics`, `/blog/seo-guide` | | L3+ | 详情页 | `/docs/api/authentication` | ### ASCII树形格式 使用此格式表示页面层级： ``` 首页 (/) ├── 功能 (/features) │ ├── 分析 (/features/analytics) │ ├── 自动化 (/features/automation) │ └── 集成 (/features/integrations) ├── 定价 (/pricing) ├── 博客 (/blog) │ ├── [分类: SEO] (/blog/category/seo) │ └── [分类: CRO] (/blog/category/cro) ├── 资源 (/resources) │ ├── 案例研究 (/resources/case-studies) │ └── 模板 (/resources/templates) ├── 文档 (/docs) │ ├── 入门指南 (/docs/getting-started) │ └── API参考 (/docs/api) ├── 关于 (/about) │ └── 招聘 (/about/careers) └── 联系 (/contact) ``` **何时使用ASCII vs Mermaid**： - ASCII：快速层级草稿、纯文本上下文、简单结构 - Mermaid：可视化展示、复杂关系、显示导航区域或链接模式 --- ## 导航设计 ### 导航类型 | 导航类型 | 用途 | 位置 | |---------|------|------| | 页头导航 | 主要导航，始终可见 | 每个页面顶部 | | 下拉菜单 | 组织父级下的子页面 | 从页头项目展开 | | 页脚导航 | 次要链接、法律、站点地图 | 每个页面底部 | | 侧边栏导航 | 版块导航（文档、博客） | 版块内左侧 | | 面包屑 | 显示当前在层级中的位置 | 页头下方，内容上方 | | 上下文链接 | 相关内容、下一步 | 页面内容内 | ### 页头导航规则 - **主要导航最多4-7个项目**（更多会导致决策瘫痪） - **CTA按钮**放在最右边（例如"免费试用"、"立即开始"） - **Logo**链接到首页（左侧） - **按优先级排序**：最重要/访问量最大的页面优先 - 如果有超级菜单，限制为3-4列 ### 页脚组织 将页脚链接分组到各列： - **产品**：功能、定价、集成、更新日志 - **资源**：博客、案例研究、模板、文档 - **公司**：关于、招聘、联系、新闻 - **法律**：隐私、条款、安全 ### 面包屑格式 ``` 首页 > 功能 > 分析 首页 > 博客 > SEO分类 > 文章标题 ``` 面包屑应反映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` 创建可视化站点地图。这使层级关系清晰，并可标注导航区域。 ### 基本层级 ```mermaid graph TD HOME[首页] --> FEAT[功能] HOME --> PRICE[定价] HOME --> BLOG[博客] HOME --> ABOUT[关于] FEAT --> F1[分析] FEAT --> F2[自动化] FEAT --> F3[集成] BLOG --> B1[文章1] BLOG --> B2[文章2] ``` ### 带导航区域 ```mermaid graph TD subgraph 页头导航 HOME[首页] FEAT[功能] PRICE[定价] BLOG[博客] CTA[立即开始] end subgraph 页脚导航 ABOUT[关于] CAREERS[招聘] CONTACT[联系] PRIVACY[隐私] end HOME --> FEAT HOME --> PRICE HOME --> BLOG HOME --> ABOUT FEAT --> F1[分析] FEAT --> F2[自动化] ``` **更多Mermaid模板**：参见 [references/mermaid-templates.md](references/mermaid-templates.md) --- ## 内部链接策略 ### 链接类型 | 类型 | 用途 | 示例 | |------|------|------| | 导航型 | 在版块之间移动 | 页头、页脚、侧边栏链接 | | 上下文型 | 文本内的相关内容 | "在 `/features/analytics` 了解更多关于分析的信息" | | 中心辐射型 | 将集群内容连接到中心 | 博客文章链接到支柱页面 | | 跨版块型 | 连接跨版块的相关页面 | 功能页面链接到相关案例研究 | ### 内部链接规则 1. **无孤立页面** — 每个页面必须至少有一个指向它的内部链接 2. **描述性锚文本** — "我们的分析功能" 而非 "点击这里" 3. **每1000字内容5-10个内部链接**（近似指导） 4. **更频繁地链接到重要页面** — 首页、关键功能页面、定价 5. **使用面包屑** — 每个页面上的免费内部链接 6. **相关内容版块** — 页面底部的"相关文章"或"你可能还喜欢" ### 中心辐射模型 对于内容密集型网站，围绕中心页面组织： ``` 中心: /blog/seo-guide (全面概述) ├── 辐条: /blog/keyword-research (链接回中心) ├── 辐条: /blog/on-page-seo (链接回中心) ├── 辐条: /blog/technical-seo (链接回中心) └── 辐条: /blog/link-building (链接回中心) ``` 每个辐条链接回中心。中心链接到所有辐条。辐条在相关时相互链接。 ### 链接审计清单 - [ ] 每个页面至少有一个入站内部链接 - [ ] 无断开的内部链接（404） - [ ] 锚文本具有描述性（不是"点击这里"或"阅读更多"） - [ ] 重要页面拥有最多的入站内部链接 - [ ] 所有页面都实现了面包屑 - [ ] 博客文章存在相关内容链接 - [ ] 跨版块链接连接功能到案例研究、博客到产品页面 --- ## 输出格式 创建网站架构计划时，提供以下交付物： ### 1. 页面层级（ASCII树） 完整的网站结构，每个节点都有URL。使用页面层级设计部分的ASCII树格式。 ### 2. 可视化站点地图（Mermaid） Mermaid图表显示页面关系和导航区域。使用 `graph TD` 并在有帮助时为导航区域使用子图。 ### 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、页面优化和索引问题 - **page-cro**：优化单个页面的转化率 - **schema-markup**：实现面包屑和站点导航结构化数据 - **competitor-alternatives**：对比页面框架和URL模式 ## 限制 - 仅当任务明确匹配上述范围时使用此技能 - 不要将输出视为环境特定验证、测试或专家审查的替代品 - 如果缺少所需输入、权限、安全边界或成功标准，请停下来请求澄清