寫篇文章記錄一下這個問題好了
之前我轉貼網誌到FB時，發現每篇文章一轉過去
預覽圖都無法正確抓到封面圖片，也就是本篇網誌的第一張圖片
會去抓到我的G+顯圖還有文章裡面的幾張照片，但就是沒有封面圖片
不過轉貼到G+就沒問題，這個問題搞了我四五個小時，簡直崩潰
在找了一堆資料之後終於大概清楚是怎麼回事
基本上這問題是因為之前FB的頻繁的改版所引起的
這邊先簡單解說一下文章轉貼到FB的運作機制，還有FB是如何得知該文章的資訊
Meta tag & Open Graph Protocol簡介
首先從Meta tag先講起，這個標籤是放在HTML的<head> … </head>之間
Meta tag是一個用來提供網頁資訊的標籤，用來方便人或搜尋引擎辨識用
簡單來說，就像是一個商品的外包裝，上面會標示商品的內容還有相關資訊
給消費者知道，但是實際內容和這標示一不一樣又是另外一回事了
舉例來說，常見的Meta tag有，網頁標題、網頁敘述、封面圖片、作者等資訊
其實Meta tag主要是用來SEO(搜尋引擎最佳化)使用的，基本上你不用也沒關係
不會影響你網頁正常顯示，只會提供一些額外的資訊
詳細資訊可以參考: Meta標籤對SEO優化的作用？
而為何會提到這個呢? 這又要提到網站與FB溝通的機制了
FB自己有一套分析網頁的系統，稱為Open Graph Protocol
 |
| ↑Open Graph Protocol圖示 |
這系統可以精準的自動辨識網頁，自動產生og meta tag資訊給FB
主要的og tag有: og:title (標題), og:type (網頁類型), og:image (顯示圖), og:url (網址)…等
 |
| ↑og meta tag 於FB |
其實簡單來說，Meta tag和og meta tag是差不多的東西，只是一個是網頁端
一個是FB端，簡單來說轉貼流程如下:
將網誌貼到FB對話框 → FB的Open Graph Protocol開始抓取網頁資訊轉為og meta tag
→ 將資訊存入FB的快取(Cache) → 顯示預覽畫面
重點是我們可以在自己的網站之中加裝符合Open Graph Protocol語法的meta tag
來控制FB抓取網頁資訊的內容
問題何在?
其實問題是在某一次FB改版之後，規定og:image只能夠使用200*200以上的圖片
但是在Blogger之中，預設的文章縮圖大小只有75*75，因此FB會去抓其他圖使用
這點我們可以用FB Debugger來得知和驗證
以下圖片是用沒有加meta tag的文章去除錯的結果
 |
| ↑沒有設定meta tag的情況 |
可以仔細看一下紅框處，必須修正的開放式圖形警告，其實就是說Open Graph Protocol
以第一條來舉例，他的意思是你應該去要定義og:url，即使這個值可以從其他tag中找到
這樣的說明就表示說你沒有在你的網頁加入符合Open Graph Protocol語法的meta tag
再來看重點，第五條 og:image should be larger
他說你提供的og:image不夠大，至少要200*200以上，所以他抓了另一張圖來代替
這就是為何縮圖中沒有封面圖片，卻跑出個人顯圖或其他圖片的原因
如何解決?
其實一開始我搞得很複雜，後來發現其實很簡單，自己設定og:image即可
(其實用FB Debugger看還是會有那個錯誤，但是抓的到圖，很奇怪)
有兩種作法 (主要參考來源: 某日本部落格)
1. 找一張圖當作你”網站”的封面圖片，你不管貼哪篇文章，都會顯示一樣的圖
2. 各網頁使用該網頁的封面圖
※注意!
1. 如果是已經貼過FB的文章，不管用哪種方法都沒辦法改變
EX.在FB上貼過A文章，改過程式碼後又拿A文章的網址貼到FB看可不可以正常抓到封面圖
2. 因為FB有快取，你只要在對話框貼過，他的資訊就會被抓到快取裡面
如果你不清掉快取，你重貼一次網址他會直接使用快取裡面的資料，不會更新
EX.把A文張貼到FB之後，去修改程式碼再貼一次，不管你改啥結果都是一樣的
清除快取的方法: 把該文章的網址貼到FB Debugger點除錯即可
之前因為不知道這兩點根本狂做白工= =
3. 在經過一段時間之後我發現，如果網誌封面圖是直式的也會有問題，會抓不到縮圖
目前還不知道解決方法~_~
Step 1.
到blogger的後台 → 範本 → 右上角 備份/還原 先備份以防萬一
Step 2.
同樣在範本那邊，點編輯HTML進入編輯模式
Step 3.
在編輯模式下按下Ctrl+F開啟搜尋視窗，在搜尋視窗內輸入</head，按下Enter
會看到</head>被反黃標記起來
方法1.
在</head>上面加入以下程式碼
<meta property="og:image" content="你要使用圖片的網址" />這樣你不管貼哪篇文章，都會顯示一樣的圖
方法2.
在</head>上面加入以下程式碼
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
</b:if>
這樣你再轉貼文章之後，就可以正常抓到該篇文章的封面圖片
如果想要設定成文章使用封面圖片，網站使用指定圖片的話，可以改成
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
</b:if>
<b:else/>
<meta content='你要使用的網站圖片的網址' property='og:image'/>
</b:if>
這樣就可以文章使用封面圖，網站使用指定圖片
然後在搜尋<html，會看到以下的程式碼，黑色的部分應該原本就有(沒有就自行補上)
再把藍色的部分加進去
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://www.facebook.com/2008/fbml' xmlns:mixi='http://mixi-platform.com/ns#' xmlns:og='http://ogp.me/ns#'>以上這段似乎是XHTML用的語法，大概是讓你的網頁能夠使用FB OGP語法吧
其實內建就有支援，不過讓他完整一點，我之前試不加也沒差
這樣就完成了，到頭來發現意外的簡單啊!
其實以上只有增加圖片的meta tag，如果要完整一點的可以參考以下程式碼
在</head>上面改為加入以下程式碼
<!-- Begin Open Graph metadata -->
<b:if cond='data:blog.pageType == "item"'>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
</b:if>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='website' property='og:type'/>
<meta content='你要使用的網站圖片的網址' property='og:image'/>
</b:if>
<meta expr:content='"zh_TW"' property='og:locale'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<!-- End Open Graph metadata -->
這版本是有加入其他meta tag的版本，確保FB不會抓錯資訊這樣
紅色的部分就是前面講過控制圖片的部分，基本上完全一樣的程式碼
如果不想指定網站圖片的話，把
<meta content='你要使用的網站圖片的網址' property='og:image'/>
刪除即可
如果想要不管貼哪篇文章，都顯示一樣的圖，將
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
</b:if>改成
<meta content='你要使用的網站圖片的網址' property='og:image'/>
即可
加入以上meta tag資訊之後，用FB Debugger看會變成下圖
圖片不夠大的錯誤訊息還是有，不過其他警告訊息就消失了
下面也會把抓到的meta tag顯示給你看這樣
其實以結果看來修改方式很簡單，不過之前不懂語法亂試一通
又還因為FB奇怪的BUG搞得一直做白工，花了超多時間在這東西上面
正所謂事倍功半阿，不過也因此大概理解Meta tag還有OGP相關的應用以及語法
算是有學到一點東西吧!! (雖然好像也沒啥用)
FYR!!
記下等會兒研究!tks!
謝謝你的分享喔!
讚!!感謝分享
謝謝你的分享！很好用！