Quantcast
Channel: WFU BLOG
Viewing all articles
Browse latest Browse all 571

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

$
0
0
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'/>


四、小結


因為 FB 完整的 Meta 語法設定,不是只有 "og:url"、
"og:image"這兩項,Blogger 的這項更新可以讓不熟悉語法的使用者,在分享文章到 FB 時,能夠有基本的縮圖效果呈現。

但如果想完整呈現正確的標題、摘要、作者名稱等等資訊,那麼還是請參考「分享文章到 Facebook 的 Meta 設定﹍縮圖+標題+摘要+作者資訊」來進行,才能得到最好的效果。


更多 Facebook 相關文章:

Viewing all articles
Browse latest Browse all 571

Trending Articles