如何漂亮地在社群分享網站連結?
如何漂亮地在社群分享網站連結?

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

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

目錄

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

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

og

在搜尋引擎中搜不到我的網站?這篇文章中我們有介紹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協議標記:

<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 緣故

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

og 1
Facebook分享偵錯工具

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

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

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

延伸閱讀:

Share 分享 :

分享在 facebook
分享在 twitter
分享在 telegram
分享在 email
Related Post

最新文章

網站設計 留白設計

乾淨的網站介面:15 個網站設計留白技巧

網站設計的多樣化我們時刻可以感受到,在瀏覽不同網站的時候,哪種網頁設計可以讓使用者覺得舒適、願意繼續瀏覽?乾淨簡約的風格越來越流行,讓我們一起來看看網站設計留白技巧吧!

Selected Post

精選文章

黑帽SEO

什麼是黑帽SEO?要避免的9種危險手法

以前許多行銷人員大量使用黑帽SEO策略對網站進行排名;然而,時代變了,大家逐漸瞭解到使用白帽SEO才能真正幫助網站長久發展。在本文中,將深入探討如果您不想違反演算法或網站管理員指南,應該避免使用哪些SEO手法。

定期維護網站

定期維護網站的重要性

你的網站是不是做好就放在那裡,好幾年沒有去更新、維護它呢?許多人可能不知道定期維護網站的重要性,讓這篇文章為你說明。

WordPress 維護

16個 WordPress 維護的技巧

網站架好了要如何進行 WordPress 維護?你需要定期維護網站核心功能、安裝的外掛、主題和其他方面。WordPress 是一個很棒的內容管理平台,但做好網站維護是讓你的網站在市場上走得更久的關鍵。