HTML——结构化微数据语言简介

结构化微数据语言简介

众所周知,语义化的HTML标签对SEO很有帮助,可以让搜索引擎识别内容的性质。可很多时候,只知道内容的性质还不够,最好可以让搜索引擎识别具体的数据结构。比如搜索某个人物,一目了然的搜索结果应该是姓名、职位、联系方式等信息一行一行地展示。可落地到真实的产品中,人物的描述往往是一个<p>元素和一段完整的文字描述,以目前搜索引擎的智能化程度还无法准确提取数据结构,这就是仅有HTML标签语义的局限所在。而本章要介绍的微数据(MicroData)就是为了弥补此局限而设计的,通过使用规定的标签、属性名及特定用法,可以让搜索引擎更好地理解与抓取内容,从而显示出更加可读的摘要信息。

举个例子,下面是常见的人物描述HTML片段代码:

此时,搜索引擎所呈现的搜索结果应该就是这段文字描述,很普通,但如果使用针对人物的微数据进行标记,就像下面这样:

此时,搜索引擎或其他机器设备就能准确识别上面这段描述所包含的数据结构,就像下图所示的这样。

于是,搜索引擎就能显示更加合理的排版,输出更加精准的搜索结果,例如在谷歌中搜索我的名字,会发现其中有一个头像精准的搜索结果,如图所示。

之所以如此精准,就是因为使用了微数据。相关的HTML代码截图如图所示,使用了隐藏的<meta>元素标记。

数据结构清晰,自然用户点击的可能性更大,这些都是免费的流量。要知道,网站拉新的成本很高,如果因为HTML的一点改动,就能让网站来自搜索引擎的用户数增加,那么收益是很可观的。我刚入行时有非常多餐饮类的网站,结果大众点评脱颖而出,其中很重要的一个原因就是其SEO做得好,搜索的餐厅都会有点评的结果,而且会有评论数、评分等直观的信息。例如,下图是十多年前我学习微数据语言时的截图,相比竞争对手的网站,用户肯定会点击这个有星星评分的搜索结果。

搜索结果之所以呈现得这么吸引人,就是因为使用了微数据,源码截图参见下图。

通过上面两个鲜活的案例,相信大家应该可以体会到微数据对SEO的重要性了。如果当前网页有针对特别类型信息的重要描述,例如评论、人物信息、地点或事件等,那么一定要使用微数据来扩展数据结构,这样做只有好处,没有坏处。

那么,该如何使用微数据呢?很简单,首先了解微数据词汇表,其次用几个HTML属性标记一下。

1、词汇表

使用微数据,一定要提前打开schema.org网站。

它看似网站,实际上可以认为它是一个开源协作的社区组织,社区成员包括谷歌、微软、雅虎、Yandex等搜索引擎公司,致力于在互联网、网页、电子邮件等平台上创建、维护和推广结构化数据的模式。

其实,当年词汇表网站不止schema.org一个,data-vocabulary.org、microformats.org都在做同样的事情,功能类似,属性名细节有些许差异。后来,不知道是什么原因,就schema.org一家独大了。目前,schema.org网站所共享的词汇表已经成为某种事实标准,有超过1000万个的网站在使用schema.org定义的微数据结构来开发网页、发送邮件等。大家如果有兴趣,也可以前往对应的Github项目参与共享,目前已经发布了24个版本。

词汇表的使用

首先需要确认需要使用微数据的描述对象的类型,例如是人物还是产品,是电影还是餐厅,基本上,Web中常见的描述对象都有对应的词汇表。例如,人物的词汇名是Person,那么其对应的词汇表就可以通过访问https://schema.org/Person获取,同时,这个访问地址也需要通过itemtype属性设置,让搜索引擎知道,你使用的是哪个词汇表,例如:

至于里面需要标记的数据内容,就要查找词汇表中对应的属性名称,然后使用已有的HTML元素进行itemprop属性设置,或者干脆直接使用<meta>元素。我个人推荐使用前者,利用已有的HTML结构标记微数据,会让代码更加干净,SEO信息也不会重复,至于itemprop属性的使用,在下一节会有详细说明。

下面看一下常用的词汇表,重点关注冒号前面的关键字名称。

  • Thing:表示任何事物,是所有词汇表的父类,也是最常用的词汇表。
  • Person:表示一个人,包括姓名、性别、出生日期、死亡日期等。
  • Organization:表示一个组织,包括名称、地址、电话、传真、邮箱等。
  • Place:表示一个地点,包括名称、地址、电话、传真、邮箱等。
  • Event:表示一个事件,包括名称、开始时间、结束时间、地点等。
  • Product:表示一个产品,包括名称、价格、库存、图片等。
  • Review:表示一个评论,包括作者、评分、评论内容等。
  • Recipe:表示一个菜谱,包括名称、作者、图片、食材、步骤等。
  • Video:表示一个视频,包括名称、作者、播放时长、发布日期等。
  • Audio:表示一个音频,包括名称、作者、播放时长、发布日期等。
  • Image:表示一张图片,包括名称、作者、拍摄日期、拍摄地点等。
  • Book:表示一本书,包括名称、作者、出版社、出版日期等。
  • Movie:表示一部电影,包括名称、导演、演员、上映日期等。
  • Music:表示一首歌曲,包括名称、作者、演唱者、发布日期等。
  • SoftwareApplication:表示一个软件,包括名称、作者、版本、发布日期等。
  • Game:表示一个游戏,包括名称、作者、版本、发布日期等。
  • Question:表示一个问题,包括名称、作者、发布日期等。
  • Answer:表示一个答案,包括名称、作者、发布日期等。
  • Comment:表示一个评论,包括名称、作者、发布日期等。
  • BlogPosting:表示一篇博客文章,包括名称、作者、发布日期等。
  • WebPage:表示一个网页,包括名称、作者、发布日期等。
  • WebSite:表示一个网站,包括名称、作者、发布日期等。
  • ProfilePage:表示一个个人主页,包括名称、作者、发布日期等。
  • CollectionPage:表示一个集合页面,包括名称、作者、发布日期等。
  • SearchResultsPage:表示一个搜索结果页面,包括名称、作者、发布日期等。
  • QAPage:表示一个问答页面,包括名称、作者、发布日期等。
  • FAQPage:表示一个常见问题页面,包括名称、作者、发布日期等。
  • ItemPage:表示一个商品页面,包括名称、作者、发布日期等。

还有更多的词汇表,大家可以去schema.org网站自行搜索,不过,在我看来,上面这些类型已经足够了,若你实在不知道自己要描述的数据类型,直接使用Thing就可以了,因为任何事物都属于"东西"​,这个词准错不了。

理解了词汇表这个基本概念,下面轮到主角出场了---专门用来实现微数据结构的itemid、itemscope、itemhref、itemtype、itemprop 5个以item开头的HTML属性。

2、itemid、itemscope、itemtype等属性简介

与微数据结构相关的HTML属性有5个,均是以item开头的。

2.1、和id属性完全不同的itemid属性

在微数据结构中,itemid属性不是必需的,也就是说,就算不设置,也不会影响微数据结构的识别,通常无须设置,只有当同一个页面有多个模块使用同一个数据源的时候才需要指定。例如,某员工信息页面,页面侧边框展示的是用户的个人信息,页面主区域是员工信息列表模块,由于用户自己也是员工,因此很自然就会出现在此列表中,于是,一个页面会出现两个相同的个人信息展示,此时,就可以通过设置相同的itemid值,让系统知道这里其实是同一个人员的信息,使获取的数据结构更加精准。

从这个例子可以看出,itemid属性的作用和id属性的完全不同,前者的性质更类似于同类识别,而后者是唯一标识符区分,但是,如果你查看itemid属性的规范文档,会看到这么一句:

The itemid attribute,if specified,must have a value thatis a valid URL potentially surrounded by spaces.

它的意思是,itemid属性值只能是合法的URL地址,然而,实际上,无论是浏览器、搜索引擎,还是schema官方提供的微数据验证器,都没有遵循这条规范,你使用普通的字符串作为itemid属性值也会被认为是合法的,例如,有如下所示的HTML代码:

将代码粘贴到schema官方提供的微数据验证器中进行验证,可以看到验证成功,同时,仅会输出2项人员信息数据,虽然有三段HTML代码应用了Person词汇表,如图所示。

另外,itemid属性必须与itemscope属性和itemtype属性同时使用才是合法的。

2.2、快速了解itemscope属性

itemscope属性用在微数据结构的最外层,相当于告诉搜索引擎,从我开始会有一段独立的微数据结构,所以这个属性是布尔属性,只需要关心属性设置与否,无须关心具体的属性值,例如:

另外,itemscope属性必须和itemtype属性或者itemhref属性同时设置才合法。

2.3、快速了解itemtype属性

itemtype属性用来指定微数据结构的词汇表,例如,上面的例子中就使用了Person词汇表,这个属性的值可以是任何一个词汇表。下面的例子中使用了Product词汇表,表示一个产品:

另外,itemtype属性必须和itemscope属性同时设置才合法。

2.4、快速了解itemprop属性

itemprop属性用来指定微数据结构的某个属性,不同的词汇表使用的值是不一样的,要想知道当前的词汇表支持哪些itemprop属性值,可以去对应的词汇表页面查找。例如,人物的词汇表是https://schema.org/Person,访问该页面,可以看到下表所示的表格,其中左侧第一列就是支持的属性值。

由于人也属于物体,因此Person词汇表支持的部分属性名称是继承于Thing词汇表的。例如,name(姓名)​、image(图像)​、description(描述)等,具体不展开介绍,大家也无须记忆,在用到的时候去对应的词汇表寻找,或者参考使用案例修改一下即可。

2.5、有别于href的itemhref属性

众所周知,我们日常看到的href属性值都以URL地址为主,但是itemhref属性却不同,其属性值是其他元素的id值,且支持多个值,以空格分隔,例如:

2.5.1、itemhref属性的作用

通常的微数据结构为嵌套结构,也就是说,itemscope属性所在的元素是整个数据结构的最外层,但是,实际的Web应用场景千千万,总会因为布局等方面的因素导致我们的HTML数据结构无法嵌套使用,只能采用相邻结构。此时,就可以使用itemhref属性让非嵌套的HTML元素依然有符合要求的微数据结构,正如上面案例所示的那样。

和itemtype属性一样,itemhref属性必须和itemscope属性一起使用才合法,并且itemhref属性并非微数据结构模型的一部分,更像是一种语法结构,用于帮助作者向不方便添加注释的树结构添加注释。

总的来说,在微数据结构的5个HTML属性中,itemid和itemhref两个属性不常用,itemscope属性的使用方式固定,最需要关注的其实就是itemtype属性和itemprop属性。

也就是说,微数据开发的主要工作就是,查找官方词汇表(设置itemtype属性)​,并在现有的HTML结构基础上设置属性值(itemprop属性值)​,使网站的SEO能力及其他辅助设备的识别能力得到增强。

2.5.2、一句话总结

微数据虽然对SEO帮助很大,但是,据我所知,国内的软硬件产品并未遵循这套语言规范,导致最终的收益率并没有预想的那样高,或许这就是国内目前对微数据结构的关注并不多的原因吧。因此,对于是否在实际项目中使用微数据结构,我持中立态度,不推荐也不反对,看个人追求和产品的受众群体吧。

相关推荐
TeamDev1 小时前
JxBrowser 9.5.2 版本发布啦!
java·前端·windows·chromium·混合应用·jxbrowser·浏览器控件
鬼手点金1 小时前
Claude Code示范案例-进阶学习路径
java·服务器·前端·学习·计算机视觉·前向传播
吴声子夜歌1 小时前
HTML——Web Components开发
前端·html
\光辉岁月/1 小时前
7.mybatisplus学习-条件构造器、插件、通用枚举、多数据源环境、MybatisX
数据库·oracle
承渊政道2 小时前
云电脑连接异地MySQL:星空组网配置、端口验证与登录排障
数据库·mysql·电脑·星空组网
yexianglunbai2 小时前
Redis 缓存详解:从原理到实战
数据库·redis·缓存
微信开发api2 小时前
基于WTAPI构建社群运营平台:自动拉群与会话承接链路设计
java·大数据·网络·数据库·微信·自动化
天空'之城2 小时前
单片机基础核心知识点汇总(四十六)
数据库·单片机·mongodb