最近處理一個 case 需要幫忙設定 Facebook 的 Meta 標籤，也就是讓 Blogger 文章分享到 FB 時，可以正常出現縮圖、摘要...等等資訊，結果很意外的，使用「官方 Debug 工具」時，頻頻出現以下錯誤訊息："Errors That Must Be Fixed More Than One OG URL Specified: Object at URL 'http://xxx.com/' of type 'article' is invalid because it specifies multiple 'og:url' values:..."
這樣的訊息是最近才開始出現，查了一陣子才知道是 Blogger 預設的範本內容有了變更，開始正式支援 FB 分享的縮圖顯示。
不過這件事其實有好有壞，究竟是怎麼回事，請看本文的說明。
一、Blogger 內建 FB Meta 語法
1. FB Meta 語法
在過去，Blogger 文章分享到 Facebook 時，只要沒有刻意進行 FB 的 Meta 語法相關設定，那麼顯示的文章縮圖、標題、摘要等等資訊，八成會不如預期。
偏偏這件事又非常重要，如果不能確保文章能出現 "大尺寸縮圖"、"詳細的文章摘要" 等資訊，那麼在 FB 的傳播效果一定會大打折扣。
因此所有 Blogger 站長們，請務必詳讀這篇「分享文章到 Facebook 的 Meta 設定﹍縮圖+標題+摘要+作者資訊」來進行設定、及瞭解各種排錯的方法。
2. FB debug 錯誤訊息
不過有按照前述教學設定過 FB meta 語法的站長們，最近一定會發現，怎麼以前「FB debug 工具」都不會出現錯誤訊息，現在一定會出現以下的畫面：
這訊息的意思是說，我們設定了重複的 "og:url"，要求更正這項設定。
於是 WFU 在範本裡拼命搜尋，但是怎麼找都只看到自己設定的一行 "og:url"，沒有看到重複的語法，那麼問題到底出在哪裡呢？
最後想到可以檢視「網頁原始碼」，結果真的找到了兩個 "og:url"，這代表什麼含意呢？
3. Blogger 更新範本語法
原來 Blogger 最近悄悄地在範本中內建了 "og:url" 相關的 Meta 設定，而且包覆在 Blogger 語法之中，所以在範本中是搜尋不到的。
而且詳細檢查的結果，Blogger 一共內建了兩行與 FB 分享有關的 Meta 語法：
- 一個是 "og:url"
- 另一個是 "og:image"
因此 Blogger 算是很貼心的，偷偷的更新了範本的內容。這也就是說，我們在不用進行任何設定的情況下，Blogger 文章分享到 FB 時，也能出現縮圖。
二、重複的 og:url
Blogger 的努力更新其實 WFU 都有看到，不過
Blogger 的貼心壞就壞在，他默默的做事但是不公告，所以沒有人知道這樣的事，才會導致已經安裝過 FB Meta 語法的使用者，出現了重複的 "og:url"。
因此，曾看教學安裝過 FB 相關 Meta 語法的讀者，請在範本中搜尋這一行：
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>找到後將他刪除，那麼在 FB debug 工具就不會看到錯誤訊息了。
三、重複的 og:image
如前面提到的，重複的不止有 "og:url"，還有 "og:image"，所以曾安裝過 FB 相關 Meta 語法的讀者，Blogger 範本中也會多了一行 "og:image" 的相關語法。
這一點的問題比較沒有那麼大，只是會出現下圖的異常現象而已：
分享到 FB 後，由於設定了多個 "og:image"，如圖中紅框標示，會出現圖片切換按鈕。
但實際上重複的兩行 "og:image" 由於指向同一張圖片，所以不管怎麼切換也只會顯示同樣的圖片，也就是多了個沒有作用的功能而已。
那麼這部分就看讀者了，如果覺得礙眼的話，可以在範本中移除所有跟 "og:image" 相關的語法，例如類似下面這行：
<meta expr:content='data:blog.postImageUrl' itemprop='image' property='og:image'/>四、重複的 og:description
2016.9.21 新增內容：最近有多位讀者反應，文章分享到 FB 時，摘要敘述內容跟以前不太一樣了。根據不同的案例，摘要敘述有的會抓到奇怪的程式碼，有的會從文章一開始的內容開始擷取。
根據這陣子的調查結果，以及從時間點來分析，Blogger 正悄悄地、逐步更新每個使用者的範本內容。除了本文以上提到的
但也因為這樣，Blogger 自動幫我們設定了這些參數後，反而讓使用者失去彈性，在 FB 分享文章時，無法控制摘要敘述出現的內容。
要解決這個現象，請按以下步驟進行：
1. 在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。
2. 會出現這個現象，應該是在範本中早已設定了 FB 相關的 Meta 標籤，請在範本自行找到你設定 FB 分享的 Meta 相關語法，如不清楚的話可參考「分享文章到 Facebook 的 Meta 設定﹍縮圖+標題+摘要+作者資訊」。
3. 請到後台「範本」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋以下字串：
<b:include data='blog' name='all-head-content'/>這段內容儲存了所有 Blogger 新增的 Meta 標籤與 OG 參數。
請 "剪下" 這段字串。(不是複製喔)
4. 然後將剪下的這些字串，貼到範本中第 2 點，你設定 FB 分享的 Meta 語法的前一行，儲存後就可以了。
以上作法的原理是，利用改變範本內容的執行順序，可以讓你設定的 Meta 語法覆蓋掉 Blogger 官方的 Meta 語法，而修正原本發生的問題。
五、小結
因為 FB 完整的 Meta 語法設定，不只本文提到的這些內容，Blogger 的這項更新可以讓不熟悉語法的使用者，在分享文章到 FB 時，能夠有基本的縮圖、摘要等效果呈現。
但如果想完整呈現正確的標題、摘要、作者名稱等等資訊，那麼還是請參考「分享文章到 Facebook 的 Meta 設定﹍縮圖+標題+摘要+作者資訊」來進行，才能得到最好的效果。
更多 Facebook 相關文章：
嗨~這篇真的太有用處了，訂正了FB偵錯那邊的問題之後終於不會有礙眼的錯誤提示^^
回覆刪除不過目前有3個跟本文相關的問題想請問一下^^
1.有關og:image的部分在文內有提到將
meta expr:content='data:blog.postImageUrl' itemprop='image' property='og:image'/>
移除，那不知道移除這一段語法是否會變成
A-預覽圖只有一張?
B-完全沒有預覽(大)圖?
C-會自動偵測文章內的多張圖片?
D-其他?
2.在FB DEBUGGER這邊原本會跳出錯誤的提醒，這部分的錯誤有影響甚麼嗎? 因為感覺在貼上FB等社群時都還滿正常的?
3.曾看到有些文章FB預覽圖會自動抓文章內的3-4張圖，但我目前都只有同一張圖然後重複，不知道這狀況有無相關教學文章可以學習的嗎?
謝謝
補充一下我的部落格文章(範例)
刪除http://wanghenrytw.blogspot.com/2016/03/lost-kingdom-433-arpg.html
這篇遊戲文有許多遊戲截圖，但目前FB跟G+都只會抓第一張圖。
有時候FB還會抓個2-3張，但基本上都是重複首圖~
這部分就是我提到的問題3的補充資訊:) 在麻煩你了，謝謝^^
1. 因為 blogger 內建 og:image 的語法了，所以你有沒有新增 og:image，都會自動抓到文章縮圖，那麼你要不要移除自己新增的 og:image 都可以，如同文章中的說明
刪除2. 如果是本文描述的狀況，og:url 的錯誤訊息沒有影響，如文章所述
3. http://www.wfublog.com/2015/04/facebook-meta-og-setting-thumbnail-title-description-author.html → 「Q4：如何讓縮圖顯示指定的那一個？」
謝謝回復^^
回覆刪除我看了一下我的範本，在og這一塊好像血的方式跟你不太一樣?
====
!-- Facebook og 與 Google meta 設定 begin-->
meta expr:content='data:blog.title' property='og:site_name'/>
meta expr:content='data:blog.metaDescription' itemprop='description' property='og:description'/>
b:if cond='data:blog.pageType == "index"'>
meta content='blog' property='og:type'/>
meta expr:content='data:blog.title + "｜WangHenry｜遊戲與3C部落格｜"' property='og:title'/>
meta content='圖片網址' itemprop='image' property='og:image'/>
b:else/>
meta content='article' property='og:type'/>
meta expr:content='data:blog.pageName + "｜WangHenry｜遊戲與3C部落格｜"' property='og:title'/>
meta content='https://www.facebook.com/Game.3C.LaSai.WangHenry/info' property='article:author'/>
meta expr:content='data:blog.pageName' itemprop='keywords'/>
b:if cond='data:blog.postImageUrl'>
meta expr:content='data:blog.postImageUrl' itemprop='image' property='og:image'/>
b:else/>
meta content='自訂圖片網址' itemprop='image' property='og:image'/>
/b:if>
/b:if>
!-- Facebook og 設定 end
======
這樣的語法中，【meta content='自訂圖片網址' itemprop='image' property='og:image'/>】是否就是你指出的"指定圖片"的語法?
且，文章內Q4指出的"多個og:image語法"，是否就是複製貼上三行語法，就會顯示三個呢?
"這樣的語法中，【meta content='自訂圖片網址' itemprop='image' property='og:image'/>】是否就是你指出的"指定圖片"的語法?" → 是
刪除"多個og:image語法，是否就是複製貼上三行語法，就會顯示三個呢?" → 代表多三張圖可以選
你好，我剛剛把最下面兩行看起來像是重複的語法刪除後
回覆刪除==========================
meta expr:content='data:blog.postImageUrl' itemprop='image' property='og:image'/>
b:else/>
meta content='自訂圖片網址' itemprop='image' property='og:image'/>
==========================
終於讓ＦＢ粉絲團抓了五張不一樣的圖!(刪除之前是抓重複兩張圖)
不過這樣子我的首圖就抓不到了，這樣子是否為正常現象?
有一好就沒兩好的一個狀態?
其實，你可以評估一下，抓五張不一樣的圖，目的為何？額外設定的圖片，是分享每篇文章時都會固定出現的，跟該篇文章並不一定有關連性，我不清楚什麼情境適合這樣的操作方式。
刪除你要首圖也出現的話，直接把所有其他的自訂圖片語法參數，擺在首圖語法那一行的後面就好了。
這2天開始發現，FB專頁分享blogger及痞客邦文章，無法自動跳出縮圖，而且是連1張縮圖都沒有，然而如果是用手機在FB專頁發文，就能正常顯示縮圖，請問最近FB專頁有什麼困難嗎？
回覆刪除請參考 https://www.wfublog.com/2015/04/facebook-meta-og-setting-thumbnail-title-description-author.html → Q7：更改後 FB 還是顯示原來的資訊？
刪除使用官方偵錯工具來更新快取資料
都試過了那些程式碼都無效，已經過期了，最奇怪的是如果是用個人FB帳號貼文一樣正常抓第一張圖為縮圖，但是FB專頁貼文無論什麼方法，都沒有縮圖，就算有縮圖也跟文章內文無關，甚至還抓到FB專頁的大頭照。而且之前都正常，最近這2天才開始出現奇怪的狀況
刪除