跳到主要内容

HTML 结构化数据

介绍​

HTML结构化数据是一种用于描述网页内容的标准化格式。它通过特定的标记语言（如JSON-LD、Microdata或RDFa）为搜索引擎提供额外的上下文信息，帮助搜索引擎更好地理解网页内容。结构化数据不仅有助于提升SEO（搜索引擎优化），还能使网页在搜索结果中显示更丰富的摘要（如星级评分、产品价格等）。

备注

结构化数据不会直接影响网页的排名，但它可以增强网页在搜索结果中的可见性，从而间接提升点击率。

为什么需要结构化数据？​

搜索引擎通过爬虫抓取网页内容，但它们并不总是能完全理解网页的语义。例如，一个网页可能包含产品名称、价格和评论，但搜索引擎可能无法准确识别这些信息之间的关系。通过结构化数据，开发者可以明确告诉搜索引擎这些信息的含义，从而帮助搜索引擎更好地展示网页内容。

常见的结构化数据格式​

HTML结构化数据主要有三种格式：

  1. JSON-LD：一种基于JSON的格式，通常放在<script>标签中。
  2. Microdata：一种直接在HTML标签中添加属性的格式。
  3. RDFa：一种基于XML的格式，类似于Microdata。

JSON-LD 示例​

JSON-LD是目前最推荐的结构化数据格式，因为它易于维护且与HTML代码分离。以下是一个简单的JSON-LD示例：

html
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "无线蓝牙耳机",
  "image": "https://example.com/headphones.jpg",
  "description": "高音质无线蓝牙耳机，支持降噪功能。",
  "brand": {
    "@type": "Brand",
    "name": "AudioTech"
  },
  "offers": {
    "@type": "Offer",
    "price": "199.99",
    "priceCurrency": "CNY"
  }
}
</script>

Microdata 示例​

Microdata直接在HTML标签中添加属性，以下是一个简单的Microdata示例：

html
<div itemscope itemtype="https://schema.org/Product">
  <span itemprop="name">无线蓝牙耳机</span>
  <img itemprop="image" src="https://example.com/headphones.jpg" alt="无线蓝牙耳机" />
  <span itemprop="description">高音质无线蓝牙耳机，支持降噪功能。</span>
  <div itemprop="brand" itemscope itemtype="https://schema.org/Brand">
    <span itemprop="name">AudioTech</span>
  </div>
  <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
    <span itemprop="price">199.99</span>
    <span itemprop="priceCurrency">CNY</span>
  </div>
</div>
提示

JSON-LD是Google推荐的结构化数据格式，因为它更易于维护且与HTML代码分离。

结构化数据的实际应用​

1. 产品页面​

在产品页面中，结构化数据可以帮助搜索引擎显示产品的价格、库存状态、评分等信息。例如，以下是一个包含产品信息的JSON-LD示例：

html
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "智能手表",
  "image": "https://example.com/smartwatch.jpg",
  "description": "多功能智能手表，支持心率监测和GPS定位。",
  "brand": {
    "@type": "Brand",
    "name": "TechWear"
  },
  "offers": {
    "@type": "Offer",
    "price": "599.99",
    "priceCurrency": "CNY",
    "availability": "https://schema.org/InStock"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.5",
    "reviewCount": "120"
  }
}
</script>

2. 文章页面​

在文章页面中，结构化数据可以帮助搜索引擎显示文章的标题、作者、发布日期等信息。以下是一个包含文章信息的JSON-LD示例：

html
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "如何优化HTML结构化数据",
  "description": "本文详细介绍了HTML结构化数据的概念及其在SEO中的应用。",
  "author": {
    "@type": "Person",
    "name": "张三"
  },
  "datePublished": "2023-10-01",
  "publisher": {
    "@type": "Organization",
    "name": "编程学习网",
    "logo": {
      "@type": "ImageObject",
      "url": "https://example.com/logo.png"
    }
  }
}
</script>

如何测试结构化数据？​

Google提供了一个免费的结构化数据测试工具，可以帮助开发者验证结构化数据的正确性。只需将网页URL或代码粘贴到工具中，即可查看结构化数据是否被正确解析。

警告

在发布网页之前，务必使用工具测试结构化数据，确保没有错误或警告。

总结​

HTML结构化数据是提升网页SEO和搜索结果可见性的重要工具。通过使用JSON-LD、Microdata或RDFa，开发者可以为搜索引擎提供额外的上下文信息，帮助搜索引擎更好地理解网页内容。无论是产品页面、文章页面还是其他类型的网页，结构化数据都能显著提升用户体验和点击率。

附加资源​

练习​

  1. 为你的个人博客文章页面添加JSON-LD格式的结构化数据。
  2. 使用Google的结构化数据测试工具验证你的代码是否正确。
  3. 尝试为产品页面添加Microdata格式的结构化数据，并比较其与JSON-LD的优缺点。

通过以上练习，你将更好地掌握HTML结构化数据的应用和优化技巧。