打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
赞组件Weibo Meta Tags及对OpenGraph支持范畴说明文档

目录

 [隐藏

什么是微博元标记(Weibo Meta Tags)

微博元标记,即Weibo Meta Tags,对Open graph协议下的常规meta tag 进行支持和兼容,并基于国情对OpenGraph不适用的对象类型或属性进行有限扩展标记。可以和OpenGraph一起使用。

为什么要配置Weibo Meta Tags

传统互联网信息单元往往以Web Page为单位,以URL为线索进行索引和流转。通过定义Weibo Meta Tags,可以穿透Web Page,准确索引互联网上的Object,对互联网上的物体进行格式化管理。拥有格式化的Object数据,就可以为用户提供灵活、扩展性强、易读的内容展示模块。

如何定义对象(Object)类型?赞组件支持哪些对象(Object)类型?

1、定义方式:

<meta property="og:type" content="对象类型" />或<meta name="weibo:type" content="对象类型" />
  • 定义对象类型后,通过查询对象属性表,定义对象详细属性信息。


2、赞组件支持的对象类型如下:网页(webpage)、文章(article)、音频(audio)、图片(image)、人(person)、地点(place)、产品(product)、视频(video)、书(book)、游戏(game)、应用(app)

如何定义Weibo Meta Tags

找到适合您网页的对象类型,通过对象属性表查询并设定属性值,详细的设定将带来更好的效果,最后将代码放入head中即可,下面列举两个部署实例进行说明


【视频】对象Meta代码实例:

//必填<meta property="og:type" content="video" /><meta property="og:url" content="http://video.sina.com.cn/v/b/93544804-2282043583.html" /><meta property="og:title" content="微博UDC圣诞贺岁视频首发" /><meta property="og:description" content="【微博UDC圣诞贺岁视频首发!—微博带你分享微快乐!】还有几个小时,圣诞节就要到啦!末日后的第一个圣诞大家准备怎样度过呢?2012我要新花样!!!!~赶快动手制作一个圣诞 pinhole camera!! 和你最亲近的那个TA一起分享微快乐吧!!!" />//选填<meta property="og:image" content="http://ww2.sinaimg.cn/bmiddle/880538bfjw1e04w8ktfakj.jpg " /><meta name="weibo:video:embed_code" content="http://you.video.sina.com.cn/api/sinawebApi/outplayrefer.php/vid=93544804_2282043583_OB21THcwCDTK+l1lHz2stqkP7KQNt6nni2K2u1anIAZaQ0/XM5GQYdgD5CHWBNkEqDhATZs6cfou1xk/s.swf" /><meta name="weibo:video:stream" content="" /><meta name="weibo:video:duration" content="47" /><meta name="weibo:video:create_at" content="2012-12-24 16:26:05" /><meta name="weibo:video:update_at" content="2012-12-24 16:26:05" />


以上代码使用OpenGraph 和Weibo Meta Tags混合方式,Weibo Meta Tags目前支持五个OpenGraph基础属性,即

<meta property="og:type" content="类型" /><meta property="og:url" content="URL地址" /><meta property="og:title" content="标题" /><meta property="og:image" content="图片" /><meta property="og:description" content="描述" />

以上OG属性可与Weibo Meta Tags属性直接互通使用。完全使用Weibo Meta Tag代码格式实例如下:

//必填<meta name ="weibo:type" content="video" /><meta name ="weibo:video:url" content="视频的URL地址" /><meta name ="weibo:video:title" content="视频的显示名称" /><meta name ="weibo:video:description" content="视频的文字描述" />//选填<meta name ="weibo:video:image" content="视频的缩略显示图片" /><meta name="weibo:video:embed_code" content="视频播放的嵌入代码" /><meta name="weibo:video:duration" content="视频播放的时长,单位秒" /><meta name="weibo:video:stream" content="视频流的链接源" /><meta name="weibo:video:create_at" content="用户的创建时间" /><meta name="weibo:video:update_at" content="用户的更新时间" />


【网页】对象Meta代码实例:

//必填<meta property="og:type" content="webpage" /><meta property="og:url" content="http://sports.sina.com.cn/nba/2012-12-26/06576353009.shtml" /><meta property="og:title" content="圣诞战总得分王!科比34+5写历史 暴强数据16年第2" /><meta property="og:description" content="科比-布莱恩特不出意料地拿下34分并成为了圣诞大战史上得分王,不仅如此,这位34岁的神已连续9场比赛得分30+,创造了个人生涯第二好成绩并向着2003年连续16场的壮举继续迈进!" />//选填<meta property="og:image" content="http://i2.sinaimg.cn/ty/nba/2012-12-26/U4934P6T12D6353009F1286DT20121226070232.jpg" /><meta name="weibo:webpage:create_at" content="2012-12-26 06:57:00" /><meta name="weibo:webpage:update_at" content="2012-12-26 06:57:00" />

严格定义与非严格定义

下面A与B两种格式,其中A为严格定义,B为非严格定义,区别就在于非严格定义可省略中间段。

A)	weibo:video:embed_codeB)	weibo:embed_code

当明确定义了type对象类型时,可使用非严格定义,所有属性均会被识别为当前定义类型;否则将不被识别。建议严格定义。

单个属性的多值定义

单个属性的多值定义即对某个对象属性(即标记)可同时赋予多个不同值,属性值根据表现层产品需要按顺序显示。

方法:每行定义一个属性,需要meta标签,同样的属性以及不同的赋值,按顺序逐行定义。

示例:image属性定义多个值,即多张图片<meta property="og:image" content="示例图片1" /><meta property="og:image" content="示例图片2 " /><meta property="og:image" content="示例图片3" /><meta name="weibo:webpage: image" content="图片示例4" /><meta name="weibo:webpage: image" content="图片示例5" />

注1:目前此方法仅对所有对象类型image属性开放,其它属性暂不支持。

注2:image属性多值定义目前可用于分享窗口预置图片。

对象(object)详细属性表

网页(webpage)

Weibo Meta Tags数据类型是否必填OpenGraph说明
weibo:webpage:urlstring必填og:url网页的URL地址
weibo:webpage:titlestring必填og:title网页的显示名称标题
weibo:webpage:descriptionstring必填og:description网页的文字描述
weibo:webpage:imagestringog:image网页的显示图片
weibo:webpage:create_atdate time网页的创建时间
weibo:webpage:update_atdate time网页的更新时间

代码示例:

//必填<meta property="og:type" content="webpage" /><meta property="og:url" content="网页唯一URL地址" /><meta property="og:title" content="网页标题" /><meta property="og:description" content="网页描述" />//选填<meta property="og:image" content="网页的显示图片" /><meta name="weibo:webpage:create_at" content="网页的创建时间" /><meta name="weibo:webpage:update_at" content="网页的更新时间" />

文章(article)

Weibo Meta Tags数据类型是否必填OpenGraph说明
weibo:article:urlstring必填og:url文章的URL地址
weibo:article:titlestring必填og:title文章的显示名称标题
weibo:article:descriptionstring必填og:description文章的文字描述
weibo:article:imagestringog:image文章的显示图片
weibo:article:create_atdate time文章的创建时间
weibo:article:update_atdate time文章的更新时间

代码示例:

//必填<meta property="og:type" content="article" /><meta property="og:url" content="文章的URL地址" /><meta property="og:title" content="文章的显示名称标题" /><meta property="og:description" content="文章的文字描述" />//选填<meta property="og:image" content="文章的显示图片" /><meta name="weibo: article:create_at" content="文章的创建时间" /><meta name="weibo: article:update_at" content="文章的更新时间" />

音频(audio)

Weibo Meta Tags数据类型是否必填OpenGraph说明
weibo:audio:urlstring必填og:url音频的落地页URL地址
weibo:audio:titlestring必填og:title音频的显示名称
weibo:audio:descriptionstring必填og:description音频的文字描述
weibo:audio:imagestringog:image音频的显示图片
weibo:audio:embed_codestring音频播放的嵌入代码
weibo:audio:streamstring音频流的链接源
weibo:audio:durationstring音频播放的时长,秒
weibo:audio:create_atdate time音频的创建时间
weibo:audio:update_atdate time音频的更新时间

代码示例:

//必填<meta property="og:type" content="audio" /><meta property="og:url" content="音频的落地页URL地址" /><meta property="og:title" content="音频的显示名称" /><meta property="og:description" content="音频的文字描述" />//选填<meta property="og:image" content="音频的显示图片" /><meta name="weibo:audio:embed_code" content="音频播放的HTML嵌入代码" /><meta name="weibo:audio:stream" content="音频流的链接源" /><meta name="weibo:audio:duration" content="音频播放的时长,秒" /><meta name="weibo:audio:create_at" content="音频的创建时间" /><meta name="weibo:audio:update_at" content="音频的更新时间" />

视频(video)

Weibo Meta Tags数据类型是否必填OpenGraph说明
weibo:video:urlstring必填og:url视频的URL地址
weibo:video:titlestring必填og:title视频的显示名称
weibo:video:descriptionstring必填og:description视频的文字描述
weibo:video:imagestringog:image视频的显示图片
weibo:video:embed_codestring视频播放的嵌入代码
weibo:video:streamstring视频流的链接源
weibo:video:durationstring视频播放的时长,秒
weibo:video:create_atdate time视频的创建时间
weibo:video:update_atdate time视频的更新时间

代码示例:

//必填<meta property="og:type" content="video" /><meta property="og:url" content="视频的URL地址" /><meta property="og:title" content="视频的显示名称" /><meta property="og:description" content="视频的文字描述" />//选填<meta property="og:image" content="视频的显示图片" /><meta name="weibo:video:embed_code" content="视频播放的HTML嵌入代码" /><meta name="weibo:video:stream" content="视频流的链接源" /><meta name="weibo:video:duration" content="视频播放的时长,秒" /><meta name="weibo:video:create_at" content="视频的创建时间" /><meta name="weibo:video:update_at" content="视频的更新时间" />

图片(image)

Weibo Meta Tags数据类型是否必填OpenGraph说明
weibo:image:urlstring必填og:url图片的URL地址
weibo:image:titlestring必填og:title图片的显示名称
weibo:image:descriptionstring必填og:description图片的文字描述
weibo:image:imagestringog:image图片的缩略显示图
weibo:image:full_imagestringog:image图片的原始大图
weibo:image:create_atdate time图片的创建时间
weibo:image:update_atdate time图片的更新时间

代码示例:

//必填<meta property="og:type" content="image" /><meta property="og:url" content="图片的URL地址" /><meta property="og:title" content="图片的显示标题" /><meta property="og:description" content="图片的文字描述" />//选填<meta property="og:image" content="图片的缩略显示图" /><meta property="weibo:image:full_image" content="图片的原始大图" /><meta name="weibo:image:create_at" content="图片的创建时间" /><meta name="weibo:image:update_at" content="图片的更新时间" />

说明:og:image参数对应weibo:image:image(缩略图)和weibo:image:full_image(原始大图),若需要区分缩略图与原始大图,请分别设定weibo:image:image和weibo:image:full_image,weibo标记会覆盖og标记。

人(person)

Weibo Meta Tags数据类型是否必填OpenGraph说明
weibo:person:urlstring必填og:url用户的URL地址
weibo:person:titlestring必填og:title用户账号的显示名称
weibo:person:imagestringog:image用户的显示头像
weibo:person:create_atdate time用户的创建时间
weibo:person:update_atdate time用户的更新时间

代码示例:

//必填<meta property="og:type" content="person" /><meta property="og:url" content="用户的URL地址" /><meta property="og:title" content="用户账号的显示名称" />//选填<meta property="og:image" content="用户的显示头像" /><meta name="weibo:person:create_at" content="用户的创建时间" /><meta name="weibo:person:update_at" content="用户的更新时间" />

地点(place)

Weibo Meta Tags数据类型是否必填OpenGraph说明
weibo:place:urlstring必填og:url地理位置的URL地址
weibo:place:titlestring必填og:title地理位置的显示名称
weibo:place:positionstring必填用户的显示头像
weibo:person:create_atdate time用户的创建时间
weibo:person:update_atdate time地理位置的坐标,经+纬+海拔,符合ISO6709

代码示例:

//必填<meta property="og:type" content="place" /><meta property="og:url" content="地理位置的URL地址" /><meta property="og:title" content="地理位置的显示名称" /><meta property="weibo:place:position" content="地理位置的坐标,经+纬+海拔,符合ISO6709" />

产品(product)

Weibo Meta Tags数据类型是否必填OpenGraph说明
weibo:product:urlstring必填og:url商品的URL地址
weibo:product:titlestring必填og:title商品的显示名称标题
weibo:product:descriptionstring必填og:description商品的文字描述
weibo:product:imagestringog:image商品的缩略显示图
weibo:product:full_imagestringog:image商品的原始大图
weibo:product:create_atdate time商品的创建时间
weibo:product:update_atdate timeog:image商品的更新时间

代码示例:

//必填<meta property="og:type" content="product" /><meta property="og:url" content="商品的URL地址" /><meta property="og:title" content="商品的显示名称标题" /><meta property="og:description" content="商品的文字描述" />//选填<meta property="og:image" content="商品的缩略显示图" /><meta name="weibo:product:full_image" content="商品的原始大图" /><meta name="weibo:product:create_at" content="商品的创建时间" /><meta name="weibo:product:update_at" content="商品的更新时间" />

说明:og:image参数对应weibo:product:image(缩略图)和weibo:product:full_image(原始大图),若需要区分缩略图与原始大图,请分别设定weibo:product:image和weibo:product:full_image,weibo标记会覆盖og标记。

书(book)

Weibo Meta Tags数据类型是否必填OpenGraph说明
weibo:book:urlstring必填og:url书的URL地址
weibo:book:titlestring必填og:title书的显示名称
weibo:book:descriptionstring必填og:description书的文字描述
weibo:book:imagestringog:image书的显示图片
weibo:book:isbnstring书的10或13位数字的ISBN书号
weibo:book:create_atdate time书的出版时间

代码示例:

//必填<meta property="og:type" content="book" /><meta property="og:url" content="书的URL地址" /><meta property="og:title" content="书的显示名称" /><meta property="og:description" content="书的文字描述" />//选填<meta property="og:image" content="书的显示图片" /><meta name="weibo:book:isbn" content="书的10或13位数字的ISBN书号" /><meta name="weibo:video:create_at" content="书的出版时间" />

游戏(game)

Weibo Meta Tags数据类型是否必填OpenGraph说明
weibo:game:urlstring必填og:url游戏的URL地址
weibo:game:titlestring必填og:title游戏的显示名称标题
weibo:game:descriptionstring必填og:description游戏的文字描述
weibo:game:imagestringog:image游戏的缩略显示图
weibo:game:full_imagestringog:image游戏的原始大图
weibo:game:create_atdate time游戏的创建时间
weibo:game:update_atdate time游戏的更新时间

代码示例:

//必填<meta property="og:type" content="game" /><meta property="og:url" content="游戏的URL地址" /><meta property="og:title" content="游戏的显示名称标题" /><meta property="og:description" content="游戏的文字描述" />//选填<meta property="og:image" content="游戏的缩略显示图" /><meta name="weibo:game:image" content="游戏的原始大图" /><meta name="weibo:game:full_image" content="游戏的原始大图" /><meta name="weibo:game:create_at" content="游戏的创建时间" /><meta name="weibo:game:update_at" content="游戏的更新时间" />

说明:og:image参数对应weibo:game:image(缩略图)和weibo:game:full_image(原始大图),若需要区分缩略图与原始大图,请分别设定weibo:game:image和weibo:game:full_image,weibo标记会覆盖og标记。

应用(app)

Weibo Meta Tags数据类型是否必填OpenGraph说明
weibo:app:urlstring必填og:url应用的URL地址
weibo:app:titlestring必填og:title应用的显示名称标题
weibo:app:descriptionstring必填og:description应用的文字描述
weibo:app:imagestringog:image应用的显示缩略图
weibo:app:full_imagestringog:image应用的原始大图
weibo:app:create_atdate time应用的创建时间
weibo:app:update_atdate time应用的更新时间

代码示例:

//必填<meta property="og:type" content="app" /><meta property="og:url" content="应用的URL地址" /><meta property="og:title" content="应用的显示名称标题" /><meta property="og:description" content="应用的文字描述" />//选填<meta property="og:image" content="应用的显示缩略图" /><meta name="weibo:app:full_image" content="应用的原始大图" /><meta name="weibo:app:create_at" content="应用的创建时间" /><meta name="weibo:app:update_at" content="应用的更新时间" />

说明:og:image参数对应weibo:app:image(缩略图)和weibo:app:full_image(原始大图),若需要区分缩略图与原始大图,请分别设定weibo:app:image和weibo:app:full_image,weibo标记会覆盖og标记。 

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
meta property=og标签含义及作 | SEO优化 |
从前端的角度出发 – web 调起 APP
HttpClient对URL编码的处理方式解惑! - Java - JavaEye论坛
利用Compass实现一个简单的搜索引擎[转贴]
php 获取页面中指定内容的类
页面自动跳转
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服