# 30x Seo Architecture

> >

- **Type:** Skill
- **Install:** `agentstack add skill-norahe0304-art-30x-seo-cn-30x-seo-architecture`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [norahe0304-art](https://agentstack.voostack.com/s/norahe0304-art)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [norahe0304-art](https://github.com/norahe0304-art)
- **Source:** https://github.com/norahe0304-art/30x-seo-cn/tree/main/skills/30x-seo-architecture

## Install

```sh
agentstack add skill-norahe0304-art-30x-seo-cn-30x-seo-architecture
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 网站架构

[PROTOCOL]: 变更时更新此头部，然后检查 CLAUDE.md

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

## 规划前准备

**首先检查产品营销上下文：**
如果存在 `.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 中的 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` 配合 subgraph 表示导航区域。

### 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 模式

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [norahe0304-art](https://github.com/norahe0304-art)
- **Source:** [norahe0304-art/30x-seo-cn](https://github.com/norahe0304-art/30x-seo-cn)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-norahe0304-art-30x-seo-cn-30x-seo-architecture
- Seller: https://agentstack.voostack.com/s/norahe0304-art
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.