Facebook Open Graph Setting in Blogger

Open Graph Protocol 是 Facebook 發展的 meta data 的建立規範，這邊僅提及文章（Article）的應用。

當部落格文章分享到 Facebook 時，Facebook 會讀取 Open Graph 的標籤資料來產生的文章預覽，包含縮圖以及摘要。若沒有該些標籤，Facebook 會轉而分析文章內容，產生合適的文章預覽。若想在 Facebook 文章分享中，產生自己期望的預覽，得在網頁中加入 Open Graph 的標籤定義，讓 Facebook 根據該標籤產生文章預覽。

Open Graph Protocol

首先標示 HTML 文件是符合 Open Graph 規範，使用 HTML5：

<html prefix='og: http://ogp.me/ns#'>

或是使用舊的 HTML 標籤：

<html xmlns:og='http://ogp.me/ns#'>

之後在 head 與 head 間的放置屬性標籤：

<meta property='og:type' content='article' />
<meta property='article:author' content='作者網站連結'/>
<meta property='og:title' content='文章標題' />
<meta property='og:url' content='文章網址' />
<meta property='og:image' content='文章附圖' />
<meta property='og:description' content='文章摘要'/>
<meta property='og:site_name' content='網站名稱'/>

一個較為完整 HTML 範例：

<html xmlns:og='http://ogp.me/ns#'>
<head>
   <title>這是範例</title>
   <meta property='og:type' content='article' />
   <meta property='article:author' content='作者網站連結'/>
   <meta property='og:title' content='這是範例' />
   <meta property='og:url' content='http://blog.twsiyuan.com/example.html'/>
   <meta property='og:image' content='http://blog.twsiyuan.com/example.jpg'/>
   <meta property='og:description' content='這是範例的說明'/>
   <meta property='og:site_name' content='我的網站'/>
   ...
</head>
<body>
   ...
</body>
</html>

若 article:author 設定為自己的臉書網址，例如 https://www.facebook.com/twsiyuan，且在追隨者頁面設定中，設定「公開」任何人都可以追蹤你時，文章分享時的作者連結，就會指向臉書的帳號，例如下圖的範例。

分享文章中的作者連結到個人臉書頁面

設定成公開的追蹤者設定

Blogger 設定

在 Blogger 範本裡，若有使用下列的 Blogger 語法來產生系統預設的 headers，那麼 og:url 以及 og:image 將會被自動加入，不需要修改範本再額外設定。其中 og:image 將會是文章中第一張圖的縮放版，該圖為 Facebook 專屬的尺寸大小 1200 x 630。

<b:include data='blog' name='all-head-content'/>

設定僅為文章加入對應的 og tags，所有的屬性資料設定為該文章的內容，以下範例：

<meta property='og:site_name' expr:content='data:blog.title'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
   <meta property='og:type' content='article'/>
   <meta property='og:title' expr:content='data:blog.pageName'/>
   <b:if cond='data:blog.metaDescription'>
      <meta property='og:description' expr:content='data:blog.metaDescription'/>
   <b:else/>
      <meta property='og:description' expr:content='&quot;Read article about &quot; + data:blog.pageName + &quot; on &quot; + data:blog.title + &quot;&quot;'/>
   </b:if>
</b:if>

其中 data:blog.metaDescription 是指網誌文章的「搜尋說明」文字，若該文章沒有特別填寫搜尋說明，就改用下方的替代文字。

補充：搜尋說明欄位預設不可編輯，可參考下圖自行設定開啟功能。

設定，搜尋偏好設定，中繼標記，詳細介紹，啟用搜尋說明

Blogger 其實還有不同種類的頁面，例如首頁（index）、網頁（static_page）或是庫存頁面（archive），但上述範例僅僅為文章（item）類型加入對應的 og tags 而以。因此以下提供能對 Blogger 所有種類的頁面，加入對應 og tags 的範例程式碼，放置在 <head></head> 中：

<!--Open Graph Begin-->
<meta property='og:site_name' expr:content='data:blog.title'/>
<b:switch var='data:blog.pageType'>
<b:case value='item'/>
   <meta property='og:type' content='article'/>
   <meta property='article:author' content='你的個人網站'/>
   <meta property='og:title' expr:content='data:blog.pageName'/>
   <b:if cond='data:blog.metaDescription'>
      <meta property='og:description' expr:content='data:blog.metaDescription'/>
   <b:else/>
      <meta property='og:description' expr:content='&quot;Read article about &quot; + data:blog.pageName + &quot; on &quot; + data:blog.title + &quot;&quot;'/>
   </b:if>
<b:case value='index'/>
   <meta property='og:type' content='blog'/>
   <meta property='og:title' expr:content='data:blog.title'/>
   <meta property='og:description' expr:content='data:blog.metaDescription'/>
   <meta property='og:image' content="首頁預設的圖片位置" />
<b:case value='archive'/>
   <meta property='og:type' content='website'/>
   <meta property='og:title' expr:content='&quot;&quot; + data:blog.pageName + &quot; on &quot; + data:blog.title'/>
   <meta property='og:description' expr:content='&quot;This is an archive page &quot; + data:blog.pageName + &quot; on &quot; + data:blog.title + &quot;&quot;'/>
<b:case value='static_page'/>
   <meta property='og:type' content='website'/>
   <meta property='og:title' expr:content='data:blog.pageName'/>
   <b:if cond='data:blog.metaDescription'>
      <meta property='og:description' expr:content='data:blog.metaDescription'/>
   <b:else/>
      <meta property='og:description' expr:content='&quot;This is an static page &quot; + data:blog.pageName + &quot; on &quot; + data:blog.title + &quot;&quot;'/>
   </b:if>
</b:switch>
<!--Open Graph End-->