结构化数据与 Schema.org 完全指南

什么是结构化数据

结构化数据是一种用标准化格式标记网页内容的方式，让搜索引擎更容易理解页面的含义，不仅能看到内容本身，还能理解内容代表什么。

结构化数据的作用

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

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

结构化数据的好处

搜索引擎角度：
  ✅ 更准确理解内容
  ✅ 识别实体类型
  ✅ 验证内容准确性
        ↓
用户体验角度：
  ✅ 富文本摘要（Rich Snippet）
  ✅ 知识面板（Knowledge Panel）
  ✅ 数据点（Data Highlighting）
        ↓
业务角度：
  ✅ 提高点击率
  ✅ 增加转化
  ✅ 建立品牌信任

结构化数据的三种格式

1. JSON-LD（推荐）

JSON-LD（JSON for Linking Data）是 Google 官方推荐的格式，在 HTML 中用 <script> 标签嵌入。

优点：

• ✅ 最简单，易于实现
• ✅ 不混入 HTML 代码
• ✅ Google 官方推荐
• ✅ 易于动态生成

示例：

<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 元素上添加属性来标记数据。

<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（Resource Description Framework in Attributes）类似于 Microdata。

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

缺点：

• ❌ 格式更复杂
• ❌ 支持较少
• ❌ 较少使用

三种格式对比

常用 Schema 类型及实现

1. Article（文章）

最常用的 Schema 类型，适合博客、新闻、教程等。

<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) 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>

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>

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>

6. NewsArticle（新闻文章）

新闻网站应使用这种类型。

<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>

验证和测试

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

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

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

2. 常见错误和解决

3. 验证脚本

// 检查 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 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>
  )
}

结构化数据最佳实践

✅ DO（应该做）
  ├─ 使用 JSON-LD 格式
  ├─ 只标记可见内容
  ├─ 使用官方 Schema.org 类型
  ├─ 定期验证结构化数据
  ├─ 包含尽可能多的相关信息
  └─ 在发布前测试

❌ DON'T（不应该做）
  ├─ 标记隐藏内容
  ├─ 标记与页面无关的内容
  ├─ 创建虚假评价或评分
  ├─ 标记用户无法看到的价格
  ├─ 为了排名滥用结构化数据
  └─ 忽略 Google 的错误警告

常见问题解答

Q: 结构化数据会立即提升排名吗？ A: 不会。结构化数据帮助搜索引擎理解内容，可能改进 SERP 展示，但不是排名因素。排名还需要优质内容和反向链接。

Q: 可以对所有页面使用相同的 Schema 吗？ A: 不建议。每个页面的结构化数据应该准确反映实际内容。

Q: 多个 JSON-LD 脚本可以在同一页面上吗？ A: 可以。如果页面包含多个实体（如文章和评论），可以用多个脚本标记。

Q: 结构化数据有 SEO 风险吗？ A: 如果标记虚假数据（如假评价、假价格），Google 会处罚。要诚实标记。

总结

结构化数据的核心价值：

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

推荐资源

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