CLOSE
網頁新知
2022.06.20

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

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

不知道大家有沒有遇過這個問題:「怎麼我上傳到 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 快取更新工具
https://poker.line.naver.jp/

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

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

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

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

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

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

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

三、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 連結驗證工具(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 分享偵錯工具(Facebook Debug )_2|鵠崙設計

五、結語

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

CONTACT US

想了解更多資訊內容嗎?歡迎立即聯繫鵠崙設計!