免費諮詢
↑
Seo · SEO 與 AI 搜尋

上傳 LINE / Twitter / Facebook 的連結長什麼樣?一秒預覽測試!

SEO 與 AI 搜尋發布 2022.06.20更新 2024.03.06閱讀約 5 分鐘

不知道大家有沒有遇過這個問題:「怎麼我上傳到 Line / Twitter / Facebook 上的連結預覽,跟文章的內容不一樣呢?」,這篇文章將帶你了解上傳到Line / Twitter / Facebook 的連結預覽是如何運作、抓取的,以及可以透過什麼網站提前知道連結的預覽效果,即時發現問題並修正!

一、 為什麼連結會顯示錯誤的預覽?

當我們想透過社群媒體如LINE / Twitter / Facebook來分享網址連結時,這些社群媒體的系統就會抓取網頁的中繼資料(metadata),包含網頁的標題、發表時間、縮圖、說明與標籤等資訊,而當這些社群媒體在抓取連結時,為了加快下一次讀取相同相同連結的速度,會將連結的中繼資料站存在快取(Cache)紀錄當中,而如果我們在社群媒體抓取過連結資料後,對網頁的內容進行修改,再次分享連結時,就很有可能會抓到舊的快取資料,導致連結的預覽會顯示錯誤。

那我們該怎麼解決連結預覽顯示錯誤的問題呢?

這時候就可以使用這些社群媒體所提供的連結偵錯工具,讓LINE / Twitter / Facebook 重新再抓一次連結的快取,這時候就能解決連結預覽顯示錯誤的問題囉!

二、 LINE快取更新工具(LINE Page Poker )

LINE Page Poker 能讓LINE強制重新抓一次快取,這樣就能針對網址連結進行網頁相關資訊的更新。透過下面連結就能進入 LINE Page Poker 囉~接下來就來看看LINE Page Poker如何使用吧!

LINE Page Poker 快取更新工具
LINE Page Poker(LINE 已停止提供這個快取更新工具)

進入網頁後能看到從上到下分別是:
1.Input URL:輸入網址/連結
2.Language:選擇語言
3.Clear Cache:清除快取
4.Submit:提交上述資訊

LINE快取更新工具(LINE Page Poker )_1|鵠崙設計
LINE快取更新工具(LINE Page Poker )_1|鵠崙設計

在這邊使用「商業模式是什麼?秒懂經營企業不可不知的商業模式圖九元素!」這篇官網文章來進行示範~我們首先能看到這個網址連結的發布的時間以及發布的網域名稱等資訊,像這篇文章的網域就是/ 。

LINE快取更新工具(LINE Page Poker )_2|鵠崙設計
LINE快取更新工具(LINE Page Poker )_2|鵠崙設計

接著我們能看到這個連結更加詳細的資料,包含標題、敘述、圖片、圖片尺寸等。

LINE快取更新工具(LINE Page Poker )_3|鵠崙設計
LINE快取更新工具(LINE Page Poker )_3|鵠崙設計

而在最下方也就是 link preview 就是我們在 LINE 上所能看到的連結預覽畫面。

上傳 LINE / Twitter / Facebook 的連結長什麼樣?一秒預覽測試!
上傳 LINE / Twitter / Facebook 的連結長什麼樣?一秒預覽測試!

三、Twitter 連結驗證工具(Twitter Card Validator )

Twitter Card Validator 的操作就更加簡單了!一樣點選下方連結就能進入 Twitter Card Validator 囉,只需要輸入網址連結就能驗證連結的分享資訊是否正確。

Twitter Card Validator 連結驗證工具
https://cards-dev.twitter.com/validator

Twitter 連結驗證工具(Twitter Card Validator )_1|鵠崙設計
Twitter 連結驗證工具(Twitter Card Validator )_1|鵠崙設計

這邊一樣用同一篇官網文章進行測試,測試結果如下圖,馬上就能在畫面的右手邊看出網址連結在 Twitter 上預覽的畫面。

Twitter 連結驗證工具(Twitter Card Validator )_2|鵠崙設計
Twitter 連結驗證工具(Twitter Card Validator )_2|鵠崙設計

四、Facebook 分享偵錯工具(Facebook Debug )

使用 Facebook Debug 分享偵錯工具,能瞭解網站內容分享在 Facebook、Messenger 和其他位置時所使用的資訊,透過下面連結就能進入 Facebook Debug 囉~接下來就來看看如何使用吧!

Facebook 分享偵錯工具
https://developers.facebook.com/tools/debug/

跟 Twitter Card Validator 一樣,只需要輸入連結就可以了。

Facebook 分享偵錯工具(Facebook Debug )_1|鵠崙設計
Facebook 分享偵錯工具(Facebook Debug )_1|鵠崙設計

測試的結果可以看下圖,如果說發現預覽的資訊不是網頁的最新資訊的話,可以點擊「再次抓取」,Facebook就會再次抓網頁的資訊,連結預覽顯示的問題就會被修正了~

Facebook 分享偵錯工具(Facebook Debug )_2|鵠崙設計
Facebook 分享偵錯工具(Facebook Debug )_2|鵠崙設計

五、結語

今天分享了 LINE / Twitter / Facebook 三個社群媒體所能使用的分享偵錯工具,讓我們能夠提前知道連結的預覽效果,以及快速修正在連結預覽上的問題!那這次的分享就到這裡結束了~我們的官網將會不定期發布有關行銷或是網頁設計上的文章,如果喜歡文章內容歡迎定期注意鵠崙設計的官網,我們下次再見~

鵠崙設計鵠崙設計 2014 年成立,專注 WordPress 網站開發,400 多個網站在我們自己的主機上運作。這篇文章由負責維護的同事撰寫,數字來自實際的報價與維護紀錄。
FAQ

這篇文章,
常問的

針對這篇內容的問答;更一般的問題看SEO 與 AI 搜尋 hub。

01為什麼我已經把網頁內容改好了,分享到LINE、Twitter、Facebook的連結預覽卻還是顯示舊的畫面?

這是因為社群平台會把第一次抓取到的網頁標題、圖片、說明等資訊存成快取,方便下次分享同一連結時加快讀取速度。之後就算網頁內容更新了,平台也不會自動重新抓取,畫面自然會跟目前內容不一樣。

02用偵錯工具讓平台重新抓取之後,之前別人已經分享出去的舊連結貼文畫面也會跟著更新嗎?

偵錯工具的作用只是讓平台針對該網址重新抓取目前的中繼資料,之後新分享出去的連結會顯示更新後的預覽,但別人先前已經發布的舊貼文屬於既有內容,不會因此自動跟著改變。

03連結預覽上顯示的標題、圖片、說明文字,平台是從網頁的哪裡抓出來的?

平台是抓取網頁的中繼資料(metadata),也就是標題、發表時間、縮圖、說明與標籤等資訊,再組合成連結分享時看到的預覽畫面,所以網頁本身這些資訊正確,預覽才會跟著正確。

04Facebook分享偵錯工具只能檢查在Facebook上的分享效果嗎?

不只如此,這個工具能讓你了解網站內容分享在Facebook、Messenger和其他位置時所讀取到的資訊,等於一次檢查同一組中繼資料在不同地方呈現的預覽效果。

Service

看完之後,想找人做?

SEO 與 AI 搜尋:讓 Google 和 AI 搜尋都讀得懂、引用得到你的網站:先修技術體質,再做內容。

SEO 與 AI 搜尋優化
Contact

留下需求,
1 個工作天內回覆

告訴我們你的產業、現在的網站、想解決什麼;回覆時會附上同產業的案例與估價區間。