WordPress三步驟讓FB臉書正確預覽網址縮圖

三步驟讓FB臉書正確玉臉網址縮圖

身為架站新手,加上Facebook(臉書)是目前最常使用社群軟體,不知道大家是否有遇過分享文章網址到FB時,網站預覽的縮圖、標題、描述與你設定的不同?

請別輕忽這件事,這將會影響SEO的成效。

視覺是老大

外界的信息70%是由視覺接收,再傳遞到大腦,而圖像比文字傳導更快。

因為在遠古時代時,距今三百萬年,人類祖先「猿人」所看到的都是一幅幅圖像,就像我們現在看風景一樣。

直到距今五千年前,地球上最早的的文字「楔形文字」,出現在兩河流域,是蘇美人使用的文字。

文字至今不過發展幾千年,但人類的視覺系統早已發展三百萬年,而且文字是我們經過後天學習才能了解,但我們從出生還是小嬰兒時,就能根據眼睛所看到的東西去辨識不同的人事物。

所以視覺是所有感官中的老大,是人類發展最完整的系統,也是我們接收最多信息的接收雷達。

網址分享到FB臉書無法正確預覽縮圖、標題、描述?

FB貼文分享連結預覽顯示錯誤

如果有兩則貼文如上圖那樣,哪個你會比較想點進去呢?

FB留言分享連結預覽顯示錯誤

留言時,比起上方的縮圖,應該更想點下方資訊完整,能一目瞭然知道內容的網址預覽吧?

既然視覺是老大,為了達到讓別人正確收到我們想傳達的信息,除了製作精確、有價值的內容外,身為版主/小編的我們還得引起讀者興趣,運用視覺圖像化的手法,讓讀者願意點擊,才能看到我們用心製作的內容。

否則就像是大廚雖然煮了一手好菜,但是若每道菜都長的黑乎乎,即使味道再好吃,也不太會有人捧場。

當我們發布文章後,想將文章分享到Facebook等社群軟體上時,可能會發生上述網址預覽的縮圖、標題、描述不正確,而影響到網站SEO的成效,但我們可以依據下列步驟來解決。

步驟一:FB偵錯工具確認問題

Facebook 分享偵錯工具

當分享網址到FB臉書時,Facebook會主動抓取文章圖示與摘要,再呈現在Facebook的塗鴉牆或留言板上。

若是分享連結到FB時沒辦法正確預覽縮圖、標題,可以透過小編的好幫手:

facebook官方提供的【分享偵錯工具】

檢查問題出在哪裡?

Q1:快取問題

快取問題

首先在【分享偵錯工具】貼上想分享的網址連結,並點擊”偵錯”

  1. 若是快取問題,重新抓取後,下方連結預覽會正常顯示
  2. 若還是沒有更正,可以點選”再次抓取”
  3. 正常顯示後,重新將網址分享到FB即可

Q2:網頁內容設定有誤

網頁內容設定有誤

若是重新抓取後,仍然無法正常預覽,那就不是快取問題,而是網頁內容設定有誤,此時我們可以看 看”應處理的警告所列的資訊”,並且用接下來介紹的方式解決。

不會程式語言,All in One SEO也能一次解決FB無法正常預覽的問題

若是網頁內容設定有誤,若你會Html也可以用更改程式語言的方式來修正,或是聯繫網頁設計師的協助。

不過如果你跟我一樣是程式小白,又是自己架站的新手站長,有一個簡單又一勞永逸的方法。

那就是用SEO的外掛來一次性解決FB無法正常預覽的問題,之後每次發文,都會讓FB自動抓取正確資訊,不用再重新設定。

因為我個人是安裝All in One SEO,所以接下來是用這個外掛說明,如果大家有使用其他的外掛,例如:Open Graph for Facebook, Google+ and Twitter Card Tags 或是 Yoast SEO外掛等等,也可以找找看適和你用的方法。

步驟二:啟用All in One SEO 社交網路中繼資料(social meta)的功能

all in one seo 設定-社交網路中繼資料social meta啟用

若是網站內容設定有問題的人,又有安裝All in One SEO 外掛,

可以依照下列順序啟用社交網路中繼資料(social meta)的功能。

  • 進入Wordpress 控制台
  • All in One SEO >功能管理
  • 找到 “社交網路中繼資料(social meta)” > Activate (啟動)

步驟三:更改首頁與個別文章預覽內容

all in one seo 設定-社交網路中繼資料social meta設定

啟動”社交網路中繼資料(social meta)”後,可依照下列順序更改文章預覽內容,更改之後,FB就會自動根據你的設定抓取資料,之後就不用再重新設定了,也不用每發布一篇新文章就設定一次。

  • WordPress 控制台 > All in One SEO > 社交網路中繼資料(social meta)
  • 更改預覽內容
    • 首頁:網站名稱、首頁標題、首頁內容說明、首頁圖片
    • 個別文章圖片設定:選取OG:image來源、預設OG:image

選取OG:image來源有許多選項,選取的OG:image會成為文章的縮圖,通常未設定時,都是用預設圖片。

不過他有許多選項:預設圖片、精選圖片、第一張附件圖片、內容中的第一張圖片、自訂欄位中的圖片、文章作者的個人頭像、全部圖片選項中第一張可用的圖片。

FB發文前/後檢查清單

可以根據個人需求選擇,而我自己是選擇精選圖片作為每篇文章的縮圖預覽。 發文前後的檢查 文章最後提供大家發文前與發文後的小檢查清單

發文前檢查社交網路設定

檢查社交網路設定

在撰寫完文章後,編輯文章最下方,我們通常會在All in One SEO 的主要設定區塊再次檢查:標題、內容說明、關鍵字… …等等。

除了檢查上方說明外,我們也要檢查我們的社交網路設定區塊,看標題、內容說明、圖片是否正確指定。

通常圖片會根據你所指定的”選取OG:image來源”顯示,若你不想用你原先”選取OG:image來源”指定的圖片,也可在這邊另外指定縮圖的圖片。

發文後有問題,回到FB偵錯工具檢查

分享偵測工具

若FB發文後有問題,可以回到步驟一所提供的FB【分享偵錯工具】中檢查。

All in One SEO 的頁面中也有提供不同的網頁分析小工具, 我們可以在要分享的該篇文章上方功能列,直接進入FB偵錯工具檢查。

  • 點擊”SEO”
  • Analyze this page
  • Facebook Debugger(也就是分享偵錯工具)

發文後有更新文章,但FB貼文沒有更新

FB更新貼文

若你已經在FB分享網址,但之後有更新文章或圖片,那麼【分享偵錯工具】很有可能沒辦法幫你更新。 但我們可以根據下列步驟通知FB更新貼文:

  • 進入電腦版FB,找到該貼文
  • 點選右上角「…」
  • 點選”更新分享的附件”

這是我在寫文章想分享時所遇到的問題,記錄下我成功解決的過程,分享給有類似問題的讀者參考!希望能減少大家自己架站的辛苦!

如果這篇文章對你有所幫助的話,請幫我拍手 5 下,

只要幾秒鐘登入 FB 或 Google,不必花錢就能鼓勵我繼續創作!👇👇👇

This Post Has 10 Comments

  1. Kita

    這篇好實用!內容都是經營社群的小編應該知道的小技巧
    值得收藏,謝謝站長無私分享!

    1. Ning

      我自己的經驗對你有幫助就太棒啦!

  2. bodynewlife

    這訊息非常實用 終於讓我找到原因了 非常感謝版主分享 我要趕快來分享給我的好友們了 大推

    1. Ning

      我之前也是遇到類似情況,有幫助到你真是太好啦!

  3. 尹辰

    這片文章對經營社群的會很有幫助,謝站長分享資訊

    1. Ning

      很開心對你有幫助喔~~~

  4. Harry

    我最近也有類似的困擾,看了版主的文章後解決問題了,非常感謝版主分享這麼實用的文章,

    1. Ning

      很開心對你有幫助~~~新手真的會遇到各種問題,相信我們都能一一解決!

  5. 毛毛

    之前也曾發生過fb分享無法顯示圖片,原來有這些細節要注意
    這篇對經營自媒體的朋友很實用呢~感謝版大細心的分享唷

    1. Ning

      經營自媒體真的會遇到各種問題,又不想增加外掛造成網頁變慢,發現原本就安裝好的外掛就很好用了,實用就好~

發佈留言