在"打造方便分享的網頁"裡我們了解了Facebook抓網頁字串的順序,今天我們來看看官方說明簡介,來看官方的建議編寫方式是什麼呢?

 

以下文章翻譯自Facebook Developers:Facebook Share/Specifying Meta Tags

原文/Facebook Developers|翻譯/邱煜庭 backtrue@gmail.com

文章出自於ePromotor網路行銷零元本鋪,轉貼請保留此訊息

設定便於Facebook分享的Meta Tags(Configuring Meta Tags for Facebook Share) 

在文章內頁增加"Facebook Share"按鈕(筆者按:Facebook內建的外掛程式,文章頂端有一些小小的按鈕,其中 facebook也是Facebook Share的一種,詳情請見官方說明),可以更方便網友將您的網站內容分享在他個人的塗鴉牆上。然而,您可以透過設定來控制,當使用者嘗試分享您的網站時,在他們的塗鴉牆上呈現的結果。您要做的,就是妥善的運用<meta><link>這兩個HTML元素(筆者按:老實說,<link>並不是W3C的推薦屬性,而且僅XHTML適用,我不是很愛,但不過還是繼續往下看下去吧)

當"Facebook Share"被按下去之後,欲被分享的網址會先被傳到Facebook的伺服器,伺服器上的程式就會開始觀看現有網頁HTML碼裡面的標籤,這些標籤將被用來做成分享的預覽結果。為了要呈現預覽結果,伺服器上的程式通常會找尋頁面的標題(title)主要內容圖片的摘要,如果頁面上有其他多媒體內容,這些多媒體檔案也將是預覽的重要元素。

2009-12-29 下午 04-46-35.png

基本標籤(Basic Tags)

為了要確定每一次的預覽結果都能正確的呈現,您需要在HTML碼中加入適當的Tags。如果你沒有增添正確的Tags,Facebook Share便會從<title>的標籤中的內容抓取成預覽結果中的標題;然後將<body>中的第一段文字當做預覽結果中的摘要(筆者按:這點我抱比較大的懷疑,因為有時候並不是第一段文字,不過官網都這樣說了),最後還會把頁面上可用的圖片做成列表供分享者選擇。

所以透過設定下列的meta tags,您就可以有效控制Facebook Share所呈現的標題、description及縮圖。

<meta name="title" content="title" />
<meta name="description" content="description " />
<link rel="image_src" href="thumbnail_image" / >

所以說,一個新聞的頁面的HTML就可以寫成:

<meta name="title" content="Smith hails 'unique' Wable legacy" />
<meta name="description" content="John Smith claims beautiful football is the main legacy of Akhil Wable's decade at the club. " />
<link rel="image_src" href="http://www.onjd.com/design05/images/PH2/WableAFC205.jpg" />

2010-05-31 更新:

在新版的 Open Graph推出之後,<meta name="title" content="title" />及<link rel="image_src" href="thumbnail_image" / >,以可被meta property="og:title"
及meta property="og:image"取代,詳細請見:
打造方便分享的網頁|Open Graph篇如果兩者並存,目前會以Open Graph的設定為主

筆者按:由於wiki原文沒有很明確的範例,因此我自己編寫了一個。網址為http://backtrue.hostse.com/facebook_share.html
下面是網頁原始檔:

2010-1-11 下午 04-15-35.png

網頁理論上是呈現:

2010-1-11 下午 04-20-23.png

但實際轉貼連結結果會呈現:

2010-1-11 下午 04-18-44.png

Meta標籤中的title及description是最低基本要求,請記得務必將他們加入到標籤中。

再來是縮圖呈現的問題,縮圖的原始檔長寬最小不得低於50 pixels,而長寬不得大於130x110 pixels;另外假使圖片的長寬比大於3,如126x39 pixels的話,縮圖也是不會被正確呈現的。這些不符合規定的圖片大小都會被重新縮放為合適的尺寸(筆者按:這也是為什麼我建議粉絲專頁大頭貼的建議尺寸,要設定為200x600 pixels。)

指定「媒體」類型(Specifying a "medium" Type)

你也可以透過標籤指定網頁內容所呈現的內容為何

<meta name="medium" content="medium_type" />

medium_type的值可為"audio", "image", "video", "news", "blog" and "mult"。(筆者按:我承認,我試了很多次,我還是搞不懂用與不用有何不同)

指定多媒體標籤(Specifying Multimedia Tags)

在預設當中,Facebook Share抓取的會是整個網頁的資訊,但如果你打造的頁面是專門放置影音、Flash、或是其他多媒體檔案,你也可以透過標籤的設定,讓Facebook Share自動的只抓多媒體資訊的部份。除了上面所提過的標籤,以下是您可以額外添加的:

影音檔(必備)

<meta name="title" content="page_title" />
<meta name="description" content="audio_description" />
<link rel="image_src" href="audio_image_src url (eg. album art)" />
<link rel="audio_src" href="audio_src url" />
<meta name="audio_type" content="Content-Type header field" />

影音檔(選用)

<meta name="audio_title" content="audio_title (eg. song name)" />
<meta name="audio_artist" content="audio_artist_name" />
<meta name="audio_album" content="audio_album_name" />

Flash(必備)

為了能讓Facebook Share正確的抓取到Flash的內容,你必須要提供下面的訊息:

<meta name="title" content="video_title" />
<meta name="description" content="video_description" />
<link rel="image_src" href="video_screenshot_image_src url" />
<link rel="video_src" href="video_src url"/>*
<meta name="video_height" content="video_height" />
<meta name="video_width" content="video_width" />
<meta name="video_type" content="application/x-shockwave-flash" />

其中:

  • image_src - 依然要遵守先前長寬比不得大於3的規則。
  • video_src - 是指定swf檔案的位置。
  • video_height - 高不得超過280 px
  • video_width - 寬不得超過 420 px
  • video_type - 通常為"application/x-shockwave-flash"

要注意的是:

1. Facebook Share僅支援swf格式。
2. 如果你是要直接轉貼多媒體檔案到Facebook上,您可能要在此提出申請,讓Facebook把你的網域(包含放置多媒體檔案的網域)加到白名單當中。

以上是官方說明的內容,供大家參考,請讓工程師們能夠有效的調整網站的程式碼。在Facebook還正熱的台灣,至少要打造讓人方便分享的網頁啊。雖然說標題跟摘要是可以自行修改或增添,但遇到這種網頁我就不喜歡拿來轉貼了。記住!人是懶惰的。

你有行銷需求嘛?沒有太多的預算可以幫公司做行銷規劃嘛?關鍵字不想找貴貴的代理商嘛?請洽網路行銷零元本鋪。
部落格 http://epromotor.pixnet.net
粉絲專頁 http://www.facebook.com/epromotor
聯絡信箱 backtrue@gmail.com

eProMotor 發表在 痞客邦 PIXNET 留言(3) 人氣()


留言列表 (3)

發表留言
  • 高雄室內設計
  • 哇..看到這些資料,感覺進入寶山了,版大真的是滿有料的,學問淵博ㄚ...受教了
  • 肚子是挺有料的~(游泳圈)

    eProMotor 於 2010/01/29 09:00 回覆

  • sun
  • 您好:
    請問在基本標籤(Basic Tags)中您有談到可以寫程式把文章前面的幾行字抓過去,那麼請問一下程式要如何寫?
    謝謝~
  • Nien-Yi Ho
  • 您好:

    我有個部落格是用wordpress架的,目前的facebook share按鈕也遇上了無法顯示縮圖的問題。http://blog.tripwon.com/2011/07/19/6-pet-friendly-beaches/


    想請問一下,是在header中貼入下面這些code就能解決的了嗎?
    <meta name="title" content="title" />
    <meta name="description" content="description " />
    <link rel="image_src" href="thumbnail_image" / >
  • 如果不會寫code的話,建議可以安裝Facebook Page Publish這套外掛,簡單解決 = =b

    eProMotor 於 2011/07/22 01:25 回覆