14.5 SEO进阶技巧

---

1. 为什么要学这个?

搜 "番茄炒蛋"，Google 直接在搜索结果里列出了原材料 and 步骤，甚至还有 5 星好评。 用户不需要点进网站就看到了核心信息 (Rich Snippet)。 虽然这可能降低点击率，但能极大提升权威感 and 曝光度。 在电商领域，显示价格和库存状态（In Stock）能直接提高转化率。

---

2. 核心概念：JSON-LD

这是 Google 推荐的一种数据格式，直接把“数据”喂给爬虫。 通常放在 <script type="application/ld+json"> 里。

它告诉 Google：

• "我这是一个菜谱"。
• "我这是一个商品，价格 $9.9"。
• "我这是一个活动，下周一开始"。

---

3. 解决方案 (HOW)

3.1 手写 JSON-LD (Next.js)

在博客文章页 page.tsx 中：

export default function BlogPost({ post }) {
  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'BlogPosting',
    headline: post.title,
    image: post.coverImage,
    datePublished: post.date,
    author: {
      '@type': 'Person',
      name: 'Master Teacher',
    },
  }

  return (
    <section>
      {/* 把数据注入到 HTML 中 */}
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      <h1>{post.title}</h1>
      {/* ... */}
    </section>
  )
}

3.2 验证工具

写完后，必须去 Google Rich Results Test 跑一下。 它会告诉你语法对不对，预览出在搜索结果里的样子。

3.3 结构化数据示意图

graph TD
    HTML["网页 HTML"] --> Script["JSON-LD 脚本块"]
    
    Script --> Data["结构化对象"]
    
    Data --"@type: Product"--> Price["价格 $99"]
    Data --"@type: Product"--> Rating["评分 4.8"]
    Data --"@type: Product"--> Stock["有货"]
    
    Data --> Google["Google 搜索结果页"]
    Google --> RichSnippet["渲染出: ⭐⭐⭐⭐⭐ $99"]
    
    style Script fill:#e1bee7,stroke:#8e24aa
    style RichSnippet fill:#fff9c4,stroke:#fbc02d

---

4. 避坑指南

❌ 不要这样做	✅ 应该这样做	为什么
欺骗 Google	真实一致	JSON-LD 里写价格 $1，页面上卖 $100。发现后会被手动惩罚，全站降权。
自己造词	参考 Schema.org	必须严格遵守 schema.org 的字典。Google 只认标准字段，自己发明字段没用。
使用 Next.js Script	原生 script	使用 <Script> 组件加载 JSON-LD 有时会有 Hydration 问题。最稳的是用原生 <script> 加 dangerouslySetInnerHTML。

---

5. 真实案例

---

6. 本章小结

1. Rich Snippet：让你的在搜索结果里脱颖而出。
2. JSON-LD：是实现富文本摘要的标准姿势。
3. Schema.org：是结构化数据的字典。