[Facebook]facebook 的share設定,指定title, description, url, thumbnail (use Open Graph protocol)

2013-08-20

16891
0
Facebook
2013-08-22

摘要:[Facebook]facebook 的share設定,指定title, description, url, thumbnail (use Open Graph protocol)

當我們share一個連結到Facebook網站時常常會出現不如我們預期的資料呈現情況，請看下面的情境

1.看到網頁長下面的樣子

2.將連結分享到Facebook去後自動抓出的結果

WTF!!!（腦袋裡出現下面的圖）

查了一下原來要透過Open Graph protocol才可以更精準的設定這些網頁資訊給Facebook擷取

以下是針對Facebook, Google+, Twitter整理完的設定


<html  xmlns:og="http://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml">
 <head>
<!-- for Google -->
<meta name="description" content="test" ></meta>
<meta name="keywords" content="test" ></meta>

<meta name="author" content="test" ></meta>
<meta name="copyright" content="test" ></meta>
<meta name="application-name" content="test" ></meta>

<!-- for Facebook -->          
<meta property="og:title" content="test" ></meta>
<meta property="og:type" content="article" ></meta>
<meta property="og:description" content="test" ></meta>
<meta property="og:image" content="http://images.uncyc.org/zh-tw/thumb/1/14/Hello_Loser.jpg/180px-Hello_Loser.jpg" ></meta>
<meta property="og:url" content="http://test.com.tw" ></meta>

<!-- for Twitter -->          
<meta name="twitter:card" content="summary" ></meta>
<meta name="twitter:title" content="test" ></meta>
<meta name="twitter:description" content="test" ></meta>
<meta name="twitter:image" content="" ></meta>	
 </head>
 <body>
 ...
 </body>
<html>

上面如果有看不懂的屬性設定就去官網看看摟，寫得蠻詳細的

另外，我們也可以透過Facebook的debug來幫我們檢測一下網址的meta是否設定有問題或是異常

只要在檢測的地方貼上網址的連結後進行檢測即可看到結果，下面是修改前的結果：