給網站管理員的分享功能指南

本文件說明如何最佳化用戶分享至 Facebook 的網站代管內容,無論是從桌面版、行動版網頁或行動應用程式分享的內容,皆囊括在內。

本文件提供下列資訊:

開放社交關係圖標記

大多數內容是以網址方式分享至 Facebook,因此,請務必使用「開放社交關係圖」標籤來標示您的網站,以便控制內容在 Facebook 上的顯示方式。

如果沒有這些標籤,Facebook 網路爬蟲會使用內部啟發學習法盡可能猜測內容的標題、說明和預覽圖像。使用「開放社交關係圖」標籤明確指定此資訊,以確保在 Facebook 上呈現最高品質的貼文。

以下範例使用「開放社交關係圖」標籤設定內容格式來最佳化在 Facebook 上的顯示方式:

標記範例

例如,以下範例顯示如何使用 og:type="article" 以及許多其他屬性來標示文章、動態消息或部落格貼文:

<meta property="og:url"                content="http://www.nytimes.com/2015/02/19/arts/international/when-great-minds-dont-think-alike.html" />
<meta property="og:type"               content="article" />
<meta property="og:title"              content="When Great Minds Don’t Think Alike" />
<meta property="og:description"        content="How much does culture influence creative thinking?" />
<meta property="og:image"              content="http://static01.nyt.com/images/2015/02/19/arts/international/19iht-btnumbers19A/19iht-btnumbers19A-facebookJumbo-v2.jpg" />

這些屬性包含與文章相關的描述性中繼資料,我們特別希望在用戶分享文章時呈現。

基本標籤

這些是您應該對所有內容類型使用的最基本的中繼標籤:

標籤 說明

og:url

您粉絲專頁的標準網址。此網址應該沒有任何修飾,沒有工作階段變數、用戶識別參數或計數器。對此網址的按讚和分享應該匯總到此網址。例如,行動網域網址應該指向桌面版網址作為標準網址,以匯總粉絲專頁各種版本的按讚和分享。

og:title

您文章的標題,不包含網站名稱等任何品牌內容。

og:description

內容的簡短說明,通常為 2 到 4 個句子。此簡短說明會顯示於 Facebook 貼文的標題下方。

og:image

用戶將內容分享至 Facebook 時顯示的圖像網址。請參閱以下內容取得詳細資訊,並查看我們的最佳作法指南以深入瞭解如何指定高畫質預覽圖像。

fb:app_id

若要使用 Facebook 洞察報告,您必須在粉絲專頁上新增應用程式編號。洞察報告可讓您從 Facebook 檢視您網站的流量分析。在您的應用程式主控板中尋找應用程式編號。


您可能還要新增兩個額外的標籤,以拓展內容的傳播範圍並促成更多互動:

標籤 說明

og:type

您內容的媒體類型。此標籤會影響您的內容在動態消息中的顯示方式。 如果您未指定類型,將預設為 website。每個網址都應該是單一物件,因此不可能有多個 og:type 值。請到物件類型參考資料中尋找完整的物件類型清單

og:locale

支援的地區。 預設為 en_US。如果您有其他可用的語言翻譯,您也可以使用 og:locale:alternate。請參閱我們的本地化文件以深入瞭解我們支援的地區。


您可以在我們的物件屬性參考資料取得完整的標準物件屬性清單。

測試標記

若要查看您的標記在 Facebook 網路爬蟲的顯示狀況,請在分享偵錯工具中輸入網址。該工具會顯示網路爬蟲抓取的中繼標籤以及任何錯誤或警告。

偵錯工具還會觸發抓取您的粉絲專頁,因此,如果 HTML 中有錯誤,您可以使用偵錯工具更新內容。請參閱更新物件以瞭解詳情。

媒體內容類型

如果您的內容包含音訊、影片或地點資訊,可以新增其他標記。請參閱我們的物件類型參考資料中列出的所有標準物件屬性。

影片

所有內容類型都可使用 og:video。本節說明如何使用額外的標籤,讓影片在 Facebook 上呈現最佳效果。Facebook 支援 mp4 和 Flash 影片。

請對 og:video:urlog:video:secure_url 標籤使用安全網址,讓您的影片符合以內嵌方式在動態消息中播放的條件。請注意,由於影響因素眾多,因此您的影片不保證會以內嵌方式播放。

中繼標籤 說明

og:video

影片的網址。如果您希望影片在動態消息中以內嵌方式播放,請盡可能使用「https://」形式的網址。

og:video:url

等同於 og:video

og:video:secure_url

影片的安全網址。即使您已在 og:video 中設定安全網址,仍須加入此標籤。

og:video:type

影片的 MIME 類型,可以是 application/x-shockwave-flashvideo/mp4

og:video:width

以像素表示的影片寬度,影片必須設定此屬性。

og:video:height

以像素表示的影片高度,影片必須設定此屬性。

og:image

用於指定「動態消息」中高畫質預覽的圖像


圖像

如果內容包含超過一張圖像,請使用這組屬性。如需 og:image 最佳使用方式的相關指引,請參閱分享最佳作法

中繼標籤 說明

og:image

圖像網址。發佈圖像後若要更新,除了更新圖像之外,請同時變更圖像網址。由於系統是依照網址快取圖像,如果沒有變更網址,圖像將無法更新。

og:image:url

等同於 og:image

og:image:secure_url

「https://」形式的圖像網址

og:image:type

圖像的 MIME 類型,可為 image/jpegimage/gifimage/png

og:image:width

以像素表示的圖像寬度。請務必指定圖像的高度與寬度,以確保圖像在第一次分享時便能夠正確載入。

og:image:height

以像素表示的圖像高度。請務必指定圖像的高度與寬度,以確保圖像在第一次分享時便能夠正確載入。