網站管理員的分享指南

本文件說明如何優化用戶分享至 Facebook 的網站託管內容,無論是從桌面電腦、流動版網頁或流動應用程式分享的內容都包括在內。

本文件提供有關以下內容的資訊:

開放式圖表標記

大多數內容都是以網址形式分享至 Facebook,因此,你務必使用「開放式圖表」標籤來標記您的網站,才能掌控您的內容如何在 Facebook 顯示。為了讓我們的網絡爬蟲正確分享您的網站,您的伺服器亦必須使用 gzipdeflate 編碼。

如果沒有這些「開放式圖表」標籤,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 中確實有錯誤,您可以使用偵錯工具來更新您的內容。詳情請參閱更新物件

測試 Facebook 用戶代理程式有否得到正確處理

  1. 開啟您的瀏覽器。
  2. 將用戶代理程式改成與 Facebook 用戶代理程式一致。若要進一步了解如何更改用戶代理程式,請參閱 http://osxdaily.com/2013/01/16/change-user-agent-chrome-safari-firefox/
    • 「開發」選單 >「用戶代理」>「其他」
    • 將用戶代理程式設定為:facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)
  3. 載入有問題的網址。
  4. 將用戶代理程式設定為流動瀏覽器的用戶代理程式,以 Safari - iPhone 為例:
    「開發」選單 >「用戶代理」>「Safari — iOS 10 — iPhone」
  5. 載入有問題的網址。
  6. 如果是用戶代理程式問題,您會在第 5 步而非第 3 步正確載入網頁。

媒體內容類型

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

影片

您可以針對所有內容類型使用 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

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

3D 素材

請參閱我們的 3D 帖子開放式圖表分享文件