微博元标记

微博元标记 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、定义方式:

在你的网站页面的<head>标签内,添加<meta>标签

HTML
<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中即可,下面列举两个部署实例进行说明


1、视频对象Meta代码实例:

将如下<meta>标签,方式网页的<head>标签内。

HTML
//必填
<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 基础属性,即:


HTML
<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代码格式实例如下:


HTML
//必填
<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="用户的更新时间" />


2、网页对象Meta代码实例:

将如下<meta>标签,方式网页的<head>标签内。

HTML


//必填
<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
HTML

weibo:video:embed_code
B
HTML
weibo:embed_code

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


单个属性的多值定义

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


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


示例:


HTML
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)详细属性表

各个类型的对象(object)下所含属性对照表:


网页(webpage)

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" />


代码示例:


HTML
//必填
<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)

代码示例:

QQ截图20170210150706.png

HTML
//必填
<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)

QQ截图20170210151254.png

代码示例:


HTML
//必填
<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)

QQ截图20170210151237.png

代码示例:


HTML

//必填
<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)

QQ截图20170210151222.png

代码示例:


HTML
//必填
<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)

QQ截图20170210151209.png

代码示例:


HTML
//必填
<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="图片的更新时间" />


地点(place)

QQ截图20170210151157.png

代码示例:


HTML
//必填
<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)

QQ截图20170210151144.png

代码示例:


HTML
//必填
<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)

QQ截图20170210151132.png

代码示例:


HTML
//必填
<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)

QQ截图20170210151120.png

代码示例:


HTML
//必填
<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="游戏的创建时间" />

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


应用(app)

QQ截图20170210151106.png

代码示例:


HTML
//必填
<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标记。