當你把網站連結分享到 Facebook 或 Line 的時候，是不是會顯示出一個文章的縮圖？以及文章的標題跟描述呢？
像是下面這張圖，就是瑞布把文章連結分享到 Facebook 會顯示的樣子，其中的網站連結縮圖、標題、描述，都跟「Open Graph（og）」以及「meta title」、「meta description」有關！
在《在搜尋引擎中搜不到我的網站？》這篇文章中我們有介紹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.movie”。根據你指定的類型，可能還需要其他屬性。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設定。
Line PagePoker
LINE也提供了類似於 Facebook 的偵測工具功能「LINE Page Poker」。當您更新頁面的標題、縮圖或說明後，如果想要手動要求LINE重新擷取網址的預覽資料，就可以利用「LINE Page Poker」來解決這個問題。對於經常使用LINE分享資訊的用戶來說，這個功能非常實用。
首先，開啟「LINE Page Poker」貼上連結，接著選擇頁面的「語言」。記得勾選 Clear Cache 清除快取，最後點選 Submit 送出。
「LINE Page Poker」的結果頁面會顯示抓取更新時間、回傳代碼、擷取的頁面網址、網域名稱和伺服器 IP 位址等資訊。在Open Graph欄位中，您可以看到成功抓取到的網站標題、說明、縮圖、圖片大小和網址。此外，頁面底部還提供了在LINE聊天室中貼上該網址後的預覽效果。
常見問題
- 為什麼在 Facebook 或 Line 分享網站連結時，縮圖和標題無法正常顯示？
這通常與網站未正確設定 Open Graph（OG）標籤有關。OG 標籤決定社群平台如何顯示連結的標題、描述和縮圖。 - 如何修正社群平台上的連結顯示錯誤？
確保網站 HTML 內已正確設置og:title、og:description、og:image等標籤，然後使用平台的開發工具（如 Facebook Debugger）進行測試與更新。 - 什麼是 Open Graph？為什麼它這麼重要？
Open Graph 是由 Facebook 推出的標準化協議，允許開發者控制網頁在社交平台上的呈現方式，確保連結能以最佳格式顯示標題、描述和縮圖。 - 如何檢查我的網站 Open Graph 設定是否正確？
可以使用 Facebook 分享偵錯工具 或 Line PagePoker 來預覽和更新社群分享顯示效果。 - 修改 OG 標籤後，為什麼 Facebook 仍然顯示舊的縮圖？
Facebook 可能已快取舊的連結資訊，可以使用 Facebook 分享偵錯工具 重新抓取最新內容，或等待數小時讓平台自動更新。
自己不會操作設定？不用擔心，瑞布架站時，在基礎SEO會一併幫你處理好這個部分唷！
資料來源：https://ogp.me/
延伸閱讀：
