當有人將你網站的內容分享到 Facebook, Google+, Twitter這些社群網站平台時，如果你對於這些分享的內容長相是如何決定的，這就是本文的目的。這些社群網站會從網站中抓取相關資訊顯示在平台上，但這些自動抓取的資訊不見得符合理想中網站的內容，因為社群網站只能猜測哪些內容重要、哪些不重要。這產生了一個問題，如果你重視網站被分享到社群平台的樣式，那對於每一個網頁作良好的 Open Graph 設定，就顯得相當重要。這篇文章就是要教你如何利用社群分享的中繼標籤(social meta tags)來自訂分享內容的標題、圖片和說明文字。
首先先來了解甚麼是 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:description | 200字以內的說明文字 |
| twitter:image | 分享的縮圖(網頁的預覽圖)，圖片尺寸最小為 280×150 pixels。 |
| twitter:card | Twitter 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 Graph | Facebook, Google+, LinkedIn, Twitter, Pinterest |
| Schema | Google+, Pinterest |
| Twitter Card | |
| <title> 和 <meta tag> | Google+ |
Open Graph, Twitter Card 及Schema的比較
| 標籤 | Open Graph | Schema | Twitter Card |
|---|---|---|---|
| 標題 | og:title | temprop=”name” | twitter:title |
| 網址 | og:url | twitter:url 已經從Twitter Cards 標籤清單中移除 | |
| 說明 | og:description | itemprop=”description” | twitter:description |
| 縮圖 | og:image | itemprop=”image” | twitter:image |
| 內容類型 | og:type | itemscope 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最直接的影響就是為了提高點閱。良好設定的內容包括吸引人的標題與精采的圖片，往往能夠提高分享的內容在社群平台中的點閱率。