如何在 WordPress 中顯示連結即時預覽
最後更新於2024年7月26日 由編輯部 | 審查人：Syed Balkhi
許多 WordPress 使用者都在尋找無需編碼即可顯示連結即時預覽的方法。我們理解，找到不需要技術知識或風險插件的解決方案可能會令人沮喪。連結預覽能夠讓讀者提前瞭解點擊後將看到的內容。如果預覽的內容對讀者有吸引力，他們更可能會點擊並瀏覽您的網站。相反，如果連結不是他們需要的，他們可以繼續尋找更適合的內容。
經過多次嘗試，我們發現一個簡單的方法可以在您的 WordPress 網站中添加連結預覽。這篇指南將向您展示如何做到這一點。
何時在您的 WordPress 網站上添加連結即時預覽
在典型的 WordPress 網站上，連結不會顯示內部內容。這會讓訪客在點擊連結後發現不是他們期望的內容而感到沮喪。這時就需要連結的即時預覽。
即時連結預覽通常看起來像工具提示。當有人將鼠標移到連結上時，它會彈出顯示內容的預覽。
對於在線商店，您可以顯示產品圖片或簡短描述以推動銷售。如果您運營的是 WordPress 博客，可以顯示文章圖片或簡短文字來吸引讀者瀏覽更多內容。對於外部連結，這些工具提示預覽能幫助人們決定是否要離開您的網站。
然而，使用即時預覽時需謹慎。過多的即時預覽會讓訪客感到困惑。最好只在那些能夠提供最大幫助的重要連結上使用它們。
步驟 1：安裝 Bright Link Previews 插件
在 WordPress 中添加連結預覽的最簡單方法是使用 Bright Link Previews 插件。激活後，該 WordPress 插件會自動在您的帖子和頁面中添加內部和外部連結的即時預覽。
首先，在管理區域安裝插件。詳細步驟請參閱我們的初學者指南《如何安裝 WordPress 插件》。
完成後，前往“設置”»“Bright Links”。這裡您可以配置插件的設置。
步驟 2：自訂連結工具提示預覽的設計
首先，我們在“外觀”標籤中設置即時預覽的設計。
在頂部，您可以選擇背景顏色（左側）和文本顏色（右側）。只需點擊顏色框，一個顏色選擇工具將出現。
您還可以選擇價格熱點顏色，這些顏色會自動在來自 WooCommerce、Amazon 和 Shopify 網站的電子商務連結中顯示。像處理工具提示一樣，選擇熱點的背景顏色和文本顏色。
以下是“選擇大小”，您可以通過拖動大小調整條上的點來使工具提示變大或變小。工具提示越大，訪客閱讀連結信息就越容易。不過，工具提示的尺寸也會影響用戶體驗，因此請確保找到適合網站設計的尺寸。
向下滾動，您可以更改工具提示本身的樣式。有 3 個預設選項，您可以隨時更改。
當您對工具提示的外觀感到滿意時，只需點擊底部的“保存”。
步驟 3：配置連結即時預覽設置
現在，切換到“設置”標籤。這裡可以配置連結即時預覽的行為。
Bright Links Preview 允許您在帖子、頁面和用戶評論中應用工具提示預覽，也可應用於符合 JavaScript 選擇器或圖片的連結。
我們決定只在帖子和頁面中添加這些預覽，因為到處添加可能會破壞用戶體驗。
另一個您可以配置的項目是是否顯示點擊計數器。將該設置從“No”更改為“Yes”，意味著當訪客將鼠標懸停在連結上時，工具提示會告訴訪客有多少用戶點擊過這個連結。
這對內部連結很有用，因為它可以激發訪客的 FOMO（錯失恐懼症），並鼓勵他們進一步探索您的網站。
但是，我們不建議為外部連結啟用此功能。此設定可能會適得其反導致在訪客離開您的網站。
您可以選擇是否在內部連結、外部連結或二者上添加即時預覽。選擇取決於您運營的網站類型，但我們一般建議僅使用內部連結以增加頁面瀏覽次數並降低跳出率。
接下來，您可以選擇緩存預覽以加快 WordPress 網站的性能。如果您添加即時預覽到外部連結，您還可以強制這些連結具有 target_blank 屬性，以便這些連結在新標籤中打開。我們建議啟用此功能，以免用戶不小心離開您的網站。
最後，您可以選擇在移動設備上禁用工具提示，因為工具提示可能會在小屏幕上產生不佳的用戶體驗。我們建議測試此功能並查看什麼最適合您的網站。
當您對即時預覽的設置感到滿意時，點擊“保存”。
步驟 4：查看連結工具提示預覽效果
在這一階段，您可以預覽您的網站，看看工具提示的效果。
以下是我們的工具提示效果（不帶點擊計數器）：
如果您選擇添加點擊計數器，則會有一個小標註顯示該連結已收到的點擊次數。
Bright Links Preview 的一個優點是它擁有免費的分析功能，顯示有多少用戶點擊或甚至將鼠標懸停在您的連結上。這有助於查看哪些帖子最受用戶歡迎或決定突出顯示哪些新帖子。
要查看這些數據，只需從 WordPress 管理員進入“設置”»“Bright Links”，然後切換到“統計”標籤。
附加提示：通過模式標記清理 WordPress 連結預覽
Bright Links Preview 通過自動提取您的頁面和帖子的元數據來創建連結的即時預覽。換句話說，連結預覽的質量取決於您設置元數據的好壞。
您可以通過使用 All in One SEO（AIOSEO），一個強大的 WordPress SEO 插件，來將元數據添加到您的文章中。AIOSEO 擁有一個模式功能，使您能夠輕鬆地在內容中添加結構化數據。
除了幫助 Bright Links Preview 創建更好的預覽外，它還能向搜索引擎提供更多關於您內容的背景信息，這可能會提高您的 WordPress SEO 表現。
如果您想在內容中添加結構化標記，可以閱讀以下文章：
- 如何在 WordPress 中添加模式標記
- 如何在 WordPress 中正確添加 SEO 友好的“如何”模式
- 如何在 WordPress 中添加 Facebook 開放圖形元數據
發掘更多 WordPress 設計功能
想讓您的 WordPress 站點設計更加有趣嗎？查看以下實用指南：
- 在博客文章中使用簡潔優雅的腳註來添加額外信息
- 顯示麵包屑導航鏈接，幫助訪客瞭解他們在網站上的位置
- 創建滾動新聞標題，與訪客分享重要更新
- 使用倒數計時器小工具，為特殊活動營造氛圍
- 在您的文章中添加閱讀進度條，保持讀者的參與度
- 創建自定義形狀分隔符，使您的網站設計更加有趣
我們希望這篇文章能幫助您瞭解如何在 WordPress 中顯示連結的即時預覽。您可能還想查看我們列出的最佳 WordPress 拖拽頁面構建器和我們的指南《如何編輯 WordPress 網站》。
如果您喜歡這篇文章，請訂閱我們的 YouTube 頻道以獲取 WordPress 視頻教程。您也可以在 Twitter 和 Facebook 上找到我們。
