Links
開啟 Links

連結預覽顯示錯誤的圖片或標題?修正方法

找出連結預覽顯示錯誤圖片或標題的原因,修正網頁的 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。劇團修正後的標籤如下:

html
<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 會為每次點擊保留哪些資訊。

每次分享前檢查預覽

使用這份檢查清單:

  1. 在無痕視窗中檢查網頁的標籤。
  2. 為每張更換過的圖片取新的檔案名稱。
  3. 建立短網址,或更新它的目標網址。
  4. 用 Meta 和 LinkedIn 的工具檢查網頁和短網址。
  5. 在訊息草稿中檢查預覽。
  6. 發布後,在每個社群網路上檢查一則實際的貼文。

網站改版後要再檢查一次,因為新的版型可能改變標籤。劇團現在都以戲名為每張海報命名。

Links 在你更改連結去向時,會保留同一個短網址,並把它能辨識的預覽抓取排除在點擊數之外。預覽來自你的網頁,所以要在網頁上修正。

作者

Reunified 打造能把分散的東西重新聚在一起的 App。

繼續閱讀

所有文章

閱讀約需 6 分鐘

如何為 Google 表單製作 QR code

用作答者連結為 Google 表單製作 QR code,確認誰能填答,看出每份回覆來自哪張海報,並讓同一個 QR code 沿用到新表單。

建立你的第一個短網址

用你的 Reunified 帳戶登入。新帳戶贈送 100 點數,夠 2,000 次點擊。