[分享] 如何漂亮地在社群分享網站連結縮圖？

RAB

網站終於做好了，但在社群分享網站連結縮圖時，總是出現差強人意的連結標題及描述？該如何改善呢？
當你把網站連結分享到 Facebook 或 Line 的時候，是不是會顯示出一個文章的縮圖？以及文章的標題跟描述呢？

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

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

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

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

儘管存在許多不同的技術和模式並且可以將它們組合在一起，但是沒有一種技術可以提供足夠的信息來豐富地表示社群中的任何網頁。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協議標記：
（可以到官網文章內閱讀）

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

。Facebook分享偵錯工具-Facebook的官方解析器
許多人剛新增完頁面內容、又或是剛調整內容，此時發現貼到Line、Facebook等通訊軟體、社群平台上沒有正確顯示你的 og 設定。

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

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

貼上欲分享的連結網址，就可以看到你的相關og設定。

資料來源：https://ogp.me/
文章：https://rab.tw/how-to-share-your-link-perfectly/