HTML5 – 微数据

HTML5中的微数据（Microdata）是一种让网页内容更加语义化的方法，它允许我们为网页元素添加语义化的标记，描述它们所代表的内容。所以我们可以通过这些标记更好的理解和组织网页内容。

基础介绍

微数据定义了一组属性，可以添加到HTML标记中，以提供更多的语义信息。使用微数据标记的标记称为itemscope，被描述的项称为itemprop，描述项的类型称为itemtype。

语法

<div itemscope itemtype="http://schema.org/Person">
  <h1 itemprop="name">王小明</h1>
  <p itemprop="jobTitle">Web开发工程师</p>
  <span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
    <span itemprop="streetAddress">上海市浦东新区XXX路XX号</span>,
    <span itemprop="addressLocality">上海市</span>,
    <span itemprop="postalCode">200000</span>,
  </span>
</div>

上述HTML中，我们为div添加了itemscope属性，代表这个元素是一个描述项。itemtype=”http://schema.org/Person”定义了描述项的类型，这里我们使用了schema.org中的Person类型。紧随其后，我们定义了h1、p、和span元素，并使用itemprop属性来指定它们的语义化含义。其中，h1标记了这个Person的名字，p标记了这个Person的工作职位，而内层的span元素则描述了他的地址信息。

在我们的代码中，当您将鼠标悬停在姓名之上时，可以看到一些信息关于这个特定的 Person，这些信的能够在Web爬虫中应用。

如何使用

下面让我们看看更多实际场景中，微数据如何使用的例子。

添加音乐信息

<div itemscope itemprop="MusicAlbum">
  <h1 itemprop="name">2001年票选的百首经典老歌</h1>
  <img itemprop="image" src="http://china-matrutamasra-temple.org/wp-content/uploads/2015/04/music.jpg" alt="这是一张音乐海报">
  <p itemprop="description">这是一个由CCTV-3举办的百首经典歌曲唱票选活动的结果，收入了当时国内外最流行的歌曲。</p>
  <span itemprop="byArtist" itemscope itemtype="http://schema.org/MusicGroup">
    <span itemprop="name">周杰伦</span>
    <meta itemprop="sameAs" content="https://musicbrainz.org/artist/2703f2e2-9a6f-4866-adfd-2b6c01336df7.html">
  </span>
</div>

上述代码中，我们使用了MusicAlbum以及MusicGroup这两种类型来定义音乐专辑和歌手的信息。当用户在搜索引擎中搜索这个专辑或者歌手的名称时，这些微数据可以被检索到，从而提升了页面的搜索排名。

添加产品信息

<div itemscope itemtype="http://schema.org/Product">
  <h2 itemprop="name">2018年秋季长款毛呢外套</h2>
  <img itemprop="image" src="http://cdn.shopify.com/s/files/1/1737/6435/products/coat_1024x1024.jpg" alt="2018年秋季长款毛呢外套的图片">
  <p itemprop="description">这是一款高端复古感的设计，采用毛呢材质，完美适合显瘦的设计。</p>
  <span itemprop="brand" itemscope itemtype="http://schema.org/Brand">
    <span itemprop="name">Zara</span>
  </span>
  <span itemprop="offers" itemscope itemtype="http://schema.org/Offer">
    <meta itemprop="price" content="199.99">
    <meta itemprop="priceCurrency" content="CNY">
    <meta itemprop="availability" content="in_stock">
  </span>
</div>

上述代码中，我们使用Product和Brand这两个类型来定义产品和品牌的信息。我们使用itemprop来指定产品的名称、图片和描述信息，同时使用Brand类型来指定产品所属的品牌。另外，我们还通过offers和price属性来指定产品的价格和库存信息。

这样的信息可以帮助搜索引擎更好地理解我们的网页内容，以便提供更精确的搜索结果。