當你把網站連結分享到 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聊天室中貼上該網址後的預覽效果。
自己不會操作設定?不用擔心,瑞布架站時,在基礎SEO會一併幫你處理好這個部分唷!
資料來源:https://ogp.me/
延伸閱讀: