如何讓Facebook正確抓取Blogger文章的縮圖 / How to fix Facebook Post Thumbnail Issue in Blogger

4月 01, 2016 Blogger 3 Comments Edit Copy Download

會不會覺得每次在Facebook上看到Blogger文章時，總是會顯示很奇怪的圖片？這就是Blogger沒有告訴Facebook正確的圖片內容，所以Facebook只好用它內建的演算法隨便抓。BLOGGERLAB介紹了如何解決這個問題，我也在這邊跟大家分享一下這個好方法。

Facebook如何抓取圖片 / How Facebook Select Post Thumbnail?

根據stackoverflow中的說明，Facebook使用了他的Open Graph Tags來剖析網頁，首先會找網頁中<meta>標籤property為og:image的資料。例如這個樣子：

<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj71J0VzxmySQ_Yz2burFaYLHlcmhSU1TVGllis5Ck3OqwES8nqdgg11kphuHoCZx0L1mY45ijb5LuSmSggjham0EvhmGgaAxIv7iapFL11PGnYpuGmbOtn5aJD0DJ_Tzt40TkcKw/s72-c/image_thumb%25255B4%25255D.png?imgmax=800' property='og:image'/>

如果找不到的話，接下來Facebook會用舊方法來找<link>標籤，像是：

<link rel="image_src" href="/myimage.jpg"/>

如果還是沒有，那就會從網頁中挑選圖片。挑選圖片的規則是：圖片大小至少長寬大於200px，最大比例是3:1，必須是PNG、JPEG或GIF格式。

令人值得慶幸的是，Blogger內建了「data:blog.postImageUrl」的資料，可以自動幫你從文章中自動找出一張圖片。我們就可以用這個特性，設置<meta>跟<link>標籤來告訴Facebook要找這張圖片。

修改Blogger範本 / Modify Blogger’s Template

接下來我們就來修改Blogger範本，為它加上標籤。

請開啟Blogger的「範本」，進入「編輯HTML」。

在編輯器上按「Ctrl+F」，叫出搜尋工具。輸入「</head>」，按下「Enter」，找到</head>標籤。

然後接下來要在</head>標籤上加上以下的程式碼：

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='article' property='og:type'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<link expr:href='data:blog.postImageUrl' rel='image_src'/>
<b:else/>
<meta content='YOUR_LOGO_URL' property='og:image'/>
<link href='YOUR_LOGO_URL' rel='image_src'/>
</b:if>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='og:description'/>
</b:if>

其中「YOUR_LOGO_URL」是用於非文章型頁面、或是文章中沒有圖片時，你可以自訂要一個固定給Facebook抓取的圖片。例如我的圖片：http://lh3.ggpht.com/puddingchen.35/SPHeS5SqyCI/AAAAAAAAE9E/Z950slGSW98/s1600-h/pudding%28500px%29%5B7%5D.gif

修改完成之後就按下「儲存範本」吧。

成果 / Result

立刻來試試看，貼一個Blogger的文章網址到Facebook看看：

• 陪我一路走來的倫飛Stylebook 10D筆電
  http://blog.pulipuli.info/2011/12/stylebook-10d.html

果然抓到了文章中的圖片，大功告成！

Facebook圖片快取的問題 / Facebook Cache Thumbnail Issue

必須注意的是，Facebook會快取特定文章的圖片。因此像是最近在Facebook上貼過的網址，即使我已經改過標籤，告訴Facebook可以抓取正確的網址，Facebook依然會先抓取已經儲存過的快取圖片。

已經貼過的文章大概就沒辦法修改了，至少未來的文章，包括這一篇，應該都會正常運作吧。