如何設定 Open Graph, Twitter Card 管理網頁分享到 Facebook, Google, Twitter… 的內容

當有人將你網站的內容分享到 Facebook, Google+, Twitter這些社群網站平台時,如果你對於這些分享的內容長相是如何決定的,這就是本文的目的。這些社群網站會從網站中抓取相關資訊顯示在平台上,但這些自動抓取的資訊不見得符合理想中網站的內容,因為社群網站只能猜測哪些內容重要、哪些不重要。這產生了一個問題,如果你重視網站被分享到社群平台的樣式,那對於每一個網頁作良好的 Open Graph 設定,就顯得相當重要。這篇文章就是要教你如何利用社群分享的中繼標籤(social meta tags)來自訂分享內容的標題、圖片和說明文字。

The Open Graph protocol
The Open Graph protocol

首先先來了解甚麼是 Open Graph。Open Graph是一種協議,用來使任何網頁能夠成為社交平台中的豐富內容。基本上,你可以告訴社群平台,如Facebook,Twitter,Pinterest,LinkedIn和Google+,當你或其他任何人分享網站的鏈接時,要顯示哪些內容以及如何顯示。在台灣最流行的社群平台大概就是 Facebook 以及line。年輕族群則開始流行 Instagram。

Open Graph Meta Tags

Open Graph Meta Tags與 Standard Meta tags 不太相同,後者是用來決定搜尋結果的顯示 SERPs,而前者就是用來決定分享到社群媒體時顯示的樣式。相同的是,兩者都必須放在html檔案的<head>標籤內。基本的 Open Graph Meta Tags 讓我們可以輕鬆的標記網頁的結構化訊息、包含標題、描述、預覽圖片等。現在主流的社群網站平台都支援Open Graph Tags,例如:Facebook, LinkedIn, Google+, Twitter, pinterest。

標籤說明
og:title網頁標題或是顯示內容的標題
og:url網頁的唯一網址canonical URL。如果您有手機版和電腦版二個網頁、將二個網頁的og:url設成電腦版的網址,兩個網頁的facebook按讚次數就可以加總統計在一起。
og:description網頁內容的簡單說明,長度並沒有特別限制,但太長通常會被截斷。
og:image分享的縮圖(網頁的預覽圖)
og:type網頁內容的類型(有article, book, profile, website, music, video等類型,預設是 “website”)  您可以在http://ogp.me/#types查看所有的類型。

使用範例

<meta property="og:type" content="article" />
<meta property="og:title" content="顯示的標題" />
<meta property="og:description" content="文章的簡短摘要" />
<meta property="og:image" content="http://yourdonaim.com/image-name.jpg" />
<meta property="og:url" content="http://yourdonaim.com/" />

若你想要確定是否有設置正確,可以使用Facebook debug工具來檢查。為了加速,臉書也會將這些資料cache,因此如果你的文章這些設定有所改變,你也可以到這裡來清除,強制 Facebook 重新抓取。

Schema標記

Schema 是另一種標記社群分享資訊的方法,目前支援的有 Pinterest 及 LinkedIn。跟Open Graph tags一樣,Schema標記必須放在<head>標籤之內。

標籤說明
temprop=”name”網頁標題或是顯示內容的標題
itemprop=”description”網頁內容的簡單說明、建議以二至四句話來說明。
itemprop=”image”分享的縮圖(網頁的預覽圖)
itemscope itemtype網頁類型 您可以在http://ogp.me/#types查看所有的類型。

使用範例

<!-- 更新 html 標記,加入項目範圍和項目類型屬性。 -->
<html itemscope itemtype="http://schema.org/Article">

<!-- 將以下 3 個標記加到head標籤內中。 -->
<meta itemprop="name" content="顯示的標題">
<meta itemprop="description" content="文章的簡短摘要">
<meta itemprop="image" content="http://yourdonaim.com/image-name.jpg">

你可以使用Google’s Structured Data Testing Tool來驗證Schema標記的設置是否正確。

Twitter Card

Twitter Card讓我們的網頁在”推”的時候可以有較豐富的圖文資訊,依不同的” Card ”類型還有影音、app下載連結等各種資訊。Twitter Card共有7種類型,其中以Summary Card和Photo Card較為常用。另外購物網站可以使用Product Card來優化商品的資訊。你可以在這裡查看所有的twitter card類型。底下我們以Summary Card來做示範。

標籤說明
twitter:title網頁標題或是顯示內容的標題
twitter:description200字以內的說明文字
twitter:image分享的縮圖(網頁的預覽圖),圖片尺寸最小為 280×150 pixels。
twitter:cardTwitter Card的類型。
twitter:site填入Twitter 的帳號

使用範例

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@yournameID" />
<meta name="twitter:title" content="顯示的標題" />
<meta name="twitter:description" content="文章的簡短摘要" />
<meta name="twitter:image" content="http://yourdonaim.com/image-name.jpg" />
<meta name="twitter:url" content="http://yourdonaim.com/" />

你可以使用Twitter的Card Validator tool來驗證Twitter Card的設置是否正確。

同時使用 Open Graph, Twitter Card 及Schema

問題來了,這麼多的社群平台,如何用最簡單的方式來決定分享出去的長相呢?為了符合各個社群網站平台的需求,我們必須同時使用這些社群分享中繼標籤(Social Meta Tag)。

標籤支援平台
Open GraphFacebook, Google+, LinkedIn, Twitter, Pinterest
SchemaGoogle+, Pinterest
Twitter CardTwitter
<title> 和 <meta tag>Google+

Open Graph, Twitter Card 及Schema的比較

標籤Open GraphSchemaTwitter Card
標題og:titletemprop=”name”twitter:title
網址og:urltwitter:url
已經從Twitter Cards 標籤清單中移除
說明og:descriptionitemprop=”description”twitter:description
縮圖og:imageitemprop=”image”twitter:image
內容類型og:typeitemscope itemtype
Twitter卡類型twitter:card

看到這裡,你有沒有發現:Open Graph, Twitter Card 及Schema非常相似,同樣都有標題、描述及圖片。在使用時我們要省略掉重複的部份、避免網頁原始碼太過冗長。因為Open Graph的支援性最高、因此屬性相似的標籤、我們一律使用Open Graph Tags。

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@yournameID" />
<meta name="twitter:creator" content="@yournameID" />
<meta property="og:url" content="http://yourdonaim.com/" />
<meta property="og:title" content="顯示的標題" />
<meta property="og:description" content="文章的簡短摘要" />
<meta property="og:image" content="http://yourdonaim.com/image-name.jpg" />

結論:為什麼要使用Social Meta Tags

使用Social Meta Tags最直接的影響就是為了提高點閱。良好設定的內容包括吸引人的標題與精采的圖片,往往能夠提高分享的內容在社群平台中的點閱率。

發佈留言