HTML5 - Microdata

HTML5 - 微数据和结构化数据

HTML Microdata 是一种规范，用于在现有 HTML 内容中嵌入机器可读数据。它帮助搜索引擎和其他工具理解网页信息的上下文和含义。

Microdata 的工作原理是向 HTML 标签引入属性，以定义结构化的“项”（items）及其“属性”（properties）。一个项（item）代表一个实体（例如一个人、一个产品或一个事件），而属性（properties）是关于该实体的具体细节。

Microdata 属性

Microdata 使用五个关键的全局属性：

属性	描述
itemscope	一个布尔属性，声明一个新的项。它为使用 `itemprop` 定义的属性创建作用域。
itemtype	指定项的词汇表（schema）和类型。其值通常是一个指向项定义的 URL（例如来自 Schema.org）。
itemprop	指示包含该属性的标签持有该项指定属性的值。
itemid	为该项提供一个唯一的全局标识符，通常是一个 URL。
itemref	允许使用 ID 将不属于 `itemscope` 元素后代但与该项相关的元素关联起来。

基本示例

下面是如何使用 Microdata 和 Schema.org 词汇表来标记关于一个人的信息：

<div itemscope itemtype="https://schema.org/Person">
  <p>My name is <span itemprop="name">Zara</span>.</p>
  <p>My website is <a href="https://example.com" itemprop="url">example.com</a>.</p>
  <p>I work at <span itemprop="affiliation" itemscope itemtype="https://schema.org/Organization">
    <span itemprop="name">Example Corp</span>
   </span>.</p>
</div>

在此示例中：

外层的 div 使用 itemscope 和 itemtype 定义了一个类型为 Person 的项。
itemprop="name" 将 ‘Zara’ 标识为这个人的姓名。
itemprop="url" 将这个链接标识为这个人的 URL。
一个内层的 itemscope 定义了一个相关的 Organization（组织），它拥有自己的 name 属性。

属性值

属性值（itemprop）通常是从元素内容中提取的字符串。但特定的 HTML 元素会改变值的解释方式：

<meta>：值取自 content 属性。
<a>、<area>、<link>：值取自 href 属性（表示一个 URL）。
<img>、<audio>、<video>、<embed>、<iframe>：值取自 src 属性（表示一个 URL）。
<object>：值取自 data 属性。
<time>：值取自 datetime 属性。
<data>：值取自 value 属性。

不同值类型的示例

<div itemscope itemtype="https://schema.org/Event">
  <h1 itemprop="name">Tech Conference 2024</h1>
  <p>Date:
    <time itemprop="startDate" datetime="2024-10-26T09:00">October 26th, 2024, 9:00 AM</time>
  </p>
  <p>Location:
    <span itemprop="location" itemscope itemtype="https://schema.org/Place">
      <span itemprop="name">Conference Center</span>
    </span>
  </p>
  <a itemprop="url" href="https://example.com/conference">Event Website</a>
  <img itemprop="image" src="/images/conference-logo.png" alt="Conference Logo"/>
  <meta itemprop="eventStatus" content="https://schema.org/EventScheduled" />
</div>

现代方法：JSON-LD

虽然 Microdata 是 HTML 标准的一部分，但 JSON-LD (JavaScript Object Notation for Linked Data) 现在是 Google 和其他主流搜索引擎推荐的格式，用于嵌入结构化数据。

JSON-LD 允许你在 <script type="application/ld+json"> 标签内嵌入结构化数据，该标签通常放置在 HTML 的 <head> 或 <body> 中。这将结构化数据标记与你可见的 HTML 内容分开，使其更整洁且更易于管理。

JSON-LD 示例（等同于上面的 Person 示例）

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Person",
  "name": "Zara",
  "url": "https://example.com",
  "affiliation": {
    "@type": "Organization",
    "name": "Example Corp"
  }
}
</script>

<!-- 可见的 HTML 内容 -->
<div>
  <p>My name is Zara.</p>
  <p>My website is <a href="https://example.com">example.com</a>.</p>
  <p>I work at Example Corp.</p>
</div>

词汇表：Schema.org

无论你使用 Microdata 还是 JSON-LD，都需要一个词汇表来定义类型和属性。Schema.org (https://schema.org) 是最广泛采用的词汇表，受主流搜索引擎支持。

它提供了大量的类型集合（例如 Person、Product、Recipe、Event、LocalBusiness）及其相应的属性。使用 Schema.org 有助于确保你的结构化数据得到正确理解。

测试结构化数据

你可以使用诸如 Schema Markup Validator (https://validator.schema.org/) 和 Google 的 Rich Results Test (https://search.google.com/test/rich-results) 等工具来测试你的结构化数据实现。

虽然 Microdata 仍然是有效的 HTML，但在现代 Web 开发和 SEO 中，采用 JSON-LD 并结合 Schema.org 通常是首选的最佳实践。

关于 Microdata 的更多详细信息，请参考 W3C HTML Microdata 规范 (https://www.w3.org/TR/microdata/) 或 MDN Web Docs (https://developer.mozilla.org/en-US/docs/Web/HTML/Microdata)。