结构化数据（JSON-LD）

结构化数据是一种标准化的方式，用于向搜索引擎提供关于页面内容的详细信息。通过在 HTML 中嵌入 JSON-LD 格式的数据，可以让搜索引擎理解页面的语义，从而在搜索结果中显示富文本摘要（Rich Results）。本节将介绍 JSON-LD 语法、常用的 Schema.org 类型（Article、Product、FAQ 等），以及 Google Rich Results 的实现方法。

前置知识

阅读本节前，建议先了解：Open Graph 与社交媒体

什么是结构化数据

结构化数据是使用特定格式标记页面内容，使搜索引擎能够理解：

这个页面是什么（文章、产品、FAQ 等）
谁写的（作者信息）
什么时候发布的
评分、价格等详细信息

JSON-LD 基础

JSON-LD 语法

JSON-LD（JavaScript Object Notation for Linked Data）是 Google 推荐的结构化数据格式：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>文章标题</title>

  <!-- 结构化数据 -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "HTML5 教程 - 完整中文学习指南",
    "author": {
      "@type": "Person",
      "name": "张三"
    },
    "datePublished": "2024-01-15T10:00:00+08:00",
    "dateModified": "2024-01-20T15:30:00+08:00",
    "description": "全面的 HTML5 中文教程，从基础到高级。",
    "image": "https://example.com/images/html5-tutorial.jpg",
    "publisher": {
      "@type": "Organization",
      "name": "前端学院",
      "logo": {
        "@type": "ImageObject",
        "url": "https://example.com/logo.png"
      }
    }
  }
  </script>
</head>
<body>...</body>
</html>

JSON-LD 基本结构

字段	说明
`@context`	数据的上下文，通常为 `https://schema.org`
`@type`	数据类型（Article、Product、FAQ 等）
其他字段	根据 `@type` 的具体属性

常用 Schema.org 类型

Article（文章）

html

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "2024年前端性能优化完全指南",
  "description": "深入分析前端性能优化的核心策略...",
  "image": "https://example.com/images/perf-guide.jpg",
  "author": [
    {
      "@type": "Person",
      "name": "张三",
      "url": "https://example.com/authors/zhangsan"
    },
    {
      "@type": "Person",
      "name": "李四",
      "url": "https://example.com/authors/lisi"
    }
  ],
  "publisher": {
    "@type": "Organization",
    "name": "技术博客",
    "logo": {
      "@type": "ImageObject",
      "url": "https://example.com/logo.png",
      "width": 200,
      "height": 60
    }
  },
  "datePublished": "2024-01-15T10:00:00+08:00",
  "dateModified": "2024-01-20T15:30:00+08:00",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://example.com/blog/performance-2024"
  }
}
</script>

Product（产品）

html

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "无线蓝牙耳机 Pro",
  "description": "高品质无线蓝牙耳机，支持主动降噪",
  "image": "https://example.com/images/headphones.jpg",
  "brand": {
    "@type": "Brand",
    "name": "品牌名称"
  },
  "offers": {
    "@type": "Offer",
    "url": "https://example.com/products/headphones-pro",
    "priceCurrency": "CNY",
    "price": "299.00",
    "priceValidUntil": "2024-12-31",
    "availability": "https://schema.org/InStock",
    "seller": {
      "@type": "Organization",
      "name": "官方商城"
    }
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.8",
    "reviewCount": "256"
  },
  "review": [
    {
      "@type": "Review",
      "author": {
        "@type": "Person",
        "name": "用户A"
      },
      "reviewRating": {
        "@type": "Rating",
        "ratingValue": "5"
      },
      "reviewBody": "音质非常好，降噪效果出众！"
    }
  ]
}
</script>

FAQ（常见问题）

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>常见问题 - HTML5 教程</title>

  <!-- FAQ 结构化数据 -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": [
      {
        "@type": "Question",
        "name": "什么是 HTML5？",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "HTML5 是超文本标记语言的第五个主要版本，引入了语义化标签、Canvas 绘图、本地存储等新特性。"
        }
      },
      {
        "@type": "Question",
        "name": "HTML5 和 HTML4 有什么区别？",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "HTML5 引入了新的语义化标签（header、nav、main 等）、新的表单控件、Canvas 和 SVG 支持、本地存储、地理定位等功能。"
        }
      },
      {
        "@type": "Question",
        "name": "如何开始学习 HTML5？",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "建议从基础语法开始，逐步学习语义化标签、表单控件、多媒体元素、Canvas/SVG、Web API 等内容。配合实践项目效果更佳。"
        }
      }
    ]
  }
  </script>
</head>
<body>
  <!-- FAQ 页面内容 -->
  <h1>常见问题</h1>

  <section itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
    <h2 itemprop="name">什么是 HTML5？</h2>
    <div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
      <p itemprop="text">HTML5 是超文本标记语言的第五个主要版本...</p>
    </div>
  </section>

  <section itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
    <h2 itemprop="name">HTML5 和 HTML4 有什么区别？</h2>
    <div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
      <p itemprop="text">HTML5 引入了新的语义化标签...</p>
    </div>
  </section>
</body>
</html>

BreadcrumbList（面包屑）

html

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "首页",
      "item": "https://example.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "产品",
      "item": "https://example.com/products"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "无线蓝牙耳机",
      "item": "https://example.com/products/wireless-headphones"
    }
  ]
}
</script>

LocalBusiness（本地商家）

html

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "前端学院",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "科技路 100 号",
    "addressLocality": "北京",
    "addressRegion": "北京",
    "postalCode": "100000",
    "addressCountry": "CN"
  },
  "telephone": "+86-10-12345678",
  "openingHours": [
    "Mo-Fr 09:00-18:00",
    "Sa 10:00-16:00"
  ],
  "geo": {
    "@type": "GeoCoordinates",
    "latitude": 39.9042,
    "longitude": 116.4074
  }
}
</script>

Google Rich Results

支持的 Rich Results 类型

类型	说明	搜索结果展示
Article	文章	文章信息、作者、日期
Product	产品	价格、评分、库存
FAQ	常见问题	可展开的问题列表
HowTo	操作指南	步骤列表
Recipe	食谱	烹饪时间、评分
Video	视频	缩略图、时长
Breadcrumb	面包屑	搜索结果路径
Review	评论	星级评分
Event	活动	日期、地点

验证工具

使用 Google Rich Results Test 验证结构化数据。

注意事项

使用 JSON-LD 格式：Google 推荐的格式
不要提供虚假信息：结构化数据必须与页面实际内容一致
确保必填字段完整：每种类型有不同的必填字段
避免嵌套过深：保持结构化数据的清晰度
验证后再部署：使用 Google Rich Results Test 验证

最佳实践

使用 <script type="application/ld+json"> 嵌入 JSON-LD
选择正确的 Schema.org 类型
确保必填字段完整且准确
使用 Google Rich Results Test 验证
结构化数据与页面内容保持一致
关注 Google 支持的 Rich Results 类型
结合页面语义化标签使用

继续学习：sitemap 与 robots

结构化数据（JSON-LD） ​

什么是结构化数据 ​

JSON-LD 基础 ​

JSON-LD 语法 ​

JSON-LD 基本结构 ​

常用 Schema.org 类型 ​

Article（文章） ​

Product（产品） ​

FAQ（常见问题） ​

BreadcrumbList（面包屑） ​

LocalBusiness（本地商家） ​

Google Rich Results ​

支持的 Rich Results 类型 ​

验证工具 ​

注意事项 ​

最佳实践 ​

参考链接 ​

结构化数据（JSON-LD）

什么是结构化数据

JSON-LD 基础

JSON-LD 语法

JSON-LD 基本结构

常用 Schema.org 类型

Article（文章）

Product（产品）

FAQ（常见问题）

BreadcrumbList（面包屑）

LocalBusiness（本地商家）

Google Rich Results

支持的 Rich Results 类型

验证工具

注意事项

最佳实践

参考链接