结构化微数据语言简介1、词汇表2、itemid、itemscope、itemtype等属性简介2.1、和id属性完全不同的itemid属性2.2、快速了解itemscope属性2.3、快速了解itemtype属性2.4、快速了解itemprop属性2.5、有别于href的itemhref属性2.5.1、itemhref属性的作用2.5.2、一句话总结众所周知语义化的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帮助很大但是据我所知国内的软硬件产品并未遵循这套语言规范导致最终的收益率并没有预想的那样高或许这就是国内目前对微数据结构的关注并不多的原因吧。因此对于是否在实际项目中使用微数据结构我持中立态度不推荐也不反对看个人追求和产品的受众群体吧。 HTML——结构化微数据语言简介
结构化微数据语言简介1、词汇表2、itemid、itemscope、itemtype等属性简介2.1、和id属性完全不同的itemid属性2.2、快速了解itemscope属性2.3、快速了解itemtype属性2.4、快速了解itemprop属性2.5、有别于href的itemhref属性2.5.1、itemhref属性的作用2.5.2、一句话总结众所周知语义化的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帮助很大但是据我所知国内的软硬件产品并未遵循这套语言规范导致最终的收益率并没有预想的那样高或许这就是国内目前对微数据结构的关注并不多的原因吧。因此对于是否在实际项目中使用微数据结构我持中立态度不推荐也不反对看个人追求和产品的受众群体吧。