itemtype必须与itemscope成对使用,标准值为"https://schema.org/Person";itemprop须在itemscope内且用Schema.org定义的属性名;itemscope宜用于块级元素;需用Google Rich Results Test等工具验证。

itemtype 属性必须搭配 itemscope 使用才有效
单独写 itemtype 没有意义,浏览器不会识别。它必须和 itemscope 成对出现,用来声明当前元素是一个结构化数据实体,并指定其类型。描述人物信息时,标准值是 "https://schema.org/Person" —— 这是 Schema.org 官方定义的类型,搜索引擎(如 Google)能据此提取姓名、职业、联系方式等。
常见错误是只加 itemtype 忘了 itemscope,结果整个微数据块被忽略;另一个坑是用了错的 URL,比如漏掉 https:// 或拼错 schema.org,导致解析失败。
<div itemscope itemtype="https://schema.org/Person"> ✅ 正确起点 <li><code><div itemtype="https://schema.org/Person"> ❌ 无 <code>itemscope,无效<div itemscope itemtype="http://schema.org/Person"> ❌ 应用 <code>https://用 itemprop 标注具体字段,不是所有 HTML 属性都可用
itemprop是实际标记字段内容的属性,必须放在有itemscope的祖先元素内部。它只能取 Schema.org 对Person类型明确定义的属性名,比如name、jobTitle、telephone、email,不能自创(如itemprop="nickname"不会被识别)。注意:有些字段需要嵌套结构,例如地址(
address)本身是PostalAddress类型,就得再开一个itemscope itemtype="https://schema.org/PostalAddress"块。立即学习“前端免费学习笔记(深入)”;
-
<span itemprop="name">张三</span>✅ 标准字段 -
<span itemprop="birthDate">1990-05-12</span>✅ 支持的日期字段 -
<span itemprop="homepage"><a href="https://zhangsan.dev">个人主页</a></span>✅ 链接类字段需包裹<a></a> -
<span itemprop="nick">小三</span>❌nick不是 Person 的合法属性
避免在 inline 元素上直接写 itemscope,影响语义和样式
itemscope最好作用于<div>、<code><section></section>、<article></article>等块级容器,而不是<span></span>或<em></em>。否则容易破坏原有布局(比如意外触发 BFC)、干扰 CSS 选择器,还可能让辅助技术误读结构。更隐蔽的问题是:如果把
itemscope加在链接或按钮里,而该元素本身有交互行为(如 JS 绑定 click),微数据解析器可能因 DOM 遍历顺序出问题,导致部分itemprop丢失。- ✅ 推荐:
<div itemscope itemtype="https://schema.org/Person"> <h2 itemprop="name">李四</h2> <p itemprop="jobTitle">前端工程师</p> </div> - ❌ 避免:
<span itemscope itemtype="https://schema.org/Person"><span itemprop="name">李四</span></span>
验证是否生效,别只靠肉眼检查 HTML
写完后必须用工具验证,因为即使 HTML 合法,微数据也可能因嵌套错误、属性名拼写、URL 协议不一致等问题无法被提取。Google 的 Rich Results Test 是最直接的方式,粘贴 URL 或 HTML 片段就能看到解析出的结构化数据树。
另一个易忽略点:本地文件(
file://协议)无法被在线验证工具抓取,必须起一个本地服务(如 Python 的python3 -m http.server)或部署到测试环境再测。- Chrome DevTools 的
Application > Rendering > Show resource hints不显示微数据,别指望它 - Schema.org 的 官方验证器 也支持上传 HTML 文件,适合离线核对
- 如果
telephone显示为空,先检查是否用了tel:协议前缀(如<a href="tel:+8613800138000">+86 138 0013 8000</a>),否则可能被忽略
itemtype和嵌套层级稍有偏差,整个 Person 实体就可能被搜索引擎跳过——这比样式错位更难调试,因为没有控制台报错。-



















