Sharing

網站管理員分享指南

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

本文件提供以下相關資訊：

開放社交關係圖標記

大多數內容是以網址分享至 Facebook，因此，請務必使用「開放社交關係圖」標籤來標示您的網站，以便控制內容在 Facebook 上的顯示方式。若要讓我們的網路爬蟲能正確分享您的網站，您的伺服器也必須使用 gzip 和 deflate 編碼。

如果沒有這些「開放社交關係圖」標籤，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:url 和 og:video:secure_url 標籤使用安全網址，讓您的影片符合以內建方式在動態消息中播放的條件。請注意，由於影響因素眾多，因此您的影片不保證會以內嵌方式播放。

中繼標籤 說明

og:video

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

og:video:url

等同於 og:video

og:video:secure_url

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

og:video:type

影片的 MIME 類型，可以是 application/x-shockwave-flash 或 video/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/jpeg、image/gif 或 image/png

og:image:width

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

og:image:height

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

3D 素材

請參閱 3D 貼文開放社交關係圖分享文件。

其他資源