14.2 SEO基础配置

---

1. 为什么要学这个?

你搜 "Vibe Coding"，出来的却是 "Home | My Website"。 你搜教程内容，完全搜不到。 因为你的每个页面标题都叫 "React App"，描述都是空的。 Google 对你一无所知，所以它把你的网站扔进了垃圾堆。

---

2. 核心概念：TDK

在 SEO 界，最基础的三个要素叫 TDK：

1. Title (标题): 浏览器标签页上显示的字。权重最高。
2. Description (描述): 搜索结果标题下面那两行小字。决定用户点不点。
3. Keywords (关键词): 现在 Google 基本忽略，但其他引擎可能还看。

---

3. 解决方案 (HOW)

3.1 动态页面的元数据 (以博客文章为例)

对于博客文章页 [slug]/page.tsx，标题必须是文章的标题。

import type { Metadata } from 'next'

// 动态生成元数据
export async function generateMetadata({ params }): Promise<Metadata> {
  const post = await getPost(params.slug) // 查数据库或 CMS
  
  return {
    title: post.title, // "如何使用 Docker"
    description: post.summary,
  }
}

export default function Page({ params }) {
  // ...
}

这样，当用户进入 "如何使用 Docker" 页面，浏览器标题就会自动变成 "如何使用 Docker | Vibe Coding"。

3.2 SEO 渲染流程图

graph TD
    GoogleBot["Google 爬虫"] -->|"Step 1: 访问页面"| Server["Next.js 服务器"]
    
    Server -->|"Step 2: 查库 (getPost)"| DB["数据库/CMS"]
    DB --"Step 3: 返回文章数据"--> Server
    
    Server -->|"Step 4: 生成 HTML (<title>)"| GoogleBot
    
    GoogleBot -->|"Step 5: 收录索引"| Index["Google 索引库"]
    
    style GoogleBot fill:#e1bee7,stroke:#8e24aa
    style Index fill:#fff9c4,stroke:#fbc02d

---

4. 避坑指南

❌ 不要这样做	✅ 应该这样做	为什么
全站统一标题	动态标题	每个页面的 title 和 description 必须是独一无二的。如果有重复，Google 会认为你在做内容农场。
标题太长	< 60 字符	标题太长会被 Google 截断成 ...。把最重要的关键词（比如你的品牌名）放在最前面或最后面。
忽略 Canonical	配置 Canonical	如果 mysite.com 和 www.mysite.com 都能访问，必须指定 canonical 告诉 Google 哪个是正主，防止权重分散。

---

5. 真实案例

---

6. 本章小结

1. Dynamic: 让每个页面都有自己的名字。
2. SSR: 让内容在爬虫面前“裸奔”，而不是藏在 JS 后面。
3. TDK: 依然是 SEO 的基石。