files/zh-cn/web/html/microdata/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171

---
title: Microdata
slug: Web/HTML/Microdata
tags:
  - 微数据 搜索 搜索引擎优化
translation_of: Web/HTML/Microdata
---
<h2 id="概要">概要</h2>

<p>微数据是<a href="https://developer.mozilla.org/en-US/docs/Glossary/WHATWG">WHATWG</a> HTML 标准的一部分，用于在网页上的现有内容中嵌套元数据。[1] 搜索引擎，网络抓取工具和浏览器可以从网页中提取和处理微数据，并使用它为用户提供更丰富的浏览体验。搜索引擎从直接访问此结构化数据中受益匪浅，因为它允许搜索引擎了解网页上的信息并向用户提供更相关的结果。微数据使用支持词汇表来描述项目和名称 - 值对，以便为其属性赋值。与使用 RDFa 和微格式的类似方法相比，微数据试图提供一种使用机器可读标签注释 HTML 元素的简单方法。</p>

<p>高级的微数据由一组 name-value 对组成。这些组称为项，每个 name-value 对都是一个属性。项目和属性由常规元素表示。</p>

<ul>
 <li>创建项目，请使用<strong>itemscope</strong>属性。</li>
 <li>向项添加属性，<strong>itemprop</strong>属性将用于其中一个项的后代。</li>
</ul>

<h2 id="词汇表">词汇表</h2>

<p>谷歌和其他主要搜索引擎支持结构化数据的<a href="schema.org">Schema.org</a>词汇表。此词汇表定义了一组标准类型名称和属性名称，例如，<a href="http://schema.org/MusicEvent">Schema.org Music Event</a>表示音乐会表演，<a href="http://schema.org/startDate">startDate</a>和<a href="http://schema.org/location">location</a> 属性用于指定音乐会的关键细节。在这种情况下，<a href="http://schema.org/MusicEvent">Schema.org Music Event</a>将是<code>itemtype</code>和<code>startDate</code>使用的 URL，而<code>location</code>将是<a href="http://schema.org/MusicEvent">Schema.org Music Event</a> 定义的<code>itemprop</code>。</p>

<div class="note">
<p><strong>注意：</strong> 有关 itemtype 属性的更多信息，请访问<a href="http://schema.org/Thing">http://schema.org/Thing</a>。</p>
</div>

<p>微数据词汇表提供了项目的语义或含义。 Web 开发人员可以设计自定义词汇表或使用 Web 上可用的词汇表，例如广泛使用的<a href="http://schema.org">schema.org</a> 词汇表。 <a href="http://schema.org">schema.org</a> 提供了一组常用的标记词汇表。</p>

<p>常用词汇：</p>

<ul>
 <li>Creative works: <a href="http://schema.org/CreativeWork">CreativeWork</a>, <a href="http://schema.org/Book">Book</a>, <a href="http://schema.org/Movie">Movie</a>, <a href="http://schema.org/MusicRecording">MusicRecording</a>, <a href="http://schema.org/Recipe">Recipe</a>, <a href="http://schema.org/TVSeries">TVSeries</a></li>
 <li>Embedded non-text objects: <a href="http://schema.org/AudioObject">AudioObject</a>, <a href="http://schema.org/ImageObject">ImageObject</a>, <a href="http://schema.org/VideoObject">VideoObject</a></li>
 <li><a href="http://schema.org/Event">Event</a></li>
 <li><a href="http://schema.org/docs/meddocs.html">Health and medical types</a>: Notes on the health and medical types under <a href="http://schema.org/MedicalEntity">MedicalEntity</a></li>
 <li><a href="http://schema.org/Organization">Organization</a></li>
 <li><a href="http://schema.org/Person">Person</a></li>
 <li><a href="http://schema.org/Place">Place</a>, <a href="http://schema.org/LocalBusiness">LocalBusiness</a>, <a href="http://schema.org/Restaurant">Restaurant</a></li>
 <li><a href="http://schema.org/Product">Product</a>, <a href="http://schema.org/Offer">Offer</a>, <a href="http://schema.org/AggregateOffer">AggregateOffer</a></li>
 <li><a href="http://schema.org/Review">Review</a>, <a href="http://schema.org/AggregateRating">AggregateRating</a></li>
 <li><a href="http://schema.org/Action">Action</a></li>
 <li><a href="http://schema.org/Thing">Thing</a></li>
 <li><a href="http://schema.org/Intangible">Intangible</a></li>
</ul>

<p>谷歌，微软和雅虎等主要搜索引擎运营商依靠<a href="http://schema.org/">schema.org</a> 词汇表来改进搜索结果。实现一般目标，临时词汇就足够了。对于其他的，可能需要设计一个词汇表。在可能的情况下，鼓励作者重用现有的词汇表，因为这样可以更轻松地重复使用内容。</p>

<h2 id="本地化">本地化</h2>

<p>在某些情况下，覆盖特定区域的搜索引擎可以提供微数据的本地特定扩展。例如，<a href="https://www.yandex.com/">Yandex</a>是俄罗斯的主要搜索引擎，支持微格式，如 hCard（公司联系信息），hRecipe（食品配方），hReview（市场评论）和 hProduct（产品数据），并提供自己的格式来定义术语和百科全书文章。这个扩展是为了解决西里尔字母和拉丁字母之间的音译问题。由于 Schema 词汇表的附加标记参数的实现，俄语网页中的信息索引变得更加成功。</p>

<h2 id="全局属性">全局属性</h2>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemid">itemid </a>– 项的唯一全局标识符。</p>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemprop">itemprop </a>– 用于向项添加属性。每个 HTML 元素都可以指定一个 itemprop 属性，其中 itemprop 由一个名称和值对组成。</p>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemref">itemref </a>– 不具有<code>itemscope</code>属性的元素的后代的属性可以使用<strong>itemref</strong>与项目相关联。 Itemref 提供了元素 id 列表（而不是<code>itemids</code>）以及文档中其他位置的其他属性。</p>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemscope">itemscope </a>– Itemscope（通常）与<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemtype">itemtype</a>一起使用，以指定块中包含的关于特定项目的 HTML。 itemscope 创建 Item 并定义与之关联的 itemtype 的范围。 itemtype 是描述项及其属性上下文的词汇表（例如<a class="external external-icon" href="http://schema.org/">schema.org</a>）的有效 URL。</p>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemtype">itemtype </a>– 指定将用于在数据结构中定义 itemprop（项属性）的词汇表的 URL。 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemscope">Itemscope</a> 用于设置数据结构中按 itemtype 设置的词汇表的有效范围。</p>

<h2 id="示例">示例</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;div itemscope itemtype="http://schema.org/SoftwareApplication"&gt;
  &lt;span itemprop="name"&gt;Angry Birds&lt;/span&gt; -

  REQUIRES &lt;span itemprop="operatingSystem"&gt;ANDROID&lt;/span&gt;&lt;br&gt;
  &lt;link itemprop="applicationCategory" href="http://schema.org/GameApplication"/&gt;

  &lt;div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"&gt;
    RATING:
    &lt;span itemprop="ratingValue"&gt;4.6&lt;/span&gt; (
    &lt;span itemprop="ratingCount"&gt;8864&lt;/span&gt; ratings )
  &lt;/div&gt;

  &lt;div itemprop="offers" itemscope itemtype="http://schema.org/Offer"&gt;
    Price: $&lt;span itemprop="price"&gt;1.00&lt;/span&gt;
    &lt;meta itemprop="priceCurrency" content="USD" /&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>

<h3 id="Structured_data">Structured data</h3>

<div class="VIpgJd-VgwJlc-bN97Pc">
<div class="ibnC6b-sM5MNb">
<div class="NbYDle">
<div class="SmKAyb-jyrRxf IQ5j-oKdM2c" style="padding-left: 0px;">
<div class="jyrRxf-eEDwDf l5asRc">
<table class="standard-table">
 <tbody>
  <tr>
   <td colspan="1" rowspan="4">itemscope</td>
   <td>itemtype</td>
   <td colspan="2" rowspan="1"><span>SoftwareApplication (</span>http://schema.org/SoftwareApplication)</td>
  </tr>
  <tr>
   <td>itemprop</td>
   <td><span>name</span></td>
   <td><span>Angry Birds</span></td>
  </tr>
  <tr>
   <td>itemprop</td>
   <td><span>operatingSystem</span></td>
   <td><span>ANDROID</span></td>
  </tr>
  <tr>
   <td>itemprop</td>
   <td><span>applicationCategory</span></td>
   <td><span>GameApplication (http://schema.org/GameApplication)</span></td>
  </tr>
  <tr>
   <td colspan="1" rowspan="3">itemscope</td>
   <td>itemprop[itemtype]</td>
   <td colspan="2" rowspan="1"><span>aggregateRating</span> [<span>AggregateRating</span>]</td>
  </tr>
  <tr>
   <td>itemprop</td>
   <td><span>ratingValue</span></td>
   <td><span>4.6</span></td>
  </tr>
  <tr>
   <td>itemprop</td>
   <td><span>ratingCount</span></td>
   <td><span>8864</span></td>
  </tr>
  <tr>
   <td colspan="1" rowspan="3">itemscope</td>
   <td>itemprop[itemtype]</td>
   <td colspan="2" rowspan="1"><span>offers</span> [<span>Offer</span>]</td>
  </tr>
  <tr>
   <td>itemprop</td>
   <td><span>price</span></td>
   <td><span>1.00</span></td>
  </tr>
  <tr>
   <td>itemprop</td>
   <td><span>priceCurrency</span></td>
   <td><span>USD</span></td>
  </tr>
 </tbody>
</table>
</div>
</div>
</div>
</div>
</div>

<h3 id="Result">Result</h3>

<p>{{ EmbedLiveSample('HTML', '', '100', '', 'Web/HTML/Microdata') }}</p>

<div class="note">
<p><strong>注意</strong>: 从 HTML 中提取微数据结构的便捷工具是 Google 的<a href="https://developers.google.com/structured-data/testing-tool/ Structured Data Testing Tool">Structured Data Testing Tool</a>。在上面显示的 HTML 上尝试一下。</p>
</div>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<p>在 Firefox 16 中支持，在 Firefox 49 中移除。</p>

<h2 id="相关链接">相关链接</h2>

<ul>
 <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes">全局属性</a></li>
</ul>

<p>{{QuickLinksWithSubpages("/en-US/docs/Web/HTML")}}</p>