MicroData

[HuColin]

MicroData

　　我们都知道,前端语义化已经成为了一个趋势,语义化的标签可以让代码更具有可读性(包括机器和人).例如在H5中有这么几个标签header footer sidebar以及其他一些标签,这些标签清晰地指出了html代码中每一部分的具体的作用,便于代码的维护和团队合作.

　　过去我们常用添加类名或是id亦或是写注释来达到这个目的.确实,这很大程度上解决了"人"对于代码的阅读需求,然而,对于机器(搜索引擎)来说这就是一个巨大的问题了.例如:我们使用<h1>标签包裹页面标题信息就是为了让机器识别

　　为了解决这个问题，我们就要用一个特定的规范去描述我们的页面.在HTML和CSS Javascript三者中,html主要是负责数据的结构与呈现,于是microdata利用这一特点,在HTML标签中增加一系列的属性来告诉机器这些文字或是数据分别是什么含义.

　　我们最常看到用这一特性的就是meta标签了

<meta name="keywords" content="HTML,ASP,PHP,SQL">

　　我们说要描述的数据不仅如此,我们要描述一个电影,必然要说清楚这个电影的名称,男猪脚和女猪脚是谁?那个导演导演的?啥时候上映?对于商家来说还要说这部影片什么时候在哪里排片情况如何.我的影院的电话号码是多少,在哪里,官网是什么等等一系列的问题.这些问题光靠meta标签怕是有些困难

　　我们看看下面的一段代码,看看MicroData是怎么解决的:

<div itemscope itemtype="http://schema.org/Movie">
    <h1 itemprop="name">美国队长3</h1>
    <div itemprop="description">
        该片根据<span itemprop="about">漫威2006年出版的漫画大事件《内战》</span>
        改编，背景故事承接于《复仇者联盟2：奥创纪元》事件的余波中，讲述了奥创事件
        后引发的一系列政治问题导致复仇者之间内部矛盾激化的故事。
    </div>
    <span itemprop="director" itemscope itemtype="http://schema.org/Person">
        <span itemprop="name">安东尼·罗素</span>
        /
        <span itemprop = "name">乔·罗素兄弟</span>
    </span>
    <span itemprop="locationCreated">美国</span>
    <span itemprop="publisher">漫威影业公司</span>
    <p>时长
        <span itemprop="duration">147 min</span>
    </p>
   <span itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
       <span itemprop="ratingCount">***</span>
       <span itemprop="reviewCount">*****</span>
       <span itemprop="ratingValue">4.5</span>
       /
       <span itemprop="bestRating">5</span>
   </span>
   </p>
</div>

　　在这里先用itemscope声明microdata的编辑区域,然后用itemtype来声明你所使用的词汇库.在其下面,我们用itemprop来指定属性的值.具体语法将在下面给个传送门.
　　词汇表是干啥用的呢?它定义了itemprop可以使用的值,我们上面的例子用的是Google丰富网页摘要词汇表要用的时候可以到里面查询具体的词汇表
　　
　　这种写法似乎有违于HTML要求的简介清晰明了的特点,上面的一大堆,看起来一点也不优雅.有一个好消息

2014年1月16日，W3C的资源描述框架（RDF）工作组发布了JSON-LD 1.0及JSON-LD 1.0处理算法和API（JSON-LD 1.0 Processing Algorithms and API）两份正式推荐标准（W3C Recommendation）。

　　看看google给的示例

  <script type="application/ld+json">
[{
  "@context" : "http://schema.org",
  "@type" : "MusicEvent",
  "name" : "B.B. King",
  "startDate" : "2014-04-12T19:30",
  "location" : {
     "@type" : "Place",
     "name" : "Lupo's Heartbreak Hotel",
     "address" : "79 Washington St., Providence, RI"
  },
  "offers" : {
     "@type" : "Offer",
     "url" : "https://www.etix.com/ticket/1771656"
  }
},
{
  "@context" : "http://schema.org",
  "@type" : "MusicEvent",
  "name" : "B.B. King",
  "startDate" : "2014-04-13T20:00",
  "location" : {
     "@type" : "Place",
     "name" : "Lynn Auditorium",
     "address" : "Lynn, MA, 01901"
  },
  "offers" : {
     "@type" : "Offer",
     "url" : "http://frontgatetickets.com/venue.php?id=11766"
  }
}]

　　这种表示方法更加的直观,与html的耦合程度更低易于书写,(JSON-LD也是最近才看到的,日后补充吧)

---

附录:

• 结构化数据测试工具
• Schema.org
• microdata
• JSON-LD
• 结构化数据
• Place Action
• HTML5扩展之微数据与丰富网页摘要--张鑫旭