當有人在Facebook, Google+, Twitter這些社群網站平台分享您網站的內容時，這些社群網站會自動從我們的網站中抓取分享的資訊。但這些自動抓取的資訊不見得符合網站的內容，因為社群網站只能猜測哪些內容重要、哪些不重要。若是可以由我們自己決定分享的資訊，是不是可以更符合網站的內容呢？如果希望可以控制分享的資訊該怎麼做呢？這篇文章就是要教你如何利用社群分享的中繼標籤(social meta tags)來自訂分享內容的標題、圖片和說明文字。
Open Graph Tags
Open Graph Tags是非常簡單好用的工具，跟一般的中繼標籤一樣，必須在<head>標籤之內使用。它讓我們可以輕鬆的標記網頁的結構化訊息、包含標題、描述、預覽圖片等。現在主流的社群網站平台都支援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="自訂網頁在Facebook, Google+等社群平台的顯示內容" />
<meta property="og:description" content="透過社群分享中繼標籤，我們可以優化顯示在社群網站上的內容，包含標題、縮圖、說明文字、作者…等，還有其他豐富的訊息。這篇文章就要教你如何使用社群分享中繼標籤來自訂顯示在社群網站上的分享訊息。" />
<meta property="og:image" content="http://blog.shihshih.com/social-meta-tag/demo/images/social-sharing.png" />
<meta property="og:url" content="http://blog.shihshih.com/social-meta-tag/" />我們可以使用Facebook debug工具來檢查標籤的設置是否正確。
Schema標記
Schema 是另一種標記社群分享資訊的方法，目前支援的有Google+, 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="自訂網頁在Facebook, Google+等社群平台的顯示內容">
<meta itemprop="description" content="透過社群分享中繼標籤，我們可以優化顯示在社群網站上的內容，包含標題、縮圖、說明文字、作者…等，還有其他豐富的訊息。這篇文章就要教你如何使用社群分享中繼標籤來自訂顯示在社群網站上的分享訊息。">
<meta itemprop="image" content="http://blog.shihshih.com/social-meta-tag/demo/images/social-sharing.png">你可以使用Google snippet工具來產生Schema標記，使用Google’s Structured Data Testing Tool來驗證Schema標記的設置是否正確。
Twitter Card
Twitter 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="@sullen1209" />
<meta name="twitter:title" content="自訂網頁在Facebook, Google+等社群平台的顯示內容" />
<meta name="twitter:description" content="透過社群分享中繼標籤，我們可以優化顯示在社群網站上的內容，包含標題、縮圖、說明文字、作者…等，還有其他豐富的訊息。這篇文章就要教你如何使用社群分享中繼標籤來自訂顯示在社群網站上的分享訊息。" />
<meta name="twitter:image" content="http://blog.shihshih.com/social-meta-tag/demo/images/social-sharing.png" />
<meta name="twitter:url" content="http://blog.shihshih.com/social-meta-tag/" />你可以使用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 | 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="@sullen1209" />
<meta name="twitter:creator" content="@sullen1209" />
<meta property="og:url" content="http://blog.shihshih.com/social-meta-tag/" />
<meta property="og:title" content="自訂網頁在Facebook, Google+等社群平台的顯示內容" />
<meta property="og:description" content="透過社群分享中繼標籤，我們可以優化顯示在社群網站上的內容，包含標題、縮圖、說明文字、作者…等，還有其他豐富的訊息。這篇文章就要教你如何使用社群分享中繼標籤來自訂顯示在社群網站上的分享訊息。" />
<meta property="og:image" content="http://blog.shihshih.com/social-meta-tag/demo/images/social-sharing.png" />為什麼要使用Social Meta Tags
使用Social Meta Tags最直接的影響就是：由我們自己決定網頁顯示在社群網站時的樣子。就像<title>和<meta name=”description”>標籤有助於提高搜索引擎排名，適當的社群中繼標籤可以優化顯示的圖片及文字資訊，讓我們的網站在社群網站曝光時的內容更吸引人，增加來自社群網站的流量，提高點擊率。
請問line的話要怎麼使用縮圖，他好像會亂抓，以前是抓FB現在好像不是~~
line和facebook都是抓og:image哦。
你好，
我嘗試使用網址然後可以預覽圖片，結果FB成功顯示，但是如果用LINE，我一定要在網址前面加上https://才會正常顯示，請問這是哪裡出了問題？
請問是什麼情況下看不到，如果只是使用https://poker.line.naver.jp/檢查時看不到縮圖、不需要太緊張，只要他抓到的圖片連結是有效的就沒有問題了
請問 ELLEN …
這篇也是你寫的嗎？
還是對方是直接抄的 … 🤔
https://www.webwork.com.tw/how-to-set-open-graph-and-twitter-card.html
對方應該是一間公司
如果是抄的，感覺很沒素養
（建議檢舉）