JSON-LD 实战：让搜索引擎看懂网页内容的 Schema.org 结构化数据

核心洞察

这篇文章最有意思的点是，把结构化数据使用模式标记和其他元数据格式化的内容，以增强机器可读性，帮助AI搜索引擎更好地理解和处理信息。这事拆得很实用。不用懂什么语义网、知识图谱那些大词，照着 JSON-LDA lightweight Linked Data format for structuring data in JSON, recommended by Google for Schema.org implementation. 格式把代码往页面里一贴就行。唯一要留个心眼的是别标记虚假数据，Google 盯这个盯得很紧。

核心结论

1. Google 官方推荐使用 JSON-LD 格式实现结构化数据，它在易用性、代码整洁度、维护性方面均优于 MicrodataAn HTML5 specification for embedding structured data directly within HTML content using item attributes. 和 RDFaA W3C standard for embedding rich metadata within web documents using HTML/XML attributes.，而 RDFa 因支持有限已被列为不推荐。

2. 电商网站通过 Product 结构化数据，可在搜索结果中直接展示“评分：4.8/5（427个评价）、价格：¥599、库存：有货”等关键信息，从而有效提升点击率。

3. 结构化数据中的时间字段必须遵循 ISO 8601 格式，例如 prepTime: "PT5M" 表示 5 分钟，Event 的 startDate 必须带时区偏移（如 +08:00）；LocalBusiness 的 dayOfWeek 必须使用英文（Monday 至 Saturday），不能使用中文。

4. Google 提供了结构化数据测试工具，可通过输入 URL 或粘贴代码验证实现是否正确，常见错误包括缺少必需属性、值格式错误、类型不匹配和嵌套错误。

5. 在添加结构化数据时不能标记虚假信息，Google 对虚假标记行为有严格监管。

结构化数据与 Schema.orgA structured data standard developed by Google, Microsoft, Yahoo, and Yandex to help search engines understand web content through semantic markup. 完全指南

什么是结构化数据

结构化数据就是用标准化格式给网页内容贴标签。搜索引擎不光要看页面上的文字，还要知道这些文字代表什么。比如"Python 教程 99 美元 4.5 星"这几个词，人一眼就懂，但搜索引擎看到的只是一堆字符串。贴上结构化数据之后，它才知道这是一门课程、价格 99 美元、评分 4.5 分。

结构化数据的作用

直接看这个对比：

没有结构化数据：
用户看到     "Python 教程 - $99 - 4.5 星"
搜索引擎看到 "字符串，不理解"

有结构化数据：
用户看到     "Python 教程 - $99 - 4.5 星"
搜索引擎看到 
  {
    type: 课程
    名称: Python 教程
    价格: 99 美元
    评分: 4.5
    评价数: 1250
    讲师: John Smith
    难度: 初级
  }

结构化数据的好处

好处分三层看：

搜索引擎角度：
  1. 更准确理解内容
  2. 识别实体类型
  3. 验证内容准确性

用户体验角度：
  1. 富文本摘要（Rich Snippet）
  2. 知识面板（Knowledge Panel）
  3. 数据点（Data Highlighting）

业务角度：
  1. 提高点击率
  2. 增加转化
  3. 建立品牌信任

搜索结果里能直接显示评分、价格、库存，用户还没点进来就已经看到了关键信息，点击率自然不一样。

结构化数据的三种格式

1. JSON-LD（推荐）

JSON-LD 是 Google 官方推荐的格式。它不碰 HTML 结构，直接在页面里放一个 <script> 标签，里面写 JSON。实现起来最简单，也最容易动态生成。

示例：

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "结构化数据与 Schema.org 完全指南",
  "image": "/images/schema-guide.jpg",
  "datePublished": "2025-12-10",
  "dateModified": "2025-12-10",
  "author": {
    "@type": "Person",
    "name": "HTMLPAGE 团队"
  },
  "publisher": {
    "@type": "Organization",
    "name": "HTMLPAGE",
    "logo": {
      "@type": "ImageObject",
      "url": "/logo.png"
    }
  }
}
</script>

2. Microdata

Microdata 的思路是直接在 HTML 标签上加属性。itemscope、itemtype、itemprop 这些属性把数据嵌在标签里。

<article itemscope itemtype="https://schema.org/Article">
  <h1 itemprop="headline">
    结构化数据与 Schema.org 完全指南
  </h1>
  <img itemprop="image" src="/images/schema-guide.jpg">
  <time itemprop="datePublished" datetime="2025-12-10">
    2025-12-10
  </time>
  <div itemprop="author" itemscope itemtype="https://schema.org/Person">
    <span itemprop="name">HTMLPAGE 团队</span>
  </div>
</article>

数据跟 HTML 代码混在一起，页面写起来很乱，后面维护也麻烦。

3. RDFa

RDFa 跟 Microdata 类似，也是在 HTML 属性里做标记。它用 vocab 和 typeof 这些属性：

<article vocab="https://schema.org/" typeof="Article">
  <h1 property="headline">
    结构化数据与 Schema.org 完全指南
  </h1>
  <img property="image" src="/images/schema-guide.jpg">
</article>

格式比 Microdata 更绕，支持也少，现在基本没人用了。

三种格式对比

常用 Schema 类型及实现

1. Article（文章）

博客、新闻、教程都能用 Article。示例里把作者、发布时间、关键词都标出来了：

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "@id": "https://example.com/article/123",
  "mainEntity": {
    "@type": "Article",
    "headline": "完整的 Python 异步编程指南",
    "alternativeHeadline": "深度讲解 asyncio 和 async/await",
    "image": [
      "https://example.com/images/python-async.jpg"
    ],
    "datePublished": "2025-12-08",
    "dateModified": "2025-12-10",
    "author": [
      {
        "@type": "Person",
        "name": "张三",
        "url": "https://example.com/authors/zhangsan"
      }
    ],
    "publisher": {
      "@type": "Organization",
      "name": "HTMLPAGE",
      "logo": {
        "@type": "ImageObject",
        "url": "https://example.com/logo.png"
      }
    },
    "description": "详细讲解 Python asyncio 库的使用...",
    "articleBody": "文章的完整内容...",
    "wordCount": 2500,
    "articleSection": "科技",
    "keywords": "Python, async, asyncio, 异步编程"
  }
}
</script>

搜索结果里的展示效果：

完整的 Python 异步编程指南
example.com › article › 123
深度讲解 asyncio 和 async/await
作者：张三 | 日期：2025-12-08 | 阅读时间：8 分钟

2. Product（产品）

电商网站基本都要用。价格、评分、库存、评价都能标出来：

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "React 高级开发课程",
  "description": "系统学习 React 高级模式和最佳实践",
  "image": "https://example.com/product/react-course.jpg",
  "brand": {
    "@type": "Brand",
    "name": "HTMLPAGE 学院"
  },
  "offers": {
    "@type": "Offer",
    "url": "https://example.com/products/react-course",
    "priceCurrency": "CNY",
    "price": "599",
    "priceValidUntil": "2025-12-31",
    "availability": "https://schema.org/InStock",
    "inventoryLevel": {
      "@type": "QuantitativeValue",
      "value": "100"
    }
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.8",
    "reviewCount": 427,
    "bestRating": "5",
    "worstRating": "1"
  },
  "review": [
    {
      "@type": "Review",
      "author": {
        "@type": "Person",
        "name": "李四"
      },
      "datePublished": "2025-11-15",
      "reviewRating": {
        "@type": "Rating",
        "ratingValue": "5"
      },
      "reviewBody": "非常实用的课程，讲解深入浅出"
    }
  ]
}
</script>

展示效果：

React 高级开发课程
example.com › products › react-course
评分：4.8/5（427 个评价）
价格：¥599 | 库存：有货

3. Event（活动）

会议、工作坊、线上直播都能用：

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Event",
  "name": "2025 年 React 技术峰会",
  "description": "年度最大的 React 开发者聚会",
  "url": "https://example.com/events/react-summit-2025",
  "image": "https://example.com/events/react-summit.jpg",
  "startDate": "2025-12-15T09:00:00+08:00",
  "endDate": "2025-12-17T17:00:00+08:00",
  "eventStatus": "https://schema.org/EventScheduled",
  "eventAttendanceMode": "https://schema.org/HybridEventAttendanceMode",
  "location": [
    {
      "@type": "Place",
      "name": "北京国际会议中心",
      "address": {
        "@type": "PostalAddress",
        "streetAddress": "朝阳区建国路 1 号",
        "addressLocality": "北京",
        "postalCode": "100010",
        "addressCountry": "CN"
      }
    },
    {
      "@type": "VirtualLocation",
      "url": "https://example.com/live-stream"
    }
  ],
  "organizer": {
    "@type": "Organization",
    "name": "HTMLPAGE 社区",
    "url": "https://example.com"
  },
  "offers": {
    "@type": "Offer",
    "url": "https://example.com/events/react-summit-2025/tickets",
    "price": "899",
    "priceCurrency": "CNY",
    "availability": "https://schema.org/InStock",
    "validFrom": "2025-11-01T00:00:00+08:00"
  },
  "performer": [
    {
      "@type": "Person",
      "name": "尤雨溪"
    },
    {
      "@type": "Person",
      "name": "Dan Abramov"
    }
  ]
}
</script>

注意 startDate 和 endDate 的格式带了时区偏移 +08:00，这个不能省。

4. Recipe（食谱）

食品博客用这个，做法步骤能直接展示在搜索结果里：

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Recipe",
  "name": "番茄鸡蛋面",
  "description": "简单易做的经典家常面食",
  "image": [
    "https://example.com/recipe/tomato-egg-noodles.jpg"
  ],
  "author": {
    "@type": "Person",
    "name": "美食博主"
  },
  "prepTime": "PT5M",
  "cookTime": "PT15M",
  "totalTime": "PT20M",
  "recipeYield": "2",
  "recipeCategory": "Breakfast",
  "recipeCuisine": "Chinese",
  "recipeIngredient": [
    "2 个番茄",
    "2 个鸡蛋",
    "200g 面条",
    "盐、油、葱"
  ],
  "recipeInstructions": [
    {
      "@type": "HowToStep",
      "text": "番茄切块，鸡蛋打散"
    },
    {
      "@type": "HowToStep",
      "text": "油热后炒番茄和鸡蛋"
    },
    {
      "@type": "HowToStep",
      "text": "煮面条，装盘混合"
    }
  ],
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.5",
    "reviewCount": 89
  }
}
</script>

prepTime 和 cookTime 要用 ISO 8601 格式，PT5M 就是 5 分钟的意思。

5. LocalBusiness（本地商业）

有实体店的用这个，地址、电话、营业时间、地理坐标都能标：

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "HTMLPAGE 线下培训中心",
  "image": "https://example.com/office.jpg",
  "description": "专业的前端开发培训机构",
  "url": "https://example.com",
  "telephone": "+86-10-12345678",
  "email": "contact@example.com",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "朝阳区建国路 1 号",
    "addressLocality": "北京",
    "postalCode": "100010",
    "addressCountry": "CN"
  },
  "geo": {
    "@type": "GeoCoordinates",
    "latitude": "39.9042",
    "longitude": "116.4074"
  },
  "openingHoursSpecification": [
    {
      "@type": "OpeningHoursSpecification",
      "dayOfWeek": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
      "opens": "09:00",
      "closes": "18:00"
    },
    {
      "@type": "OpeningHoursSpecification",
      "dayOfWeek": ["Saturday"],
      "opens": "10:00",
      "closes": "16:00"
    }
  ],
  "sameAs": [
    "https://weibo.com/htmlpage",
    "https://wechat.com/htmlpage"
  ],
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.7",
    "reviewCount": 156
  }
}
</script>

dayOfWeek 用的是英文的 Monday 到 Saturday，这是 Schema.org 的规定，不能改成中文。

6. NewsArticle（新闻文章）

新闻网站要用 NewsArticle，跟普通 Article 区分开：

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "NewsArticle",
  "headline": "React 19 发布，引入新的编译器",
  "alternativeHeadline": "React 官方发布最新版本",
  "image": [
    "https://example.com/react-19-news.jpg"
  ],
  "datePublished": "2025-12-01T12:00:00+08:00",
  "dateModified": "2025-12-01T14:00:00+08:00",
  "author": {
    "@type": "Person",
    "name": "科技记者",
    "url": "https://example.com/authors/reporter"
  },
  "publisher": {
    "@type": "Organization",
    "name": "技术新闻网",
    "logo": {
      "@type": "ImageObject",
      "url": "https://example.com/logo.png"
    }
  },
  "description": "React 19 版本发布，包含新的编译器和性能优化"
}
</script>

验证和测试

代码贴上去了，得确认没写错。Google 给了一个测试工具，输入网址或者直接粘贴代码就能看到解析结果。

1. Google 结构化数据测试工具

访问 Google 结构化数据测试工具：

步骤：
1. 输入 URL 或复制代码
2. 点击验证
3. 查看错误和警告
4. 修复问题

2. 常见错误和解决

3. 验证脚本

不想手动验证的话，可以在浏览器控制台跑这个脚本，自动检查页面上所有 JSON-LD：

// 检查 JSON-LD 结构化数据的脚本
const validateStructuredData = () => {
  // 查找所有 JSON-LD 脚本
  const scripts = document.querySelectorAll('script[type="application/ld+json"]')
  
  scripts.forEach((script, index) => {
    try {
      // 解析 JSON
      const data = JSON.parse(script.textContent)
      
      // 验证基本结构
      if (!data['@context']) {
        console.warn(`脚本 ${index}: 缺少 @context`)
      }
      if (!data['@type']) {
        console.warn(`脚本 ${index}: 缺少 @type`)
      }
      
      // 根据类型验证必需属性
      validateByType(data['@type'], data)
      
      console.log(`脚本 ${index} 验证通过`)
    } catch (e) {
      console.error(`脚本 ${index} JSON 解析失败:`, e)
    }
  })
}

// 根据 Schema 类型验证
const validateByType = (type, data) => {
  const required = {
    'Article': ['headline', 'image', 'datePublished', 'author'],
    'Product': ['name', 'image', 'offers'],
    'Event': ['name', 'startDate', 'location'],
    'Recipe': ['name', 'recipeIngredient', 'recipeInstructions']
  }
  
  const typeRequired = required[type] || []
  typeRequired.forEach(field => {
    if (!data[field]) {
      console.warn(`类型 ${type}: 缺少必需字段 ${field}`)
    }
  })
}

validateStructuredData()

在 Vue/React 中实现 JSON-LD

页面是 Vue 或 React 写的，可以直接在组件挂载时把 JSON-LD 脚本注入到 <head> 里。

Vue 3 示例

<template>
  <article>
    <h1>{{ article.title }}</h1>
    <p>{{ article.description }}</p>
  </article>
</template>

<script setup>
import { onMounted } from 'vue'

const article = {
  title: '结构化数据完全指南',
  description: '深入讲解 Schema.org...',
  author: 'HTMLPAGE 团队',
  datePublished: '2025-12-10'
}

// 在挂载时注入 JSON-LD
onMounted(() => {
  const script = document.createElement('script')
  script.type = 'application/ld+json'
  
  const schemaData = {
    '@context': 'https://schema.org',
    '@type': 'Article',
    headline: article.title,
    description: article.description,
    author: {
      '@type': 'Person',
      name: article.author
    },
    datePublished: article.datePublished
  }
  
  script.textContent = JSON.stringify(schemaData)
  document.head.appendChild(script)
})
</script>

React 示例

import { useEffect } from 'react'

export default function Article({ article }) {
  useEffect(() => {
    const script = document.createElement('script')
    script.type = 'application/ld+json'
    
    const schemaData = {
      '@context': 'https://schema.org',
      '@type': 'Article',
      headline: article.title,
      description: article.description,
      author: {
        '@type': 'Person',
        name: article.author
      },
      datePublished: article.datePublished
    }
    
    script.textContent = JSON.stringify(schemaData)
    document.head.appendChild(script)
    
    return () => {
      document.head.removeChild(script)
    }
  }, [article])
  
  return (
    <article>
      <h1>{article.title}</h1>
      <p>{article.description}</p>
    </article>
  )
}

React 示例里 useEffect 的清理函数会在组件卸载时把脚本移除，这个细节别漏了。

结构化数据最佳实践

应该做
  1. 使用 JSON-LD 格式
  2. 只标记可见内容
  3. 使用官方 Schema.org 类型
  4. 定期验证结构化数据
  5. 包含尽可能多的相关信息
  6. 在发布前测试

不要做
  1. 标记隐藏内容
  2. 标记与页面无关的内容
  3. 创建虚假评价或评分
  4. 标记用户无法看到的价格
  5. 为了排名滥用结构化数据
  6. 忽略 Google 的错误警告

常见问题解答

Q: 结构化数据会立即提升排名吗？
A: 不会。Google 说得很明白，结构化数据帮助搜索引擎理解内容，可能改进 SERP 的展示，但不算排名因素。想要排名靠前，还是得靠内容和外链。

Q: 可以对所有页面使用相同的 Schema 吗？
A: 不建议。每个页面的结构化数据应该准确反映实际内容。一篇文章标成 Product，Google 收录的时候会懵。

Q: 多个 JSON-LD 脚本可以在同一页面上吗？
A: 可以。页面里有文章和评论两个实体，就放两个脚本分别标记。

Q: 结构化数据有 SEO 风险吗？
A: 有。如果你标记虚假数据，比如编造评价、虚标价格，被 Google 发现会处罚。诚实标记就好。

总结

结构化数据值得做，它让搜索引擎更容易理解页面内容，搜索结果展示更丰富。这张单子记一下：

• 帮助搜索引擎理解内容
• 改进搜索结果展示
• 可能提高点击率和转化
• 为未来的 AI 应用做准备

推荐资源

• Schema.org 官方网站
• Google 结构化数据文档
• Google 结构化数据测试工具
• Rich Results Test

常见问题（FAQ）

Schema.org结构化数据是什么？对SEO有什么好处？

结构化数据用Schema.org标准给网页内容贴标签，让搜索引擎识别课程、价格、评分等实体信息。SEO好处主要是能显示富文本摘要搜索引擎在搜索结果中显示的结构化数据增强片段，如星级评分、价格等。、知识面板，提高点击率、转化率和品牌信任度。推荐用JSON-LD实现。

JSON-LD、Microdata和RDFa三种格式有什么不同？应该选哪个？

JSON-LD不干扰HTML，通过script标签实现，维护容易，是Google官方推荐。Microdata直接写在HTML属性中，代码较乱。RDFa更复杂且支持有限。因此，推荐使用JSON-LD。

怎么检查Schema.org标记是否正确？

标记后用Google富结果测试工具或验证工具检测。确保无错误、无虚假数据，且类型属性完整。注意不要标记虚假信息，Google会惩罚。常见类型如Article、Product、Event等都有示例。