:::

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

4月 01, 2016 3 Comments Edit Copy Download

image

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


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

2016-04-01_192333

根據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範本,為它加上標籤。

2016-04-01_195244

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

image

在編輯器上按「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

image

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

成果 / Result

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

2016-04-01_200611

果然抓到了文章中的圖片,大功告成!

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

image

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

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

總共3 則留言 ( 我要發問 , 隱藏留言 顯示留言 )

  1. 修正了這篇文章的一些問題
    不要用data:blog.postThumbnailImageUrl
    而是用data:blog.postImageUrl才對

    回覆刪除
  2. 快取的問題可以用這個網址,讓他偵錯
    讓他重新再抓一次圖~就OK了XD
    https://developers.facebook.com/tools/debug/

    回覆刪除