2016年3月31日

發現錯誤訊息不用擔心, Blogger 開始支援分享到 FB 顯示縮圖(以及相關的 Meta + OG 標記)

A+
blogger-fb-share-debug-error-og-url-發現錯誤訊息不用擔心, Blogger 開始支援分享到 FB 顯示縮圖最近處理一個 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 工具」都不會出現錯誤訊息,現在一定會出現以下的畫面:

blogger-fb-share-debug-error-og-url-1-發現錯誤訊息不用擔心, Blogger 開始支援分享到 FB 顯示縮圖

這訊息的意思是說,我們設定了重複的 "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" 的相關語法。

這一點的問題比較沒有那麼大,只是會出現下圖的異常現象而已:

blogger-fb-share-thumbnail-duplicate-發現錯誤訊息不用擔心, Blogger 開始支援分享到 FB 顯示縮圖

分享到 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 正悄悄地、逐步更新每個使用者的範本內容。除了本文以上提到的 og:urlog:image 這兩項參數之外,現在還多了 og:titleog:description 這兩項。

但也因為這樣,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 相關文章:

7 則留言:

  1. 嗨~這篇真的太有用處了,訂正了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張圖,但我目前都只有同一張圖然後重複,不知道這狀況有無相關教學文章可以學習的嗎?

    謝謝

    回覆刪除
    回覆
    1. 補充一下我的部落格文章(範例)

      http://wanghenrytw.blogspot.com/2016/03/lost-kingdom-433-arpg.html

      這篇遊戲文有許多遊戲截圖,但目前FB跟G+都只會抓第一張圖。

      有時候FB還會抓個2-3張,但基本上都是重複首圖~

      這部分就是我提到的問題3的補充資訊:) 在麻煩你了,謝謝^^

      刪除
    2. 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:如何讓縮圖顯示指定的那一個?」

      刪除
  2. 謝謝回復^^

    我看了一下我的範本,在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語法",是否就是複製貼上三行語法,就會顯示三個呢?

    回覆刪除
    回覆
    1. "這樣的語法中,【meta content='自訂圖片網址' itemprop='image' property='og:image'/>】是否就是你指出的"指定圖片"的語法?" → 是

      "多個og:image語法,是否就是複製貼上三行語法,就會顯示三個呢?" → 代表多三張圖可以選

      刪除
  3. 你好,我剛剛把最下面兩行看起來像是重複的語法刪除後

    ==========================
    meta expr:content='data:blog.postImageUrl' itemprop='image' property='og:image'/>
    b:else/>
    meta content='自訂圖片網址' itemprop='image' property='og:image'/>
    ==========================

    終於讓FB粉絲團抓了五張不一樣的圖!(刪除之前是抓重複兩張圖)

    不過這樣子我的首圖就抓不到了,這樣子是否為正常現象?

    有一好就沒兩好的一個狀態?

    回覆刪除
    回覆
    1. 其實,你可以評估一下,抓五張不一樣的圖,目的為何?額外設定的圖片,是分享每篇文章時都會固定出現的,跟該篇文章並不一定有關連性,我不清楚什麼情境適合這樣的操作方式。

      你要首圖也出現的話,直接把所有其他的自訂圖片語法參數,擺在首圖語法那一行的後面就好了。

      刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。