社群、社群圖文
社群、社群圖文

為何分享網站連結縮圖、標題無法正常顯示?(Facebook、Line…)

網站終於做好了,但在社群分享網站連結縮圖時,總是出現差強人意的連結標題及描述?該如何改善呢?
目錄

當你把網站連結分享到 Facebook 或 Line 的時候,是不是會顯示出一個文章的縮圖?以及文章的標題跟描述呢?

像是下面這張圖,就是瑞布把文章連結分享到 Facebook 會顯示的樣子,其中的網站連結縮圖、標題、描述,都跟「Open Graph(og)」以及「meta title」、「meta description」有關!

og

在搜尋引擎中搜不到我的網站?這篇文章中我們有介紹meta title及meta description,這是基礎SEO不容忽視的部分,其實這也跟分享網站連結時會出現的縮圖文章標題、描述有關。

每個頁面都要設定不同的標題及描述,有利於你的SEO,在分享連結時也可以漂亮地呈現縮圖,吸引使用者點選你的連結進入網站。

Open Graph 又是什麼呢?

根據開放圖譜協議中的介紹:Open Graph 在開放圖譜協議允許任何網頁成為豐富社群的對象,目標是讓網站連結在社交媒體呈現時,能有較豐富的內容展示,如縮圖、標題、描述等。

Open Graph是一種網頁標記協議,用於定義網頁的元數據(metadata)。它是由Facebook引入,但現在已成為許多社交媒體平台(包括LINE)廣泛支持的標準。透過在網頁的HTML標籤中添加Open Graph標籤,開發者可以指定網頁的標題、描述、縮略圖和其他相關資訊。這些元數據可以用於在社交媒體上分享網頁時生成預覽內容,使分享的內容更具吸引力和可讀性。簡而言之,Open Graph可以讓開發者更好地控制網頁在社交媒體平台上的展示方式。

簡單來說,如果你今天如果貼一個連結在某個平台上,這個網站連結會顯示縮圖、顯示標題,那麼這就跟 og 有關,例如在這些社群中分享你的連結:Line、Whatsapp、Facebook、Instagram 、Medium及其餘部落格平台等,都是 og 會發生作用的地方。

og 的基本元數據

在頁面的程式碼中添加以下標記,就可以在分享連結時呈現標題、描述及圖片。而這些設定在我們為你的WordPress頁面新增 meta title(頁面標題)meta description(內容摘要)社群分享圖片(精選圖片)網址代稱時,就會一併帶入了!

  • og:title -分享網頁時的標題,通常會跟網站內建的 meta title 一致。對象的標題,例如“ The Rock”。
  • og:description:分享網頁時的描述,通常會跟網站內建的 meta descritpition 一致。
  • og:type-對象的類型,例如“ video.movi​​e”。根據你指定的類型,可能還需要其他屬性。
  • og:image -分享網頁時的圖片,部落格平台通常會以設定的「精選圖片」當作分享的 og: image,也是會大幅影響點閱率的重要因素。
  • og:url -將在分享中用作其永久的URL,例如“ https://www.imdb.com/title/tt0117500/”。

例如,以下是The Rock on IMDB的Open Graph協議標記:

<html prefix="og: https://ogp.me/ns#">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />
...
</head>
...
</html>

利用工具檢查在社群分享網站連結的呈現

目前網路上已經開發了許多解析器和發布工具,可以讓你檢查你的網址在分享時會呈現什麼樣子。

許多人剛新增完頁面內容、又或是剛調整內容,此時發現貼到Line、Facebook等通訊軟體、社群平台上沒有正確顯示你的 og 設定

請你別慌張,這很有可能是社群媒體的爬蟲還沒抓到網站更新版的 og 緣故

可以利用小工具,看看是否有成功修改你的分享內容。

Facebook分享偵錯工具

這是 Facebook 的官方解析器,貼上欲分享的連結網址,就可以看到你的相關og設定。

og 1
Facebook分享偵錯工具

Line PagePoker

LINE也提供了類似於 Facebook 的偵測工具功能「LINE Page Poker」。當您更新頁面的標題、縮圖或說明後,如果想要手動要求LINE重新擷取網址的預覽資料,就可以利用「LINE Page Poker」來解決這個問題。對於經常使用LINE分享資訊的用戶來說,這個功能非常實用。

Line PagePoker

首先,開啟「LINE Page Poker」貼上連結,接著選擇頁面的「語言」。記得勾選 Clear Cache 清除快取,最後點選 Submit 送出。

Line PagePoker 1

「LINE Page Poker」的結果頁面會顯示抓取更新時間、回傳代碼、擷取的頁面網址、網域名稱和伺服器 IP 位址等資訊。在Open Graph欄位中,您可以看到成功抓取到的網站標題、說明、縮圖、圖片大小和網址。此外,頁面底部還提供了在LINE聊天室中貼上該網址後的預覽效果。

自己不會操作設定?不用擔心,瑞布架站時,在基礎SEO會一併幫你處理好這個部分唷!

資料來源:https://ogp.me/

延伸閱讀:

各種ChatGPT及AI工具應用、指令手冊、解決方案,每週更新。
學習最新AI工具,就上Learn AI
AI如何讓工作更輕鬆、更有效率?立刻學習!
LA廣告-1
LA廣告-2
LA廣告-3
Related Post
最新文章
數位轉型
數位轉型是什麼?簡單說給你聽

數位轉型聽起來很複雜?其實它就是利用數位科技來提升效率、改善服務。這篇文章將用最簡單的方式,帶您了解數位轉型的概念與重要性。

Selected Post
精選文章
WordPress網站安全
5個免費檢測網站安全的必備工具

在當今數位時代,網站安全是至關重要的議題。保護你的網站免受惡意攻擊和數據洩露,是確保網站運作正常並維護用戶信任的關鍵。這篇文章中,我們將向你介紹一些免費且有效的網站安全工具,讓你能夠輕鬆檢測和強化你的網站安全。