網站管理員的分享指南

本文件說明如何優化用戶分享至 Facebook 的網站託管內容,無論是從桌面版、流動版網站或流動應用程式分享的內容,皆盡在其中。

本文件提供下列資訊:

開放式圖表標記

大多數內容是以網址方式分享至 Facebook,因此,務必使用「開放式圖表」標籤來標記您的網站 HTML,以便管理內容在 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 中有錯誤,您可以使用錯誤測試工具更新您的內容。請參閱更新物件以了解詳情。

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

  1. 開啟您的瀏覽器。
  2. 將用戶代理程式改成與 FB 用戶代理程式一致。若要進一步了解如何變更用戶代理程式,請參閱 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 帖子開放式圖表分享文件