HTML微数据（microdata）是一套用于在HTML文档中嵌入机器可读数据的规范，它可以帮助搜索引擎、浏览器等工具更好地理解页面内容的含义，提升网页的语义化表现。通过微数据，我们可以给普通的HTML元素添加额外的语义属性，让页面内容的结构更清晰。
HTML microdata核心属性
微数据的使用主要依赖以下几个核心属性，这些属性可以直接添加到常规的HTML标签上：
- itemscope：用于声明一个微数据项的作用范围，添加该属性的元素内部的所有相关属性都属于这个微数据项。
- itemtype：配合itemscope使用，用于指定微数据项的类型，通常取值为Schema.org定义的标准类型URL，比如人物、事件、产品等类型。
- itemprop：用于指定微数据项的属性名，添加到具体的内容元素上，表示该元素的内容是微数据项的某个属性值。
- itemid：可选属性，用于给微数据项指定一个全局唯一的标识符。
基础插入示例
下面以标记一个人物信息为例，展示最基础的微数据插入方式：
<div itemscope itemtype="https://schema.org/Person"> <p>姓名：<span itemprop="name">张三</span></p> <p>职业：<span itemprop="jobTitle">前端开发工程师</span></p> <p>邮箱：<a href="mailto:zhangsan@ipipp.com" itemprop="email">zhangsan@ipipp.com</a></p> </div>
在这个示例中，外层div通过itemscope声明了一个微数据项，itemtype指定了类型为Schema.org的Person类型。内部的span和a标签通过itemprop分别标记了name、jobTitle、email属性，这样搜索引擎就能明确识别出这些内容对应的人物属性信息。
嵌套微数据项的使用
当一个微数据项包含另一个独立的微数据项时，可以使用嵌套的方式插入。比如一个活动信息中包含举办地点，地点本身也是一个独立的微数据项：
<div itemscope itemtype="https://schema.org/Event">
<h3 itemprop="name">前端技术分享会</h3>
<p>时间：<time itemprop="startDate" datetime="2024-10-20T14:00">2024年10月20日 14:00</time></p>
<div itemprop="location" itemscope itemtype="https://schema.org/Place">
<p>地点：<span itemprop="name">XX会议中心</span></p>
<div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
<p>地址：<span itemprop="streetAddress">XX路123号</span></p>
</div>
</div>
</div>
这里Event类型的微数据项包含location属性，而location本身又是一个Place类型的微数据项，Place项又包含address属性，address是PostalAddress类型的微数据项，通过嵌套可以完整描述复杂的结构化信息。
常用微数据类型参考
Schema.org提供了非常多的标准微数据类型，开发者可以根据页面内容选择合适的类型，以下是部分常用类型：
| 类型名称 | 适用场景 | 常用属性 |
|---|---|---|
| Person | 人物信息 | name, jobTitle, email, telephone |
| Product | 产品信息 | name, description, price, brand |
| Article | 文章内容 | headline, author, datePublished, articleBody |
| Event | 活动信息 | name, startDate, location, description |
注意事项
在使用HTML微数据时，需要注意以下几点：
- itemtype的属性值需要使用标准的Schema.org类型URL，不要随意自定义不符合规范的URL。
- itemprop的属性值需要和所选itemtype类型支持的属性匹配，避免添加类型不支持的属性。
- 微数据只是给机器提供结构化信息的补充方式，不会影响页面的正常显示效果。
- 可以通过Google的结构化数据测试工具验证页面微数据的正确性，确保语义信息被正确解析。
完整产品示例
最后给出一个产品页面的微数据完整示例，帮助理解实际应用场景：
<div itemscope itemtype="https://schema.org/Product">
<h2 itemprop="name">无线蓝牙耳机</h2>
<img itemprop="image" src="headphone.jpg" alt="无线蓝牙耳机" />
<p itemprop="description">这款无线蓝牙耳机支持主动降噪，续航时间长达30小时，佩戴舒适。</p>
<p>价格：<span itemprop="price" content="299.00">299元</span></p>
<div itemprop="brand" itemscope itemtype="https://schema.org/Brand">
<p>品牌：<span itemprop="name">声科</span></p>
</div>
<p>库存状态：<link itemprop="availability" href="https://schema.org/InStock" />有货</p>
</div>
这个示例完整标记了产品的名称、图片、描述、价格、品牌、库存状态等信息，搜索引擎可以精准提取这些结构化数据，在搜索结果中可能会展示更丰富的摘要信息。
HTML_microdata微数据语义化Schema_org修改时间：2026-07-05 10:54:27