所有分类
  • 所有分类
  • 游戏源码
  • 网站源码
  • 单机游戏
  • 游戏素材
  • 搭建教程
  • 精品工具

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

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

文章目录CloseOpen

很多人对它们的理解停留在“听说过”,却不知道: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恤

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

    <!-

  • 品牌是嵌套的“圈”,因为品牌本身也是一个事物 >
  • XX服饰

    ¥99

    4.8120条评价)

    我帮卖运动鞋的客户调过这个模板,之前他没标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%——这些属性标对了,用户就能直接在搜索结果里看到关键信息,更容易来找你。

    原文链接:https://www.mayiym.com/50399.html,转载请注明出处。
    0
    显示验证码
    没有账号?注册  忘记密码?

    社交账号快速登录

    微信扫一扫关注
    如已关注,请回复“登录”二字获取验证码