8 月06
[WordPress]一招解決,讓Facebook從此可以正確抓到部落格文章圖片

讓Facebook從此可以抓到部落格文章正確圖片(請注意:本文只適合WordPress自架網站)

不知道大家有沒有這樣的困擾?但工作熊可是為了臉書(Facebook)抓不到部落格的正確圖片而傷腦不已,因為工作熊的某些部落格文章網址貼到臉書時總是會出現不是工作熊要的圖片問題,更尷尬的是臉書還經常抓到文章中的「廣告圖片」來當成了文章的代表圖片,後來居然用一招完全解決。

解決「臉書(Facebook)抓不到部落格的正確圖片」的方法就是安裝【All in one SEO】外掛,但不是外掛安裝了就可以,還得啟動其【社交網路中繼資料(Social Meta)】功能並且設定臉書圖片語法【OG:Image】才可以,因為【All in one SEO】預設會關閉這個功能。

步驟一、
安裝好【All in one SEO】外掛後,點擊左邊欄功能表的【All in one SEO】,在點擊【功能管理】。

Facebook_catch_correct_picture_all_in_One_SEO01

步驟二、
在【All in one SEO】的「功能管理」下面找到【社交網路中繼資料】功能塊,如果用的是英文版,就找【Social Meta】,然後點按其下面的【Activate】來啟動功能。

Facebook_catch_correct_picture_all_in_One_SEO02

步驟三、
啟用【社交網路中繼資料】後,在WordPress後台的左側功能表的【All in one SEO】功能下面點選【社交網路中繼資料】,進入功能設定。

Facebook_catch_correct_picture_all_in_One_SEO03

步驟四、
在找到【社交網路中繼資料】功能設定畫面下找到「選取  OG:Image 來源」,在其後面選擇需要的功能,如果你不清楚每個功能是什麼,建議可以每個功能都試看看,然後將部落格文章網址貼到Facebook試看看,記得要配合使用 Facebook Debug 網站。

工作熊這裡選擇的是「First Image in Content」,選擇部落格文章的第一張圖為代表。這是一般人較常選擇的功能。設定完成後記得要按【儲存變更】。

Facebook_catch_correct_picture_all_in_One_SEO05

基本上到這裡設定就已經完成了,日後將文章網址貼到臉書後應該就可以抓到正確的圖片了。


Facebook的meta語法與設定格式

下面只是確認【All in one SEO】外掛真的幫我們設定好了Facebook的圖片抓取語法。

臉書要求的meta語法有:

  1. <meta property=”og:url” content=”網址” />
  2. <meta property=”og:type” content=”網站類型” />
  3. <meta property=”og:title” content=”網頁標題” />
  4. <meta property=”og:description” content=”網頁敘述” />
  5. <meta property=”og:image” content=”縮圖網址” />

下面這張截圖是安裝【All in one SEO】後未開啟【社交網路中繼資料】功能前的原始檔內容,完全看不到上述臉書meta語法的內容。

Facebook_catch_correct_picture_all_in_One_SEO07

下面這張截圖是安裝【All in one SEO】後啟用【社交網路中繼資料】功能後的原始檔內容,可以看到臉書的meta語法已經全部都加進來了,尤其是【og:image】這個meta語法,而且內容也是我們要的。

Facebook_catch_correct_picture_all_in_One_SEO06


Facebook Debugger 臉書偵錯工具

另外,記得要善用【臉書偵錯(facebook debugger)】工具

【臉書偵錯(facebook debugger)】網址:https://developers.facebook.com/tools/debug

Facebook_debug_website01

因為臉書會快取儲存之前已經抓取到的資料,也就是說如果已經在臉書上貼過的網址,臉書就會將其內容紀錄下來當作快取,下次再輸入同樣網址時臉書只會從其已經儲存的資料抓取內容,這樣可以降低網路流量,也可以增加臉書的反應速度,但如果第一次抓取資料後內容有更新就會抓不到更新圖檔。所以如果內容有變更,或是發現臉書抓錯圖片,就可以使用這個工具,點擊【再次抓取】,但如果抓了幾次都沒有變化,就要看看自己的網站是否也有快取功能設定,造成臉書無法抓到最新的更新圖片或文字,或是自己的語法設定錯誤。

Facebook_debug_website02


臉書連結貼文時圖片顯示還有一個重點需要特別注意,那就是原始圖片的像素大小會影響到臉書網站抓取時出現圖片的結果:

臉書Facebook的文章連結有兩種尺寸,較大的尺寸是 600 x 315 pixel,也可以做成 1200 x 630 pixel 尺寸的長方型圖片。如果是較小的圖片分享到臉書則會被臉書變成成正方形圖片

臉書抓取的圖片尺寸的顯示結果:

  • 原圖在 199 x 199 px 以下:抓不到圖
  • 原圖在 200 x 200 ~ 599 x 314 px :抓到小圖(正方形小圖)
  • 原圖在 600 x 315 ~ 1500 x 1500 px :抓到大圖(長方形大圖)
  • 原圖在 1501 x 1501  px 以上:抓到小圖 (這個怪怪的,還待澄清)

Facebook抓到大圖
Facebook大圖

Facebook抓到小圖
Facebook小圖


延伸閱讀:
12個購買虛擬主機架設部落格網站應該注意事項
如何使用Analytics查詢單篇文章的流量來源(到底訪客從哪裡來)
[WordPress]為什麼網站都安裝了SSL,安全連的綠色鎖頭還是無法出現?

在〈“[WordPress]一招解決,讓Facebook從此可以正確抓到部落格文章圖片”〉中有 2 則留言

  1. Reckie表示:

    請問下 ,我在網站中的精選圖設定成1200*783 或是壓縮成563*367 ,在臉書上面都是顯示大圖沒錯 但是高度都有被裁切到 兩張圖一樣 , 這有解嗎?

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *