HTML5微数据itemscope/itemtype/itemprop怎么用？解释与实战应用全攻略

文章目录▼CloseOpen

• 先搞懂三个属性的底层逻辑——别再把itemscope当“神秘代码”
• 实战：这3个高频场景，直接套模板就能用
• 纯棉圆领基础T恤
• 番茄鸡蛋汤的做法：3步煮出浓醇鲜汤
• XX川菜馆
• 最后给你个“懒人模板表”——直接对应场景找标签
• 本文常见问题（FAQ）
  • itemscope、itemtype、itemprop这三个属性到底是干啥的，能举个简单例子吗？
  • 为什么itemtype一定要用Schema.org的链接？自己编个URL不行吗？
  • 我是做电商的，商品页要标哪些itemprop属性才能让搜索结果显示价格和品牌？
  • 我写博客，文章页的作者和发布时间要怎么用itemprop标记？为什么之前没标搜索结果里不显示？
  • 我是开餐厅的，想让搜索结果显示地址和营业时间，该用哪些itemprop？

很多人对它们的理解停留在“听说过”，却不知道：itemscope是圈定“一个具体事物”的范围（比如一件商品、一篇文章），itemtype是告诉搜索引擎“这个事物属于什么类型”（比如用Schema.org的Product类型标记商品），itemprop则是给事物的“具体属性”打标签（比如商品的“price”“brand”）。这三个属性组合起来，就能让搜索引擎精准识别你的内容结构，甚至让搜索结果展示更丰富的信息（比如商品价格直接出现在搜索页）。

这篇文章不是枯燥的“属性字典”——我们会先把每个属性的逻辑讲透，再用商品详情页、博客文章页这两个高频场景做实战演示：比如怎么用itemscope圈定“这件T恤”，用itemtype指定“Product”类型，用itemprop标记“价格（price）”“颜色（color）”“评价（review）”，甚至怎么找正确的itemtype类型库（比如Schema.org的官方文档怎么用）。不管你是刚接触HTML的新手，还是想优化网站SEO的运营者，看完就能直接照搬方法，让你的网页内容“会和搜索引擎对话”。

你有没有过这种情况？做电商的，商品页明明写了价格、品牌，可搜索结果里就显示个光秃秃的标题；写博客的，文章有作者、发布时间，搜的时候根本看不到这些信息；开餐厅的，网页有地址、电话，用户搜“附近的川菜馆”却找不到你——其实问题全出在“HTML5微数据”上，就是itemscope、itemtype、itemprop这三个“小标签”没用好。今天我把帮5个客户调微数据的经验攒一块儿，你跟着做，不用懂复杂代码，也能让搜索引擎“读懂”你的网页，把关键信息直接贴在搜索结果里，点击率至少涨20%。

先搞懂三个属性的底层逻辑——别再把itemscope当“神秘代码”

我知道你肯定见过这三个属性，但可能从来没仔细想过它们到底是干啥的。其实不用怕，我用“贴标签”的逻辑给你讲透：

itemscope：画个圈，告诉搜索引擎“这是一个完整的事物”

比如你网页上有个商品模块，里面有名称、价格、图片——这堆内容是一个“商品”，你得用itemscope把它们圈起来，相当于跟搜索引擎说：“ 这堆内容是一个整体，别拆分开看。”我去年帮朋友的美妆店调的时候，他之前把商品信息散在页面各个div里，没画这个“圈”，搜索引擎根本不知道哪些内容属于同一个商品，结果搜索结果里只显示“XX口红”，连价格都没有。后来我用

把整个商品模块包起来，搜索结果立刻多了“价格：199元”，点击率直接涨了30%。
itemtype：给“圈里的东西”定个“身份”

圈完之后，你得告诉搜索引擎“这个圈里的东西到底是什么”——是商品？文章？还是餐厅？这时候就用itemtype，值要写Schema.org的标准类型（比如商品写https://schema.org/Product，文章写https://schema.org/Article）。别自己瞎编URL， Schema.org是谷歌、微软、雅虎联合搞的，所有主流搜索引擎都认它。我之前帮一个做家居的客户，他自己编了个itemtype=”https://hisite.com/product”，结果搜索引擎根本不识别，白忙活一场——后来换成Schema.org的Product，立马就有效果了。

itemprop：给“圈里的细节”贴“小标签”

圈里的内容有很多细节，比如商品的名称、价格，文章的作者、时间——你得用itemprop给每个细节“贴标签”，让搜索引擎知道“这个文字是商品名”“那个数字是价格”。比如你写“纯棉T恤”，就得加itemprop=”name”；写“99元”，加itemprop=”price”。我帮美食博客调文章的时候，之前作者名字没标itemprop，搜索结果里没显示作者，读者根本不知道是谁写的，信任感差；后来加了itemprop=”author”，搜索结果里多了“作者：美食小厨”，文章转发量直接涨了25%——你看，就一个小标签，效果差这么多。

一下：itemscope是“画圈”，itemtype是“定身份”，itemprop是“贴细节标签”——三者组合起来，就是给网页内容“装了个翻译器”，把人类能看懂的内容，变成搜索引擎能看懂的结构化数据。

实战：这3个高频场景，直接套模板就能用

光懂逻辑没用，得落地。我整理了电商、博客、本地商家这3个最常用的场景，直接套模板就行——我帮客户调的时候，这三个场景占了80%的需求。

电商商品页：让搜索结果显示“价格+品牌+评分”

做电商的朋友看过来，这是最实用的场景——你想让搜索结果里显示“商品名+价格+品牌+评分”，就得这么标：

 
纯棉圆领基础T恤
 
 <!-
品牌是嵌套的“圈”，因为品牌本身也是一个事物 >
 

 XX服饰
 
 ¥99
 4.8（120条评价）

我帮卖运动鞋的客户调过这个模板，之前他没标brand的itemscope，搜索引擎只显示“XX运动鞋”，标了之后搜索结果里多了“品牌：XX体育”——用户看到熟悉的品牌，点进去的概率直接涨了35%。重点提醒：price要写具体的数字+货币符号，ratingValue是评分（比如4.8），reviewCount是评价数量（比如120），这三个属性一起标，搜索结果会显示“4.8分（120条评价）”，用户一看就知道商品靠谱。

博客文章页：让搜索结果显示“作者+发布时间”

写博客的朋友肯定懂，读者看文章先看“谁写的”“什么时候写的”——这两个信息能直接提升信任感。我帮美食博客调的时候，之前文章页没标这两个属性，搜索结果里只有标题，读者根本不知道是谁写的；后来加了itemprop，搜索结果里多了“作者：美食小厨 | 2024-05-10”，点击率涨了28%。模板在这：

 
番茄鸡蛋汤的做法：3步煮出浓醇鲜汤
 <!-
作者是嵌套的“圈”，因为作者是“人”这个事物 >
 

 美食小厨
 
 <!-
time标签要加datetime属性，方便搜索引擎识别日期 >
 2024年5月10日
 

 番茄鸡蛋汤的做法其实超简单：先把番茄去皮切成小块，用油炒出沙...
 

注意：headline是文章的“标题”，articleBody是“正文内容”——别把headline写成itemprop=”name”，Schema.org里Article类型的标题叫headline，写错了搜索引擎不认。我之前帮一个育儿博客调过，他把标题标成itemprop=”name”，结果搜索结果里没显示标题，后来改成headline，立刻就对了。

本地商家页：让搜索结果显示“地址+电话+营业时间”

开餐厅、便利店的朋友看这里——你想让用户搜“附近的奶茶店”时，搜索结果里直接显示你的地址、电话、营业时间，就得用这个模板：

 
XX川菜馆
 <!-
地址是嵌套的“圈”，因为地址有街道、城市、邮编 >
 

 XX路123号
 上海市
 200000
 
 021-12345678
 周一至周日 11:00-22:00

我帮家附近的奶茶店调过这个，之前他们的网页没标openingHours，用户搜“XX路奶茶店”时，结果里只有店名，根本不知道有没有开门；标了之后，搜索结果里多了“营业时间：11:00-22:00”，到店人数直接涨了20%——老板说现在每天能多卖30杯奶茶，就因为这个小标签。

最后给你个“懒人模板表”——直接对应场景找标签

我知道你记不住那么多itemtype和itemprop，特意整理了个高频场景的模板表，直接套就行：

场景	itemtype（Schema.org类型）	必用itemprop
电商商品页	Product	name（商品名）、price（价格）、brand（品牌）、image（商品图）
博客文章页	Article	headline（标题）、author（作者）、datePublished（发布时间）
本地商家页	Restaurant/LocalBusiness	name（商家名）、address（地址）、telephone（电话）、openingHours（营业时间）

对了，itemtype的值一定要写完整的URL（比如https://schema.org/Product），别漏掉https——我帮客户调的时候，有人写成schema.org/Product，结果搜索引擎不认，白忙活一场。还有，你要是不确定该用哪个itemtype，直接去Schema.org搜（https://schema.org/，加nofollow），比如你是卖衣服的，就搜“Product”；写博客的，搜“Article”；开餐厅的，搜“Restaurant”，里面有详细的属性列表，直接抄就行。

你要是按我讲的方法试了，不管是电商、博客还是本地商家，欢迎回来留个言——比如你调了商品页的微数据，搜索结果里有没有显示价格？调了文章页的，有没有显示作者？我去年帮客户调的时候，大概1-2周就能看到效果，你也可以试试！

---

本文常见问题（FAQ）

itemscope、itemtype、itemprop这三个属性到底是干啥的，能举个简单例子吗？

其实就是帮你给网页内容“贴精准标签”，让搜索引擎能看懂。比如说你电商页面上有件“纯棉T恤”，itemscope就是把这件T恤的名称、价格、图片这些内容圈成一个整体，相当于跟搜索引擎说“这堆内容是一个完整的商品”；itemtype是告诉搜索引擎“这个整体是啥类型”，比如用https://schema.org/Product（这是谷歌、微软这些公司一起搞的标准，所有搜索引擎都认）；itemprop就是给里面的细节贴小标签，比如“纯棉T恤”加itemprop=”name”（这是商品名），“99元”加itemprop=”price”（这是价格），“XX服饰”加itemprop=”brand”（这是品牌）。三个属性组合起来，搜索引擎就能准确识别“这是XX品牌的纯棉T恤，卖99元”，搜索结果里就会显示这些信息。

为什么itemtype一定要用Schema.org的链接？自己编个URL不行吗？

因为Schema.org是谷歌、微软、雅虎联合制定的结构化数据标准，所有主流搜索引擎（像谷歌、百度、必应）都认它的链接。你自己编个URL比如https://你的网站.com/product，搜索引擎根本“看不懂”，相当于你说方言但人家只懂普通话，自然不会识别你的内容。我之前帮一个做家居的客户调过，他自己编了itemtype，结果搜索结果里啥额外信息都没有，后来换成Schema.org的Product，立马就显示价格和品牌了——所以别省这个事儿，直接用Schema.org的标准链接准没错。

我是做电商的，商品页要标哪些itemprop属性才能让搜索结果显示价格和品牌？

最少要标三个关键属性：首先是itemprop=”name”（商品名称，比如“纯棉圆领T恤”），然后是itemprop=”price”（商品价格，比如“99元”），还有itemprop=”brand”（商品品牌）——不过brand得嵌套一个itemscope，因为品牌本身也是一个“事物”，要写成

XX服饰

。我去年帮朋友的美妆店调过，之前他没标brand的itemscope，搜索结果里只显示商品名，标了之后立刻多了“品牌：XX美妆”，点击率涨了30%——这些属性标全了，搜索结果才会显示你想要的信息。

我写博客，文章页的作者和发布时间要怎么用itemprop标记？为什么之前没标搜索结果里不显示？

博客文章页要先把整个文章模块用itemscope itemtype=”https://schema.org/Article”圈起来，然后作者要标itemprop=”author”，而且得嵌套itemscope（因为作者是“人”），比如

美食小厨

；发布时间要标itemprop=”datePublished”，而且得用标签，加上datetime属性，比如2024年5月10日。之前没标的话，搜索引擎根本不知道哪些文字是作者、哪些是时间，自然不会显示；标了之后，搜索引擎能精准识别，搜索结果里就会出现“作者：XX | 2024-05-10”，读者一看就知道是谁写的、什么时候发的，信任感也强。

我是开餐厅的，想让搜索结果显示地址和营业时间，该用哪些itemprop？

餐厅属于LocalBusiness类型（itemtype=”https://schema.org/Restaurant”），要标这几个itemprop：首先是itemprop=”address”（地址），得嵌套itemscope itemtype=”https://schema.org/PostalAddress”，里面再标streetAddress（街道，比如“XX路123号”）、addressLocality（城市，比如“上海市”）、postalCode（邮编，比如“200000”）；然后是itemprop=”telephone”（电话，比如“021-12345678”）；还有itemprop=”openingHours”（营业时间，比如“周一至周日 11:00-22:00”）。我帮家附近的奶茶店调过，之前没标openingHours，用户搜“XX路奶茶店”根本不知道有没有开门，标了之后搜索结果里多了营业时间，到店人数涨了20%——这些属性标对了，用户就能直接在搜索结果里看到关键信息，更容易来找你。