連結預覽顯示錯誤的圖片或標題?修正方法
找出連結預覽顯示錯誤圖片或標題的原因,修正網頁的 Open Graph 標籤,更新 Facebook 和 LinkedIn 的預覽,並測試短網址。
連結預覽顯示錯誤的圖片或標題,通常是因為網頁的標籤有誤,或是 App 儲存了較舊的網頁副本。大多數 App 會根據網頁的 Open Graph 標籤(例如 og:title 和 og:image)產生預覽。先修正標籤,再讓保留舊副本的 App 重新讀取網頁:Facebook 用 Meta 的分享偵錯工具,LinkedIn 用 Post Inspector。
本指南以一個虛構的社區劇團 Eastgate Players 為例,劇團新戲的網頁預覽顯示的卻是去年的海報和標題。本指南涵蓋你可以編輯的網頁和你管理的短網址。如果網頁由別人管理,請對方修正標籤。
找出預覽從哪裡來
預覽來自連結經過所有轉址後最終開啟的網頁。短網址本身沒有預覽:Links 會把它轉址到儲存的目標網址,本身沒有預覽設定。你在 Links 應用程式中為連結取的標題,永遠不會出現在預覽中。
檢查網頁的 Open Graph 標籤
在無痕視窗中開啟網頁,檢視原始碼並搜尋 og:。Open Graph 協定要求四個基本標籤:og:title、og:type、og:image,以及代表網頁本身永久網址的 og:url。劇團修正後的標籤如下:
<meta property="og:title" content="Harbor Lights: our new show" />
<meta property="og:type" content="website" />
<meta property="og:description" content="Five evenings in April at Eastgate Hall." />
<meta property="og:image" content="https://example.org/img/poster-harbor-lights.jpg" />
<meta property="og:url" content="https://example.org/harbor-lights/" />檢查是否有以下問題:
| 問題 | 修正方法 |
|---|---|
沒有 og:image 標籤 |
加上這個標籤,否則 Facebook 會自行猜測,可能選到別的圖片 |
| 標籤是從舊網頁複製過來的 | 為這個網頁更新每一個 og: 標籤 |
og:image 沿用了去年的檔案名稱 |
為新圖片改名,並更新標籤 |
og:image 是不完整的路徑,例如 /img/poster.jpg |
比照 Open Graph 範例,使用完整的 https:// 網址 |
| 網頁或圖片需要登入才能看 | 使用公開的網頁和圖片:預覽工具不會登入 |
og:url 指向首頁 |
設為這個網頁自己的網址 |
| 你的修改沒有出現在原始碼中 | 清除網站的快取 |
劇團的網頁是從去年的網頁複製來的,所以 og:title 寫的是舊戲名,而新海報又用同一個檔名取代了 poster.jpg。
更新 App 已快取的預覽
修正網頁不會改變 App 已經儲存的預覽。
Facebook 的部分,請把網頁網址貼到 Meta 的分享偵錯工具。Meta 的分享指南說明,這個工具會顯示爬蟲讀到的標籤,並重新抓取網頁。圖片是依網址快取的,除非網址改變,否則不會更新,這就是劇團替換後的海報仍顯示舊圖的原因。Meta 也建議加上 og:image:width 和 og:image:height,讓圖片在第一次分享時就能正確載入。
LinkedIn 的部分,請在 Post Inspector 中輸入網址並檢查預覽。LinkedIn 的說明指出,更新只會影響新貼文。現有貼文會保留舊預覽,所以劇團發了一則新貼文。
至於 WhatsApp 或 X (Twitter) 等其他 App,請在傳送前先在草稿中檢查預覽。
從預覽工具的角度測試短網址
這些工具檢查的是你輸入的網址。如果你分享的是短網址(例如 reunified.link/k7m2x9qa),也要用這些工具檢查它。
Links 會對每次造訪套用你的規則,預覽工具也不例外。國家規則可能符合從該國連線的工具,而沒有表明自己是手機或平板的工具會被當作電腦。所以預覽可能顯示某條規則的目標網址:請讓每個目標網址都有正確的標籤。路由規則指南說明規則如何比對。
如果工具顯示的是 Links 的頁面,說明連結無法使用或不存在,請參考疑難排解指南。
在你修改短網址的目標網址之後,已快取預覽的 App 仍可能顯示舊網頁,所以請再用這些工具檢查一次短網址。
了解預覽如何影響點擊數
許多 App 在連結一貼上時就會抓取它。對於能辨識的爬蟲、連結預覽和瀏覽器預先載入,Links 會照常轉址,但不計入點擊,也不扣點數。Meta 的分享爬蟲就是其中之一,所以分享偵錯工具不會增加計入的點擊。Links 無法辨識的工具則會算作一次點擊。
你自己在瀏覽器中的測試造訪會計入,同一個人開啟連結兩次也會計入兩次。統計與隱私指南說明 Links 會為每次點擊保留哪些資訊。
每次分享前檢查預覽
使用這份檢查清單:
- 在無痕視窗中檢查網頁的標籤。
- 為每張更換過的圖片取新的檔案名稱。
- 建立短網址,或更新它的目標網址。
- 用 Meta 和 LinkedIn 的工具檢查網頁和短網址。
- 在訊息草稿中檢查預覽。
- 發布後,在每個社群網路上檢查一則實際的貼文。
網站改版後要再檢查一次,因為新的版型可能改變標籤。劇團現在都以戲名為每張海報命名。
Links 在你更改連結去向時,會保留同一個短網址,並把它能辨識的預覽抓取排除在點擊數之外。預覽來自你的網頁,所以要在網頁上修正。