八月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小圖


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


本部落格提供免費電子書索取:
我如何開始寫部落格 寫部落格賺錢術 如何提昇部落格人氣

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *