⏱ 本页预计时间

阅读 22 分钟

7.3 SEO 友好的产品设计

好的SEO不是上线后才考虑,而是在设计阶段就融入产品。SEO 友好的产品设计,让每个页面都是流量入口。

📐 为什么要在设计阶段考虑SEO?

很多人做产品的思路是:先做出来→上线→再想办法做SEO。这是错的。

什么是 SSR/SSG？ 这是两种网页生成方式:

SSR (Server-Side Rendering, 服务端渲染): 用户访问时,服务器实时生成 HTML。优点是内容动态,SEO 友好。

SSG (Static Site Generation, 静态站点生成): 提前生成好所有 HTML 文件。优点是速度快,SEO 最佳。

搜索引擎更容易抓取 SSR/SSG 页面,而不是纯客户端渲染(CSR)的页面。

正确的思路


设计阶段:
✅ URL 结构规划 (符合 SEO 规范)
✅ 内容架构设计 (金字塔结构)
✅ 元数据模板 (title/description)
✅ 技术栈选择 (支持 SSR/SSG)

开发阶段:
✅ 实现 SEO 元素
✅ 结构化数据 (JSON-LD)
✅ 性能优化 (Core Web Vitals)
✅ 移动端适配

上线后:
✅ 提交 sitemap
✅ Google Search Console
✅ 持续内容更新

对比:

维度	事后补救	提前规划
URL 结构	难以修改,改了影响排名	一次设计,长期受益
内容架构	混乱,用户找不到内容	清晰,用户和搜索引擎都喜欢
技术实现	需要大改代码	开发时就做对
收录速度	慢,需要等待重新抓取	快,符合规范立即收录
维护成本	高,不断修补	低,体系完善

金句:

SEO 不是技巧,而是产品设计的一部分。好的产品天生对 SEO 友好。

🔗 URL 结构设计

URL 是 SEO 的基础,好的 URL 结构让用户和搜索引擎都能快速理解页面内容。

URL 设计原则

1. 语义化和可读性


✅ 好的URL (语义清晰):
https://example.com/blog/how-to-learn-ai-coding
https://example.com/tools/pdf-to-markdown
https://example.com/docs/getting-started

❌ 差的URL (毫无意义):
https://example.com/page?id=123
https://example.com/post/2024/01/15/p12345
https://example.com/node/78945

原则:

用户看 URL 就知道页面内容
包含关键词
用连字符 - 分隔单词,不用下划线 _

2. 层级简洁 (不超过3层)


✅ 推荐 (2-3 层):
/blog/ai-coding-tutorial
/tools/pdf-converter
/docs/api-reference

❌ 避免 (层级太深):
/content/blog/tutorials/beginner/2024/january/ai-coding

为什么?

层级太深影响抓取效率
用户记不住
权重传递衰减

3. 避免动态参数


✅ 静态 URL:
/blog/nextjs-tutorial
/products/ai-banner-generator

❌ 动态 URL:
/blog?id=123&cat=tutorial
/products?name=ai-banner-generator&ref=homepage

例外情况:

分页可以用参数: /blog?page=2
筛选可以用参数: /products?category=tools&sort=popular

4. 避免中文 URL


✅ 英文:
/blog/ai-coding-tutorial

❌ 中文 (会被编码):
/blog/AI编程教程
→ 实际显示: /blog/%E6%95%99%E7%A8%8B

如果必须中文:

首页和导航用中文没问题
博客文章用英文 slug,中文标题

常见页面类型 URL 模板

什么是 slug？ slug 是 URL 中用于标识页面的简短字符串,通常从标题转换而来。例如标题”How to Learn AI Coding”的 slug 就是”how-to-learn-ai-coding”。它让 URL 更易读、更 SEO 友好。

博客文章


模板: /blog/[slug]

示例:
/blog/how-to-learn-ai-coding
/blog/chrome-extension-tutorial
/blog/nextjs-vs-vite

slug 规则:
- 小写字母
- 用连字符分隔
- 包含核心关键词
- 简短有力 (< 60 字符)

工具页面


模板: /tools/[tool-name]

示例:
/tools/pdf-to-markdown
/tools/image-compressor
/tools/qr-code-generator

或者功能分组:
/tools/pdf/pdf-to-markdown
/tools/image/image-compressor

文档


模板: /docs/[category]/[page]

示例:
/docs/getting-started
/docs/api/authentication
/docs/guides/deployment

产品页


模板: /[product-name]

示例:
/ai-banner-generator
/markdown-editor
/website-builder

📑 内容结构设计

好的内容结构帮助搜索引擎理解网站层级,传递权重。

金字塔结构 (推荐)


首页 (/)
  │
  ├─ 核心产品页 (/ai-banner-generator)
  │   └─ 使用指南 (/ai-banner-generator/guide)
  │
  ├─ 工具分类 (/tools)
  │   ├─ PDF 工具 (/tools/pdf)
  │   │   ├─ PDF to Markdown (/tools/pdf/pdf-to-markdown)
  │   │   └─ PDF Compressor (/tools/pdf/pdf-compressor)
  │   └─ 图片工具 (/tools/image)
  │       └─ Image Optimizer (/tools/image/optimizer)
  │
  ├─ 博客 (/blog)
  │   ├─ 教程 (/blog/tutorials)
  │   ├─ 案例 (/blog/case-studies)
  │   └─ 更新 (/blog/updates)
  │
  └─ 关于 (/about, /contact, /pricing)

层级规则:
- 首页 → 分类页: 1 层
- 分类页 → 内容页: 1-2 层
- 任何页面 ≤ 3 次点击可达

内部链接策略

权重传递规则:


首页权重: 100
  ↓ (传递 80%)
分类页权重: 80
  ↓ (传递 60%)
内容页权重: 48

如何优化:
1. 首页链接核心页面
2. 核心页面互相链接
3. 新页面从高权重页面链接

实战示例:


<!-- 首页导航 (传递权重给核心页) -->
<nav>
  <a href="/tools">工具</a>
  <a href="/blog">博客</a>
  <a href="/docs">文档</a>
</nav>
 
<!-- 博客文章中的内部链接 -->
<article>
  <p>
    学习 AI 编程,推荐使用
    <a href="/tools/ai-code-generator">AI 代码生成器</a>
    来快速上手。详见我们的
    <a href="/blog/ai-coding-tutorial">AI 编程教程</a>。
  </p>
</article>
 
<!-- 相关文章推荐 -->
<aside>
  <h3>相关文章</h3>
  <ul>
    <li><a href="/blog/nextjs-tutorial">Next.js 教程</a></li>
    <li><a href="/blog/react-hooks">React Hooks 指南</a></li>
  </ul>
</aside>

内链最佳实践:

每篇文章至少 3-5 个内部链接
锚文本包含关键词
链接到相关内容,不要硬塞
避免所有链接都指向首页

面包屑导航


<!-- 帮助用户和搜索引擎理解页面位置 -->
<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">首页</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">博客</span>
      </a>
      <meta itemprop="position" content="2" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="/blog/ai-coding-tutorial">
        <span itemprop="name">AI 编程教程</span>
      </a>
      <meta itemprop="position" content="3" />
    </li>
  </ol>
</nav>

正在检查访问权限...

学习进度0%

0/60 篇已完成