轉貼顯示錯誤圖文？讓 Facebook Google+ Twitter 正確分享部落格名稱、圖片和摘要（2016-07-26 更新）

重大更新！補充讓 Twitter 貼文顯示圖片和摘要的方法！

第一次試做的朋友請從頭依序往下看，先學處理 Facebook 和 Google+ 的方法，再接著補上 Twitter 的語法。已經做過的朋友，請直接往下拉到 Twitter 部份的教學！

為什麼正確顯示圖文很重要

Blogger 文章的瀏覽率，很大程度來自網路社群的轉貼和分享。部落格格主也都知道圖片和摘要是吸引讀者點閱的關鍵。

雖然格主很用心挑選文章的附圖，也為了 SEO 認真撰寫「搜尋說明」，但無奈的是，因為 Facebook 和 Google+ 能夠辨識的 meta 標籤（註）不同~~（但 Twitter 與 FB 相同）~~，以至於我們預想的圖片和摘要常常無法顯示，或者不同社群媒體抓到的是不同圖片、不同摘要，嚴重的話有時甚至抓不到圖片、看不到摘要。最重要的是，我們經常希望部落格首頁、文章、和網頁（頁籤）被轉貼的時候能夠顯示各自獨立的圖片和摘要。本文將要告訴你如何做到！

在 Blogger 為 Facebook Google+ Twitter 正確設定 Meta Tags 以便分享圖文

photo-credit: Wilfred Iven

註：Meta 標籤就是用來告訴社群媒體或搜尋引擎「請抓這裡的資訊去用」的一種 HTML 語法。

FB~~（和 Twitter）~~夠辨識的標籤叫做 OG（open graph），這個語法沒有內建在 blogger 模板中，所以需要從無到有自己寫。網路上雖有教學，但通常有點凌亂，而且和 blogger 原生的 meta 標籤無法有效整合，導致雖然抓得到圖片卻因為語法凌亂而拖慢網頁載入速度。

另一方面， G+ 雖是自家產品，對於 blogger 有較好的支持，但是一直有個問題很難解決：G+ 抓不到你的 blogger 首頁專用圖（這有點像是你的品牌 LOGO）！也就是說，當你張貼首頁連結，Google＋只能抓到你最新一篇文章的首圖，而不是代表你部落格的品牌圖；更慘的是，有時候 G+ 連部落格名稱和描述（中繼標記）都抓不到。

明明是首頁連結，但 G+ 只會顯示我的最新文章圖片和標題！

最近我終於把這個問題（完美地…應該吧）解決了！以下將會分享我的作法。一如既往，我不是網頁語法專業，所以提供的通常比較容易理解和執行，若有不夠精確之處，還請見諒。我將先說明語法的安裝過成，再解釋語法的緣由和意義，方便你自行調整。以下這個教學可以成功做到三件事情，而且不論在 FB、G+~~、或 Twitter~~ 都能完美執行：

張貼首頁類型頁面連結（包含首頁、標籤文章列表、封存文章列表）可以正確顯示你的品牌圖、部落格名稱、以及部落格描述（中繼標記）。
張貼文章連結可以正確顯示每篇文章的首圖、文章名稱、以及文章摘要（搜尋說明）。
張貼網頁連結可以正確顯示各自網頁的首圖、頁籤名稱、以及網頁摘要（搜尋說明）。

語法步驟

Step 1
在 <head> 之前找到 <html b:version='2' class='v2'……> 這段語法，然後在語法中（「>」之前）加入 itemscope='itemscope' itemtype='http://schema.org/Blog' 這段語法，變成 <html b:version='2' class='v2'……itemscope='itemscope' itemtype='http://schema.org/Blog'>（不知道如何快速找到特定語法的朋友請參考這篇文章）。

Step 2
在 <head>…</head> 之間找到 <b:include data='blog' name='all-head-content'/>，在這句之前貼上下面整段語法：


<meta property='og:site_name' expr:content='data:blog.title'/>
<meta property='article:author' content='你的個人頁面連結'/>
<meta property='og:description' itemprop='description' expr:content='data:blog.metaDescription'/>
<b:if cond='data:blog.pageType == "index"'>
<meta property='og:type' content='blog'/>
<meta property='og:title' itemprop='name' expr:content='data:blog.title + "分隔線與部落格副標題"'/>
<meta itemprop='keywords' content='關鍵字1,關鍵字2,關鍵字3,……'/>
<meta property='og:image' itemprop='image' content='部落格品牌圖網址'/>
<b:else/>
<meta property='og:type' content='article'/>
<meta property='og:title' itemprop='name' expr:content='data:blog.pageName + "分隔線與部落格名稱"'/>
<meta itemprop='keywords' expr:content='data:blog.pageName'/>
<b:if cond='data:blog.postImageUrl'>
<meta property='og:image' itemprop='image' expr:content='data:blog.postImageUrl'/>
<b:else/>
<meta property='og:image' itemprop='image' content='自訂圖片網址'/>
</b:if>
</b:if>


在上面的語法中，出現 property='og: xxx' 就是給 FB 看的 meta 標籤，而 itemprop='xxx' 則是給 G+ 看的。有的項目只有 FB 會看（例如 site_name），有的項目只有 G+（與搜尋引擎）會看（例如 keywords）。

關鍵字說明（語法中粗體字）：
data:blog.title－部落格名稱
data:blog.metaDescription－所在頁面的說明描述（包含中繼標籤、搜尋說明）
data:blog.pageType －所在頁面的類型
data:blog.pageName－所在文章或網頁的標題
data:blog.postImageUrl－所在頁面的首圖

語法說明

Step1 說明：
G+ 看的是 itemprop，但 blogger 原本內建的 itemprop 是放在每篇文章的語法段落 <body>…</body> 之中，這就是為什麼你貼首頁連結但 G+ 永遠都只能抓到第一篇文章的首圖——瀏覽器從頭開始讀語法，但一直讀到文章部份才出現 itemprop！只要把 itemprop 語法加到 head 的段落裡，就可以解決這個問題。

Step2 （語法的分別用途）：

綠色－不論是首頁類型頁面、文章、或網頁，所有頁面都提交相同的部落格名稱（og: site_name），提交作者個人網頁（設定 article:authorcc），摘要描述（metaDescription）自動抓取中繼標記或搜尋說明，並提交自己設置的部落格關鍵字。
藍色－如果是首頁類型頁面（index），就將所在頁面性質（og:type）辨識為部落格（blog），標題顯示為「部落格名稱＋分隔線與部落格副標題」，且 FB 和 G+ 都顯示品牌圖片。
橘色－如果不是（b:else/）首頁類型頁面，而是文章和網頁的時候，將頁面性質辨識為文章（article），將標題顯示為「文章或網頁名稱＋分隔線與部落格名稱」，並自動把文章或網頁標題轉成關鍵字。
紅色－如果文章或網頁有圖片的話，FB 和 G+ 自動顯示首圖，如果沒有（b:else/）則顯示自己設定的圖片。

以上可以看得出來，Step2 整段語法有一個邏輯順序，因為瀏覽器讀取語法是「從上到下」，所以會先從第一段開始「工作」，一旦發現面型態不符合段落中的規定（如果 - b:if），它就會跳往下一段繼續工作。

補充（2016-07-26）：如果你有自己的 FB 粉絲專頁，可以用它的網址當作「你的個人頁面連結」填入語法，這樣分享在臉書上時，如果讀者滑鼠指到你的名字，會出現以下效果：

讀者可以很容易找到你的粉絲專頁和和按讚

語法調整

藍色語法：

「分隔線與部落格副標題」可以自行調整，例如，我的部落格名稱是「社技哲學」，我設定了分隔線「｜」和副標題「Philosophy for Technology and Society」，所以首頁（或標籤文章列表、封存文章列表）在 FB 與 G+ 看起來就會是「社技哲學｜Philosophy for Technology and Society」。分隔線類型可以自行選擇，建議使用全形符號，左右間隔與高低位置才會準確，例如「＠」或「－」等。當然你也可以選擇不要副標題（記得連「+」也拿掉）。
「關鍵字」之間用半形逗號「,」分開，中間不需要空白（雖然爬文看到有人說關鍵字現在對於 SEO 幫助不大，但我建議還是寫上，畢竟不佔空間、聊勝於無）。
「網誌品牌圖網址」的部份請記得將 https:// 改成 http://，以免會有讀取不到的問題。

調整之後，（我的）首頁在 FB 就能正確顯示

調整之後，（我的）首頁在 G+ 就能正確顯示

橘色語法：

「分隔線與部落格名稱」可以自行調整，例如，我這篇名為〈臉書可以讓我們變成公民嗎？〉的文章，在 FB 與 G+ 看起來就是「臉書可以讓我們變成公民嗎？｜社技哲學」。

調整之後，（我的）文章在 FB 就能正確顯示

調整之後，（我的）文章在 G+ 就能正確顯示

紅色語法：

這裡請一定要使用 data:blog.postImageUrl 而不是網路上多數教學說的 data:blog.postImageThumbnailUrl！因為 Thumbnail 表示縮圖，所以一旦你有讓 blogger 在你的頁面產生任何文章或網頁首圖的縮圖（例如讓「熱門文章」或「精選文章」小工具顯示縮圖），那麼使用 data:blog.postImageThumbnailUrl 的後果就是 FB 抓不到首圖（或者抓到第二張），因為 FB 能抓到的圖片尺寸必需在 200*200 以上，但縮圖尺寸太小。改成本文的 data:blog.postImageUrl 就能一勞永逸解決這個問題，也不影響部落格其他地方的縮圖顯示。
「自訂圖片網址」的做法與藍色語法區的「網誌品牌圖網址」一樣，如果你選擇使用品牌圖，那麼就填入相同網址。當然你也可以另設圖片。如果你幾乎每篇文章和每個網頁都至少會放一張圖片，那麼其實「<b:else/><meta content='自訂圖片網址' property='og:image'/><meta content='自訂圖片網址' itemprop='image'/>」這三句可以拿掉。

調整之後，（我的）網頁在 FB 就能正確顯示

調整之後，（我的）網頁在 G+ 就能正確顯示

最後小提醒

調整過後記得去 Facebook Debugger 輸入網址，讓 FB重新抓取的你部落格首頁、文章、網頁資料（每頁都要貼）。

〔補充〕讓 Twitter 貼文顯示圖片和摘要的方法！

原本 Twitter 只能顯示連結文字、沒有預覽圖片和摘要，但後來推出了 Twitter Card 語法，只要按照語法規則設定，就能讓你的文章轉貼到 Twitter 時顯示圖片和摘要，比起單純的連結文字，Twitter Card 顯然更有吸引力！有注意到嗎？Twitter Card 還會自動把推文中的連結文字（http://...）「吃掉」，讓版面更簡潔！

上方推文的連結沒有設定 Twitter Card，但下方推文則有，感覺差很多 XD

以下語法的紫色粗體部份就是我們新加入的 Twitter 語法（其他和前面一模一樣）：


<meta property='og:site_name' expr:content='data:blog.title'/>
<meta property='article:author' content='你的個人頁面連結'/>
<meta property='og:description' itemprop='description' name='twitter:description' expr:content='data:blog.metaDescription'/>
<meta content='你網站的推特帳號' name='twitter:site'/>
<meta content='你個人的推特帳號' name='twitter:creator'/>
<b:if cond='data:blog.pageType == "index"'>
<meta property='og:type' content='blog'/>
<meta property='og:title' itemprop:'name' name='twitter:title' expr:content='data:blog.title + "分隔線與部落格副標題"'/>
<meta itemprop='keywords' content='關鍵字1,關鍵字2,關鍵字3,……'/>
<meta property='og:image' itemprop='image' name='twitter:image:src' content='部落格品牌圖網址'/>
<meta content='summary_large_image' name='twitter:card'/>
<b:else/>
<meta property='og:type' content='article'/>
<meta property='og:title' itemprop:'name' name='twitter:title' expr:content='data:blog.pageName + "分隔線與部落格名稱"'/>
<meta itemprop='keywords' expr:content='data:blog.pageName'/>
<meta content='summary' name='twitter:card'/>
<b:if cond='data:blog.postImageUrl'>
<meta property='og:image' itemprop='image' name='twitter:image:src' expr:content='data:blog.postImageUrl'/>
<b:else/>
<meta property='og:image' itemprop='image' name='twitter:image:src' content='自訂圖片網址'/>
</b:if>
</b:if>


語法說明：

name='twitter:description' 用來告訴 Twitter 你的摘要描述（中繼標記或搜尋說）
<meta content='你網站的推特帳號' name='twitter:site'/> 如果你的網站（或部落格）有專屬推特帳號，可以填入（@XXXXX）。
<meta content='你個人的推特帳號' name='twitter:creator'/> 如果你有個人推特帳號，可以填入（@XXXXX）。
name='twitter:title' 用來告訴 Twitter 你想要顯示的頁面名稱。
name='twitter:image:src' 用來告訴 Twitter 你想要顯示的圖片網址。
<meta content='summary_large_image' name='twitter:card'/> 或 <meta content='summary' name='twitter:card'/> 用來告訴 Twitter 你想要顯示的卡片樣式。前者是大型卡片，圖片很大；後者是一般卡片，圖片較小。

Twitter 大型卡片（'summary_large_image'）

Twitter 小型卡片（'summary'）

語法調整：

上述語法讓首頁連結貼到 Twitter 時顯示大圖，但文章（或網頁）連結則顯示小圖。我之所以沒有全部採用大圖，是因為我的部落格主要以文字為重（雖然為了親和力配上很多圖 XD），所以不希望文章轉貼到 Twitter 時只有圖片搶眼。分開的效果如下：

screenshot-twitter.com%2B2016-07-25%2B22-38-29-

網站首頁和文章轉貼在 Twitter 顯示不同樣式

如果你希望不論是首頁或文章連結都顯示大圖的話，可以把原來語法中的 <meta content='summary' name='twitter:card'/> 拿掉，然後再把 <meta content='summary_large_image' name='twitter:card'/> 移到 <b:if cond='data:blog.pageType == "index"'> 上方就可以囉！

最後的最後小提醒：