微博元標記


微博元標記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.com。 .php/vid=93544804_2282043583_OB21THcwCDTK l1lHz2stqkP7KQNt6nni2K2u1anIAZaQ0/XM5GQY女孩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="視訊的網址" />
< 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; 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標記。


書（書）

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標記。



#
←
→