项目网站建设业务分析,微信公众号平台开发文档,在网站上做远程教育系统多少钱,产品外观设计流程文章目录 数据标记协议是什么数据标记协议的作用常见的数据标记协议Open Graph protocol 开放图谱协议基本元数据协议可选元数据结构化属性 —— 元数据的属性多个相同的元数据标签类型元数据的使用方法全局类型使用自定义类型使用对象类型使用歌曲对象类型视频对象类型文章对象… 文章目录 数据标记协议是什么数据标记协议的作用常见的数据标记协议Open Graph protocol 开放图谱协议基本元数据协议可选元数据结构化属性 —— 元数据的属性多个相同的元数据标签类型元数据的使用方法全局类型使用自定义类型使用对象类型使用歌曲对象类型视频对象类型文章对象类型书籍对象类型profile对象类型 社交媒体抓取页面信息的原理 Twitter CardsMicroformatsMicroformats的作用Microformats 的使用class使用rel使用 RDFaRDFa是什么RDFa的使用方式链接使用vocab使用resource使用联系方式的标识Friend-of-a-Friend词汇表语句复制使用多个词汇表默认声明content使用数据类型datatype设置上下文替代方案about属性替代方案ref JSON-LDJSON-LD是什么JSON-LD的一些基本概念contentidtype其他的语法标记 JSON-LD的格式Expanded 格式Compacted 格式Flattened格式Framed格式 在HTML中嵌入JSON-LDHTML基层基本IRIscript标签JSON-LD的限制 Schema词汇表Schema的作用使用方式MicrodataRDFaJSON-LD格式 Schema常用的标记类型Schema的一些特殊处理日期时间处理link标签的使用元标签的使用 数据标记协议是什么
数据标记协议是一种约定用于改进和优化网页上数据的表示方式也被称为结构化数据标记。 他通常在html中添加特定的属性和语法可以帮助搜索引擎、社交媒体平台通过这些指定的属性可以更好地理解网页内容。
数据标记协议的作用 提高搜索可见性 数据标记可以帮助搜索引擎更好地理解页面内容让搜索引擎知道网站特定的内容。正确地使用数据标记可以提高网站的可见性。 提升内容在社交媒体上的表现 使用数据标记协议可以在特定社交平台上展示特定的效果。 如钉钉 提共丰富的搜索结果 使用结构化数据标记可以是你的网站在搜索结果中展示更丰富的信息如评星、价格、图片、描述信息等。这被称为富结果可以大大提高点击率。 浏览器
常见的数据标记协议
Open Graph protocol 开放图谱协议
主要用于社交媒体特别是Facebook分享链接时的优化展示。它可以指定网页在社交媒体上被分享时显示的标题、描述、图片等。 在开放图谱协议允许任何网页成为社交图的丰富的对象。
基本元数据协议
基本元数据使用meta标签定义要将网页变成图形对象需要向网页中添加如下基本数据
og:title对象的标题对应分享时链接中显示的标题。og:type对象的类型例如“ video.movie”。根据指定的类型可能还需要其他属性。og:image 对象的图片对应分享时链接中显示的图像。og:url 对象的地址一般是网站的地址。
eg:
meta propertyog:title contentThe Rock /
meta propertyog:type contentvideo.movie /
meta propertyog:url contenthttp://www.imdb.com/title/tt0117500/ /
meta propertyog:image contenthttp://ia.media-imdb.com/images/rock.jpg /可选元数据
如下属性对任何对象都是可选的通常建议使用
og:audio该对象的音频文件的urlog:description该对象的描述信息og:determiner句子中此对象标题之前出现的单词。默认为空白也可以是aantheautoog:locale标记这些标签的语言环境。格式为language_TERRITORY。默认值为en_US。og:locale:alternate可以使用此页面的一系列其他语言环境og:site_name如果该对象是大型网站的一部分则应该在整个网站上显示该名称。og:video补充此对象视频文件的URL
meta propertyog:audio contenthttp://example.com/bond/theme.mp3 /
meta propertyog:description contentSean Connery found fame and fortune as thesuave, sophisticated British agent, James Bond. /
meta propertyog:determiner contentthe /
meta propertyog:locale contenten_GB /
meta propertyog:locale:alternate contentfr_FR /
meta propertyog:locale:alternate contentes_ES /
meta propertyog:site_name contentIMDb /
meta propertyog:video contenthttp://example.com/bond/trailer.swf /结构化属性 —— 元数据的属性
元数据可以附加额外的属性来指定元数据的详细信息使用格式og:元数据值:property同样使用content指定值. 如og:image就有如下的属性值
og:image:url与og:image相同指定图片的地址。og:image:secure_url 如果网页需要HTTPS则使用备用网址。og:image:type 此图像的MIME类型。og:image:width 图像宽像素数。og:image:height 图像高像素数。og:image:alt图片的说明非标题。
og:video和og:image具有相同的属性值 og:audio只拥有url、secure_url、type三个属性值。
meta propertyog:image contenthttp://example.com/ogp.jpg /
meta propertyog:image:secure_url contenthttps://secure.example.com/ogp.jpg /
meta propertyog:image:type contentimage/jpeg /多个相同的元数据标签
同一个元数据标签可以有多个值越先定义的优先级越高。
meta propertyog:image contenthttp://example.com/rock.jpg /
meta propertyog:image contenthttp://example.com/rock2.jpg /rock.jpg 图片的 优先级比 rock2.jpg 的优先级高。
在声明的元数据后面放置结构化属性属性的赋值原则是在下一个相同的元标签出现之前就是为之前的元标签添加的属性。
meta propertyog:image contenthttp://example.com/rock.jpg /
meta propertyog:image:width content300 /
meta propertyog:image:height content300 /
meta propertyog:image contenthttp://example.com/rock2.jpg /
meta propertyog:image contenthttp://example.com/rock3.jpg /
meta propertyog:image:height content1000 /表示此页面上有3张图片第一张图片为300x300中间一张图片的尺寸未指定最后一张高为1000px。
类型元数据的使用方法
全局类型使用
使用方法直接在propertyog:type的meta标签中指明content的值即可。
meta propertyog:type contentwebsite /常见的全局类型
website: 一般的网站或首页。article: 文章或者博客入口。book: 书籍。music音乐入口video音频入口
自定义类型使用
自定义类型的使用就是通过引入外部的命名空间来使用该命名空间中的自定义类型。 使用方法
首先使用head prefix命名空间名: 命名空间地址引入命名空间然后使用meta propertyog:type content命名空间:自定义类型 /来指明网站类型
head prefixmy_namespace: http://example.com/ns#
meta propertyog:type contentmy_namespace:my_type /对象类型使用
对象类型使用就是指定og:type为某一个类型之后可以为该类型继续添加其他属性描述。 如og:type为music.song表示该网页时一个音乐网页同时可以使用music:duration属性描述歌曲持续的时间music:album属性描述歌曲所在的专辑等等还有其他属性。
meta propertyog:type contentmusic.song /
meta propertymusic:duration content240 /
meta propertymusic:album contenthttps://www.example.com/my-album-page/ /此代码定义了一个类型为music.song的对象。我们设定了歌曲的持续时间以及歌曲的专辑链接。
歌曲对象类型
music.song: 元标签用来表示网页中的音乐或歌曲。可用的类型描述有: music:duration 歌曲长度music:album歌曲的专辑music:album:dis 该歌曲在专辑的哪张光盘上music:album:track这首歌是哪首歌music:musician制作这首歌的音乐家 music.album表示音乐专辑。可用的类型描述有 music:song 这张专辑的歌曲music:song:trackmusic:song:discmusic:musician制作这首歌的音乐家music:release_date : 专辑发行日期 music.playlist表示音乐列表的类型。可用的类型描述有 music:song这个音乐列表的歌曲music:song:discmusic:song:trackmusic:creator此播放列表的创建者。 music.radio_station表示音乐的电台类型 music:creator此电台的创建者。
视频对象类型
video.movie 表示电影类型。可用的类型描述有: video:actor 电影中的演员。video:actor:role他们扮演的角色。video:director电影导演。video:writer电影的作家。video:duration电影的长度以秒为单位。video:release_date日期电影。video:tag-与此电影关联的标记词。 video.episode 表示电视剧集 video:actor-与video.movie相同video:actor:rolevideo:directorvideo:writervideo:durationvideo:release_datevideo:tagvideo:series电视剧属于那哪一类型。 video.tv_show多集电视节目。可用属性与video.movie相同。video.other不属于任何其他类别的视频。可用属性与video.movie相同。
文章对象类型
meta propertyog:type contentarticle /
meta propertyarticle:published_time content2020-01-01T12:00:00Z /article表示文章类型可用的属性有 article:published_time文章首次发表日期。article:modified_time文章最后改变日期。article:expiration_time 文章后过时日期。article:author文章作者。article:section高级部分名称。article:tag-与本文相关的标记词。
书籍对象类型
book表示书籍类型可用的属性有 book:author谁撰写了这本书。book:isbn的ISBNbook:release_date书发行时间。book:tag与这本书相关的标记词。
profile对象类型
profile表示个人资料或用户资料 profile:first_name用户名字。profile:last_name用户姓氏。profile:username标识它们的短而唯一的字符串。profile:gender用户性别。
社交媒体抓取页面信息的原理
开发图谱帮助我们在社交媒体上优化展示那么是要通过什么实现的呢。 原理和很简单开发图谱实际上是一种数据协议一种规范的数据结构所以社交媒体才能根据这种规范的数据结构抓取到网站的信息从而进行展示。
社交平台是会抓取目标页面的代码注意是服务器返回的html代码由js操作后的html它们是抓不到的 然后对html中的title/和meta/标签进行分析。一般来说title/会作为要分享的标题,meta namedescription content会作为分享的正文。这是最基本的两个抓取点。
由于不同点社交媒体的抓点不一样所以同一份代码在不同的社交媒体上的显示效果可能不同。 Open Graph协议由Facebook实施但是被许多其他社交平台采纳如Twitter、LinkedIn、Pinterest。 但是Twitter有自己的一套元数据标签当Twitter标签不存在时才会使用开放图谱协议。
Twitter Cards
Twitter Cards 是 Twitter 用于在社交媒体上共享链接时显示丰富的文本、图像和视频的metadata 规范。 Twitter Cards 的使用方式
meta nametwitter Cards的元标签名字 contenttwitter Cards元标签对应的内容twitter Cards的元标签
twitter:card定义卡片类型如“summary”“summary_large_image”“app”或“player”。twitter:site相关的Twitter账户通常是制作网站的Twitter用户名。twitter:creator相关的Twitter账户通常是创建内容的用户的Twitter用户名。twitter:title标题对应于页面的主要标题。twitter:description内容描述长度应在200个字符内以保持在Twitter卡片上的整洁。twitter:image用于卡片展示的图片URL。
Microformats
Microformats是一种使用HTMLXHTML中现有的标记元素class和rel属性来添加语义性的简单标记方法。 Microformats官网https://microformats.org/
Microformats的作用
Microformats的主要作用也是美化搜索引擎的搜索结果
丰富网页语义Microformats能够为网页内容增加额外的语义使得机器更好地理解和利用网页中的信息。提升搜索引擎优化SEO通过Microformats标记搜索引擎能更准确地理解网页内容以提供更相关的搜索结果有助于提升网页在搜索引擎结果中的排名。提供更丰富的用户体验例如通过使用Microformats网站可以直接呈现出详细的联系方式、日历事件等用户可以直接在搜索结果页进行操作如添加联系人、保存事件等。数据交互和分享Microformats以标准化的方式描述数据使得数据能更方便地被众多不同的应用和服务进行获取和使用从而促进数据的交互和分享。网页内容的解析和抽取Microformats对于网页爬虫的解析和数据抽取非常有帮助它可以使爬虫更准确地定位和理解待抽取的数据。
Microformats 的使用
是使用标签来标记数据使用如下属性来标记
class 类名rel关系锚元素中目标地址的描述rev反关系引用文档的描述
class使用
Microformats的最常用的使用方式就是使用类名进行数据标记但是类名之前需要添加特定的前缀来标识 h-class表示根类名顶级根类通常指示类型和相应的预期属性词汇表。 h-card描述一个人或组织h-entry描述情景或带有日期标记的在线内容例如博客文章h-feed描述帖子流或提要h-event网络事件 p-class表示纯文本属性 p-name个人或组织的完整/格式化名称。p-summary条目摘要p-country-name国家的名字p-locality市/镇/村p-street-addres街道号码名称p-author作者 u-class表示url属性例如u-url、u-photo、u-logo u-email电子邮件地址u-photo个人或组织照片u-url个人或组织的主页或其他urlu-uid: 通用唯一标识最好是规范的URL dt-class表示日期时间属性例如dt-start、dt-end、dt-body dt-published条目的发布时间dt-start事件开始的日期时间dt-end事件结束的日期时间 e-class表示元素树属性其中包含的整个元素层次结构就是值例如e-content e-content条目的完整内容
更多词汇https://microformats.org/wiki/microformats2#v2_vocabularies eg1
a classh-card hrefhttps://alice.example.comAlice Blogger/a表示此页面包含一张卡片该卡片描述了Alice Blogger以URL命名的个人或组织https://alice.example.com。
eg2
article classh-entryh1 classp-nameMicroformats are amazing/h1pPublished bya classp-author h-card hrefhttps://example.comW. Developer/a ontime classdt-published datetime2013-06-13 12:00:0013supth/sup June 2013/time/pp classp-summaryIn which I extoll the virtues of using microformats./pdiv classe-contentpBlah blah blah/p/div
/articlerel使用
微格式可以通过使用特殊属性rel应用于页面使用rel属性描述当前文档和链接文档之间的关系。 使用方式rel属性值添加到标签上就可以
relauthor该属性表示当前页面的作者rellicense表示当前页面所依据的许可证relnofollow表示从当前页面派生的搜索引擎排名算法不应赋予链接文档任何权重。这有助于防止链接图算法在看到文档链接后对页面的权重高于原本的权重。
eg
a relauthor hrefhttps://jamesg.blogJames Gallagher/a
a rellicense hrefhttps://mit-license.org/MIT License/a
a relnofollow hrefhttps://jamesg.blogJames Gallagher/aRDFa
RDFa不结合schema也可以使用用来标记数据。主要用于搜索引擎搜索的时候进行优化展示。
RDFa是什么
RDFa是一种将结构化元数据嵌入到标记语言中的一种方法。它将多样化的数据加到HTML文档中以便搜索引擎和其他网页服务能更有效地理解和利用网页内容。 RDFa最开始是为了将RDF资源描述框架元数据嵌入到XHTML文档中。但后来被扩展到其他标记语言中包括HTML4、HTML5和XML。它已被W3C (World Wide Web Consortium) 标准化并被Google、Yahoo、Bing和其他搜索引擎广泛支持。 RDF: RDF是“资源描述框架”的简称它是一种用于描述网络资源例如Web页面的语言。这种描述不仅限于简单的元数据例如作者、创建日期等还可以包含更具体的信息例如文章的主题、产品的价格等。RDFa的使用方式
链接使用
使用property来表示url的地址使用url是因为数据的可移植性、一致性和信息共享。使用URL消除术语中出现歧义的可能性。当每词汇术语是 URL 时只需单击一下即可获得该词汇术语的详细解释. eg h2 propertyhttp://purl.org/dc/terms/titleThe Trouble with Bob/h2pDate: span propertyhttp://purl.org/dc/terms/created2011-09-10/span/p如果标签上由href或src属性的话 property会自动与该属性的值而不是标签的文本内容。
eg: 页面添加许可证
pAll content on this site is licensed undera propertyhttp://creativecommons.org/ns#license hrefhttp://creativecommons.org/licenses/by/3.0/a Creative Commons License/a. ©2011 Alice Birpemswick./pvocab使用
虽然通过 CMS 系统生成完整的 UR比较好用但手动输入这些 URL 对于我们来说容易出错且乏味。所以使用vocab属性来指定这些URL属性的链接前缀然后可在property中直接指明对应的词汇即可。 eg: 使用vocal前
bodyh2 propertyhttp://purl.org/dc/terms/titleThe Trouble with Bob/h2pDate: span propertyhttp://purl.org/dc/terms/created2011-09-10/span/p
/body使用vocal后
body vocabhttp://purl.org/dc/terms/h2 propertytitleThe Trouble with Bob/h2pDate: span propertycreated2011-09-10/span/p
/body当然链接方式和vocal方式可以一起用
body vocabhttp://purl.org/dc/terms/...h2 propertytitleThe Trouble with Bob/h2pDate: span propertycreated2011-09-10/span/p...pAll content on this site is licensed undera propertyhttp://creativecommons.org/ns#license hrefhttp://creativecommons.org/licenses/by/3.0/a Creative Commons License/a. ©2011 Alice Birpemswick./p
/bodyresource使用
一个一面可能包含多个项目即对一个属性不同页面部分可能有不同的取值这种情况我们就可以使用resource来进行区分了。 eg: 一个页面上既有alice的文章又有Eve的文章那么他们就属于不同的资源就可以使用resource来进行区分了
body vocabhttp://purl.org/dc/terms/ div resource/alice/posts/trouble_with_bobh2 propertytitleThe trouble with Bob/h2pDate: span propertycreated2011-09-10/span/ph3 propertycreatorAlice/h3/divdiv resource/alice/posts/jos_barbecueh2 propertytitleJos Barbecue/h2pDate: span propertycreated2011-09-14/span/ph3 propertycreatorEve/h3/div
/body 数据关系 resource也可以进行嵌套
div resource/alice/posts/trouble_with_bobh2 propertytitleThe trouble with Bob/h2The trouble with Bob is that he takes much better photos than I do:div resourcehttp://example.com/bob/photos/sunset.jpgimg srchttp://example.com/bob/photos/sunset.jpg /span propertytitleBeautiful Sunset/spanby span propertycreatorBob/span./divh3 propertycreatorAlice/h3/div Alice的文章中包含Bob的照片
联系方式的标识Friend-of-a-Friend词汇表
Dublin Core 词汇表(http://purl.org/dc/terms/)不提供用于描述联系信息的属性名称但 Friend-of-a-Friend词汇表( http://xmlns.com/foaf/0.1 )提供所以我们使用Friend-of-a-Friend词汇表进行标识。 使用vocal指明http://xmlns.com/foaf/0.1同时联系方式又属于Person类所以需要使用typeofPerson来进行标识
div vocabhttp://xmlns.com/foaf/0.1/ typeofPersonppspan propertynameAlice Birpemswick/span,Email: a propertymbox hrefmailto:aliceexample.comaliceexample.com/a,Phone: a propertyphone hreftel:1-617-555-73321 617.555.7332/a/p
/div同时typeofPerson可以重复使用代表多个人 propertyknows表示作者和这几个人是好友关系
div vocabhttp://xmlns.com/foaf/0.1/ typeofPersonpspan propertynameAlice Birpemswick/span,Email: a propertymbox hrefmailto:aliceexample.comaliceexample.com/a,Phone: a propertyphone hreftel:1-617-555-73321 617.555.7332/a/pulli propertyknows typeofPersona propertyhomepage hrefhttp://example.com/bob/span propertynameBob/span/a/lili propertyknows typeofPersona propertyhomepage hrefhttp://example.com/eve/span propertynameEve/span/a/lili propertyknows typeofPersona propertyhomepage hrefhttp://example.com/manu/span propertynameManu/span/a/li/ul
/div 语句复制
有的时候相同的语句标识可能需要多次编写为了避免重复编写我们可以使用rdfa:copy和rdfa:Pattern实现
typeofrdfa:Pattern 实现可复制的代码propertyrdfa:copy标记需要复制的地方
body vocabhttp://purl.org/dc/terms/ div resource/alice/posts/trouble_with_bobh2 propertytitleThe trouble with Bob/h2pDate: span propertycreated2011-09-10/span/ph3 propertycreatorAlice/h3link propertyrdfa:copy href#ccpattern//divdiv resource/alice/posts/jims_concerth2 propertytitleI was at Jims concert the other day/h2pDate: span propertycreated2011-10-22/span/ph3 propertycreatorAlice/h3link propertyrdfa:copy href#ccpattern//divdiv resource#ccpattern typeofrdfa:Patternp vocabhttp://creativecommons.org/ns#All content on this blog item is licensed undera propertylicense hrefhttp://creativecommons.org/licenses/by/3.0/a Creative Commons License/a. span propertyattributionName©2011 Alice Birpemswick/span./p/div
/body 使用多个词汇表
在一个页面使用多个词汇表很可能会引起的冲突所以我们使用prefix来为不同的词汇表添加前缀方式混淆使用prefix声明之后就无需使用vocab再次声明了。
htmlhead/headbody prefixdc: http://purl.org/dc/terms/ schema: http://schema.org/div resource/alice/posts/trouble_with_bob typeofschema:BlogPostingh2 propertydc:titleThe trouble with Bob/h2h3 propertydc:creator resource#meAlice/h3div propertyschema:articleBodypThe trouble with Bob is that he takes much better photos than I do:/p/div/div/body
/htmlprefix可以和vocab一起使用 body vocabhttp://purl.org/dc/terms/ prefixschema: http://schema.org/div resource/alice/posts/trouble_with_bob typeofschema:BlogPostingh2 propertytitleThe trouble with Bob/h2h3 propertycreator resource#meAlice/h3div propertyschema:articleBodypThe trouble with Bob is that he takes much better photos than I do:/p/div/div/body如果多个词汇表需要在一个标签上使用同一个属性这种情况就可以给property属性赋值数组格式
body prefixdc: http://purl.org/dc/terms/ schema: http://schema.org/div resource/alice/posts/trouble_with_bob typeofschema:BlogPostingh2 propertydc:titleThe trouble with Bob/h2h3 propertydc:creator schema:creator resource#meAlice/h3div propertyschema:articleBodypThe trouble with Bob is that he takes much better photos than I do:/p/div/div/body同时typeof也可以赋值数组
div classsidebar prefixfoaf: http://xmlns.com/foaf/0.1/ schema: http://schema.org/ resource#me typeoffoaf:Person schema:Personpspan propertyfoaf:nameAlice Birpemswick/span,Email: a propertyfoaf:mbox hrefmailto:aliceexample.comaliceexample.com/a,Phone: a propertyfoaf:phone hreftel:1-617-555-73321 617.555.7332/a/p...
/div默认声明
许多具有众所周知前缀的词汇表被 Web 社区广泛使用——Dublin Core 词汇表就是一个很好的例子默认声明为dc所以无需声明就可以使用propertydc:title。虽然可以这样使用但是不建议:
bodydivh2 propertydc:titleThe trouble with Bob/h2h3 propertydc:creator resource#meAlice/h3/div/bodycontent使用
机器不容易读懂日期信息就可以使用content属性声明机器易读的数据结构。 h2 propertyhttp://purl.org/dc/terms/titleThe Trouble with Bob/h2pDate: span propertyhttp://purl.org/dc/terms/created content2011-09-1010th of September, 2011/span/p数据类型datatype
有的时候我们更倾向于指明字段所代表的具体数据类型 ©span propertydc:date datatypexsd:gYear2011/span Alice Birpemswick.这样就表示2011代表年份。 更多其它的数据类型可以参照https://www.w3.org/TR/xmlschema11-2/#built-in-datatypes
设置上下文替代方案about
resource表示资源的引入正常情况下property属性必须在resource的子标签下面即不允许 li resource/alice/posts/trouble_with_bob propertytitle鲍勃的麻烦/li但是使用about代替resource就可以和property在同一个标签上使用
ulli about/alice/posts/trouble_with_bob propertytitle鲍勃的麻烦/lili about/alice/posts/jos_barbecue propertytitle乔的烧烤/li
/ul属性替代方案ref
ref可以简化在多个标签上添加同一个属性 简化前
div vocabhttp://xmlns.com/foaf/0.1/ resource#meulli propertyknows resourcehttp://example.com/bob/#me typeofPersona propertyhomepage hrefhttp://example.com/bob/span propertynameBob/span/a/lili propertyknows resourcehttp://example.com/eve/#me typeofPersona propertyhomepage hrefhttp://example.com/eve/span propertynameEve/span/a/lili propertyknows resourcehttp://example.com/manu/#me typeofPersona propertyhomepage hrefhttp://example.com/manu/span propertynameManu/span/a/li/ul
/div 简化后
div vocabhttp://xmlns.com/foaf/0.1/ resource#meul relknowsli resourcehttp://example.com/bob/#me typeofPersona propertyhomepage hrefhttp://example.com/bob/span propertynameBob/span/a/lili resourcehttp://example.com/eve/#me typeofPersona propertyhomepage hrefhttp://example.com/eve/span propertynameEve/span/a/lili resourcehttp://example.com/manu/#me typeofPersona propertyhomepage hrefhttp://example.com/manu/span propertynameManu/span/a/li/ul
/div JSON-LD
JSON-LD不结合schema也可以使用用来标记数据。主要用于搜索引擎搜索的时候进行优化展示。
JSON-LD是什么
JSON-LD是由W3C推出的一种基于JSON的数据格式化标准用于在网络环境中创建交互链接的数据。它主要用于描述资源和创建关联数据。 官网https://json-ld.org/
JSON-LD的一些基本概念
IRI术语表示JSON-LD文档(结合schema.org 词汇表)
{http://schema.org/name: Manu Sporny,http://schema.org/url: {id: http://manu.sporny.org/},http://schema.org/image: {id: http://manu.sporny.org/images/manu.png}
}content
上述编写方法不利于开发者使用所以引入了content。 content相当于一个全局映射变量用于将术语映射到IRI术语区分大小写并且大多数非保留 JSON-LD关键字的有效字符串都可以用作术语。 上述示例使用content映射列表该映射表称为扩展术语定义
{context: {name: http://schema.org/name,image: {id: http://schema.org/image,type: id},homepage: {id: http://schema.org/url,type: id}}
}就表示name就代表http://schema.org/name下文中想要使用http://schema.org/name时直接使用image即可。自定义的上下文可以直接嵌入到文档中。 使用该映射列表之后JSON-LD的写法就可以简化为
{context: {name: http://schema.org/name,image: {id: http://schema.org/image,type: id},homepage: {id: http://schema.org/url,type: id}}name: Manu Sporny,homepage: http://manu.sporny.org/,image: http://manu.sporny.org/images/manu.png
}但是通常情况下不用我们自己定义映射表直接使用context引入外部已经定义好的上下文文档就可以如下是引入外部content简化后的JSON-LD:
{context: https://json-ld.org/contexts/person.jsonld,name: Manu Sporny,homepage: http://manu.sporny.org/,image: http://manu.sporny.org/images/manu.png
}上下文中定义base可以设置文档的基本IRI上下文中定义vocab可以设置一个公共前缀该前缀用作词汇表映射
{context: {vocab: http://example.com/vocab/,base: http://example.com/document.jsonld,},
}id
id是节点标识符标识该内容是一个节点。
{context: {name: http://schema.org/name},id: http://me.markus-lanthaler.com/,name: Markus Lanthaler,
}type
type用于指明节点对象的类型可以直接使用url为其赋值
{context: {givenName: http://schema.org/givenName,familyName: http://schema.org/familyName},id: http://me.markus-lanthaler.com/,type: http://schema.org/Person,givenName: Markus,familyName: Lanthaler,
}也可以是一个数组为节点分配多种类型
{id: http://me.markus-lanthaler.com/,type: [http://schema.org/Person,http://xmlns.com/foaf/0.1/Person],
}也可以是活动上下文中定义的术语
{context: {Person: http://schema.org/Person},id: http://example.org/places#BrewEats,type: Person,
}其他的语法标记
base用于设置基本IRI根据该基本 IRI 来解析那些相对于文档进行解释的相对IRI引用。container用于设置术语 的默认容器类型。direction用于设置JSON-LD的基本方向该值不是类型化值graph用来表达图形。import在上下文定义 中用于加载外部上下文。included在顶级节点对象中用于定义包含块用于将辅助节点对象包含在另一个节点对象中。index用于指定容器用于索引信息并且处理应继续深入到 JSON 数据结构。json用作JSON 文字type的值。language用于指定特定字符串值的语言或 JSON-LD 文档的默认语言。list用于表达一组有序的数据。nest用于定义节点对象的属性该属性将该节点的属性组合在一起但不是图中的边。none当索引节点没有 被索引的功能时用作索引映射、id映射、语言映射、类型映射或使用映射索引到其他值的 其他地方的索引值。prefix有了值true允许在压缩时使用该术语构建紧凑的IRI。propagate在上下文定义 中使用以更改该上下文的范围。默认情况下它是true这意味着上下文在节点对象之间传播protected用于防止上下文的术语定义被其他上下文覆盖。reverse用于表达反向属性。set用于表达无序数据集并确保值始终表示为数组。type用于设置节点 的类型或类型化值的数据类型。value用于指定与图中特定属性 关联的数据。version在上下文定义 中用于设置处理模式。vocab用于扩展具有type公共前缀IRI 的属性和值。
JSON-LD的格式
JSON-LD有4种展示方式
Expanded 格式扩展格式Compacted 格式 压缩格式Flattened格式 扁平化格式Framed格式框架格式
Expanded 格式
即未经处理的原始格式
[{http://xmlns.com/foaf/0.1/name: [ Manu Sporny ],http://xmlns.com/foaf/0.1/homepage: [{id: http://manu.sporny.org/}]}
]Compacted 格式
即使用了context定义的JSON-LD是最常用的格式。
{context: {name: http://xmlns.com/foaf/0.1/name,homepage: {id: http://xmlns.com/foaf/0.1/homepage,type: id}},name: Manu Sporny,homepage: http://manu.sporny.org/
}Flattened格式
扁平化模式。 为扁平化时
{context: {name: http://xmlns.com/foaf/0.1/name,knows: http://xmlns.com/foaf/0.1/knows},id: http://me.markus-lanthaler.com/,name: Markus Lanthaler,knows: [{id: http://manu.sporny.org/about#manu,name: Manu Sporny}, {name: Dave Longley}]
}扁平化后
{context: {name: http://xmlns.com/foaf/0.1/name,knows: http://xmlns.com/foaf/0.1/knows},graph: [{id: http://me.markus-lanthaler.com/,name: Markus Lanthaler,knows: [{ id: http://manu.sporny.org/about#manu },{ id: _:b0 }]}, {id: http://manu.sporny.org/about#manu,name: Manu Sporny}, {id: _:b0,name: Dave Longley}]
}Framed格式
框架模式框架模式一层套一层使用contains进行框架的嵌套。
{context: {version: 1.1,vocab: http://example.org/},type: Library,contains: {type: Book,contains: {type: Chapter}}
}该框架文档描述了一种嵌入结构该结构将Library类型的对象放置在顶部其中Book类型的对象使用嵌入的contains属性作为属性值链接到库对象。它还将Chapter类型的对象作为 Book 对象的嵌入值放置在引用的Book对象中。
在HTML中嵌入JSON-LD
只需要将JSON-LD的内容放置在属性设置为typeapplication/ldjson的脚本元素中就可以将其嵌套进HTML中
script typeapplication/ldjson
{context: https://json-ld.org/contexts/person.jsonld,id: http://dbpedia.org/resource/John_Lennon,name: John Lennon,born: 1940-10-09,spouse: http://dbpedia.org/resource/Cynthia_Lennon
}
/scriptHTML基层基本IRI
在HTML文档中可以使用base标签引入所依赖的JSON-ID内容的基本IRI作用是确保所有系统按照统一基本IRI处理JSON-ID的内容。 eg:
htmlheadbase hrefhttp://dbpedia.org/resource//script typeapplication/ldjson{context: https://json-ld.org/contexts/person.jsonld,id: John_Lennon,name: John Lennon,born: 1940-10-09,spouse: Cynthia_Lennon}/script/head
/htmlscript标签JSON-LD的限制
如下字符需要进行转义
amp;→ ( 符号U0026)lt;→ 小于号U003Cgt;→ 大于号U003Equot;→ “引号U0022apos;→ 撇号U0027
eg
script typeapplication/ldjson
{context: http://schema.org/,type: WebPageElement,name: Encoding Issues,description: Issues list such as unescaped lt;/scriptgt; or --gt;
}
/scriptSchema词汇表
注意Schema只是一个词汇表需要结合上面的数据标记协议方法使用。
Schema的作用
Schema提供一套共享的标记词汇表用于在网页上结构化数据美化搜索引擎的显示效果。 正确地使用schema可以
提高SEO效果通过使用Schema.org标记可以增加网站在搜索引擎中的可见性从而提高网站的搜索引擎优化(SEO)效果。它可以帮助搜索引擎理解网站的内容以及网页与其他网页的关系。改善搜索引擎排名Schema.org标记可以提供更丰富的信息使搜索引擎更准确地理解网页内容从而可能提高网页在搜索结果中的排名。提供丰富的搜索结果使用Schema.org标记的网页在搜索结果中可能会显示出更丰富的结果比如评价星级、价格、开放时间等。促进数据互通性通过Schema.org网站可以采用标准的词汇表对内容进行注释从而促进了不同网站间数据的互通性。
Schema.org是由Google、Microsoft、Yahoo和Yandex共同发起的现已成为网站对搜索引擎优化的重要手段。 官网https://schema.org/docs/documents.html
可能会有些乱这里是naver搜索引擎的结构化标记效果和要求可以作为参考https://searchadvisor.naver.com/guide/structured-data-intro
使用方式
我们可以使用Microdata、RDFa或 JSON-LD格式的方式将schema标记信息添加到 Web 内容中。Microdata
Microdata添加标记信息的方式是一组标签使用标签的方式将标记信息添加到HTML5中。
第一步添加项目类型 首先找出HTML中想要标记的部分比如一个电影有如下信息想要标记
divh1头像/h1span导演詹姆斯·卡梅隆生于 1954 年 8 月 16 日/spanspan科幻小说/spana href../movies/avatar-theatrical-trailer.html预告片/a
/div对找到的标记部分最外层添加itemscope属性表示该块代码需要被标记同时添加itemtype类型地址来指明标记类型。
div itemscope itemtypehttps://schema.org/Movie h1头像/h1span导演詹姆斯·卡梅隆生于 1954 年 8 月 16 日/spanspan科幻小说/spana href../movies/avatar-theatrical-trailer.html预告片/a
/divitemtype“https://schema.org/Movie” 表示是电影类型类型的地址一般都是https://schema.org/类型名
第二步添加项目属性 电影具有属性例如演员、导演、收视率。要标记项目的属性需使用itemprop属性。例如要标识电影的导演请添加itempropdirector到包含导演姓名的元素
div itemscope itemtype https://schema.org/Movieh1 itempropname 头像/h1span导演span itempropdirector 詹姆斯·卡梅隆/span生于 1954 年 8 月 16 日/spanspan itempropgenre 科幻小说/spana href../movies/avatar-theatrical-trailer.html itemproptrailer 预告片/a
/div具体哪些属性可以被标记我们就需要查看schema的文档了文档的地址和itemtype指明的类型地址应该是一致的。 如电影类型的文档配置地址是https://schema.org/Movie
第三步嵌入其他属性 不同的类型属性之间可以嵌套如电影的导演是Person类型那我们应该使用Person类型将导演内容进行标记标签内的itemprop就是根据Person可配置的属性来的。
div itemscope itemtype https://schema.org/Movieh1 itempropname头像/h1div itempropdirector itemscope itemtypehttps://schema.org/Person 导演span itempropname詹姆斯·卡梅隆/span出生于 span itempropbirthDate 1954 年 8 月 16 日/span/divspan itempropgenre科幻小说/spana href../movies/avatar-theatrical-trailer.html itemproptrailer预告片/a
/divRDFa
RDFa是一项W3C的建议以便在Web文档中嵌入丰富的元数据。 eg
div xmlns:dc http://purl.org/dc/elements/1.1/ about http://www.example.com/books/wikinomics 在他的最新著作中span property dc :title 维基经济学/span ,span property dc:creator Don Tapscott /span解释了技术、人口统计和商业的深刻变化。该书预计于span property dc:date content 2006-10-01 2006年10月/span出版。
/div RDFa 允许文本中的段落和单词与语义标记相关联。
RDFa结合Schema使用的时候像Microdata一样也是在标签中使用
使用vocab在最外层标签指明schema网址使用typeof指明schema对应的类型使用property指明要标识的属性多个类型可以嵌套
eg
div vocabhttps://schema.org/
div typeofBook resourcehttp://worldcat.org/entity/work/id/2292573321h1span propertynameRouge et le noir/span/h1divAuthor: span propertyauthor typeofPerson resourcehttp://viaf.org/viaf/17823Stendhal/span/divdivLanguage: span propertyinLanguage contentfrFrench/span/divdivHas Translation: span propertyworkTranslation typeofCreativeWork resourcehttp://worldcat.org/entity/work/id/460647Red and Black : A New Translation, Backgrounds and Sources, Criticism/span/div
/div
div typeofBook resourcehttp://worldcat.org/entity/work/id/460647h1span propertynameRed and Black : A New Translation, Backgrounds and Sources, Criticism/span/h1divAuthor: span propertyauthor typeofPerson resourcehttp://viaf.org/viaf/17823Stendhal/span/divdivLanguage: span propertyinLanguage contentenEnglish/span/divdivSubject: span propertyaboutPsychological fiction, French/span/divdivTranslation of: span propertytranslationOfWork typeofCreativeWork resourcehttp://worldcat.org/entity/work/id/2292573321Rouge et le noir/span/divdivTranslator: span propertytranslator typeofPerson resourcehttp://viaf.org/viaf/8453420Robert Martin Adams/span/div
/div
/divJSON-LD格式
JSON-LD是一种使用JSON编码链接数据的方法JSON-LD围绕”上下文“的概念进行设计提供从JSON到RDF模型的映射。为了将 JSON-LD 语法映射到 RDFJSON-LD 允许将值强制为指定类型或用语言标记。 eg
{context: {name: http://xmlns.com/foaf/0.1/name,mainPage: {id: http://xmlns.com/foaf/0.1/ workplaceHomepage,type: id},Person: http://xmlns.com/foaf/0.1/Person},id: https://me.example.com ,type: Person,name: 约翰·史密斯,mainPage: https://www.example.com/}JSON-LD结合Schema使用的时候需要在script中使用
最外层要嵌套script typeapplication/ldjson/script标签以对象格式进行数据类型标记使用context属性指明schema地址使用type指明要标识的属性
eg
script typeapplication/ldjson{context: https://schema.org/,graph: [{id: http://worldcat.org/entity/work/id/2292573321,type: Book,author: {id: http://viaf.org/viaf/17823},inLanguage: fr,name: Rouge et le noir,workTranslation: {type: Book,id: http://worldcat.org/entity/work/id/460647}},{id: http://worldcat.org/entity/work/id/460647,type: Book,about: Psychological fiction, French,author: {id: http://viaf.org/viaf/17823},inLanguage: en,name: Red and Black : A New Translation, Backgrounds and Sources, Criticism,translationOfWork: {id: http://worldcat.org/entity/work/id/2292573321},translator: {id: http://viaf.org/viaf/8453420}}]}
/scriptSchema常用的标记类型
创意作品创意作品、书籍、电影、音乐录音、食谱、电视剧嵌入的非文本对象音频、图片、视频事件组织人地点、当地企业、餐厅产品、报价、聚合报价评论、综合评级
Schema的一些特殊处理
日期时间处理
日期和时间可能对于某些机器来说很难读因为他不确定我们使用的是什么格式的时间和日期所以需要我们使用datatime指明一下。
time datetime2011-04-0104/01/11/time
time datetime2011-05-08T19:30May 8, 7:30pm/time
div itemscope itemtypehttps://schema.org/EventEvent date:time itempropstartDate datetime2011-05-08T19:30May 8, 7:30pm/time
/divlink标签的使用
有的时候我们不想让链接显示在页面上就可以使用link标签
div itemscope itemtypehttps://schema.org/Bookspan itempropname麦田里的守望者/span—link itempropurl hrefhttp://en.wikipedia.org/wiki/The_Catcher_in_the_Rye /作者span itempropauthorJD 塞林格/span
/div使用这种方式既标记了书籍的地址又没有将地址显示在页面上美化了页面。
元标签的使用
某些情况下由于信息的显示方式我们无法对其进行标记这时我们就可以使用meta元标签进行标记了。
div itemscope itemtypehttps://schema.org/Offerspan itempropnameBlend-O-Matic/spanspan itempropprice19.95 美元/spandiv itemprop评论 itemscope itemtypehttps://schema.org/AggregateRating img src四星.jpg /meta itemprop ratingValue content4 / meta itempropbestRating content5 /基于 span itemprop ratingCount 25/span 个用户评分/div
/div单纯的图片我们无法标记评分信息和最好评分信息。所以我们使用meta itemprop 标记使浏览器可以捕获到评分信息并显示在搜索页面上。
