ga-post 2 [HTML9]

2016-07-26

轉貼顯示錯誤圖文?讓 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+ 連部落格名稱和描述(中繼標記)都抓不到。

Google+ 抓不到首頁圖片、部落格名稱、和描述(中繼標記)怎麼辦?
明明是首頁連結,但 G+ 只會顯示我的最新文章圖片和標題!

最近我終於把這個問題(完美地…應該吧)解決了!以下將會分享我的作法。一如既往,我不是網頁語法專業,所以提供的通常比較容易理解和執行,若有不夠精確之處,還請見諒。我將先說明語法的安裝過成,再解釋語法的緣由和意義,方便你自行調整。以下這個教學可以成功做到三件事情,而且不論在 FB、G+、或 Twitter 都能完美執行:
  1. 張貼首頁類型頁面連結(包含首頁、標籤文章列表、封存文章列表)可以正確顯示你的品牌圖、部落格名稱、以及部落格描述(中繼標記)。
  2. 張貼文章連結可以正確顯示每篇文章的首圖、文章名稱、以及文章摘要(搜尋說明)。
  3. 張貼網頁連結可以正確顯示各自網頁的首圖、頁籤名稱、以及網頁摘要(搜尋說明)。

語法步驟


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'/>,在這句之前貼上下面整段語法:

<!-- Facebook og 與 Google meta 設定 begin -->
<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>
<!-- Facebook og 與 Google meta 設定 end -->

在上面的語法中,出現 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 粉絲專頁,可以用它的網址當作「你的個人頁面連結」填入語法,這樣分享在臉書上時,如果讀者滑鼠指到你的名字,會出現以下效果:

設定 article:author 為臉書粉絲專頁 Facebook Page
讀者可以很容易找到你的粉絲專頁和和按讚

語法調整


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

blogger 首頁在 facebook 正確顯示圖片、題目、摘要
調整之後,(我的)首頁在 FB 就能正確顯示
blogger 首頁在 google+ 正確顯示圖片、題目、摘要
調整之後,(我的)首頁在 G+ 就能正確顯示

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

blogger 文章在 facebook 正確顯示圖片、題目、摘要
調整之後,(我的)文章在 FB 就能正確顯示
blogger 文章在 google+ 正確顯示圖片、題目、摘要
調整之後,(我的)文章在 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'/>」這三句可以拿掉。

blogger 網頁(頁籤)在 facebook 正確顯示圖片、題目、摘要
調整之後,(我的)網頁在 FB 就能正確顯示
blogger 網頁(頁籤)在 google+ 正確顯示圖片、題目、摘要
調整之後,(我的)網頁在 G+ 就能正確顯示

最後小提醒


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


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


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

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

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

<!-- Facebook og 與 Google meta 設定 begin -->
<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>
<!-- Facebook og 與 Google meta 設定 end -->

語法說明:
  • 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 你想要顯示的卡片樣式。前者是大型卡片,圖片很大;後者是一般卡片,圖片較小。

blogger 頁面在 twitter 正確顯示圖片、題目、摘要
Twitter 大型卡片('summary_large_image')
blogger 頁面在 twitter 正確顯示圖片、題目、摘要
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"'> 上方就可以囉!

最後的最後小提醒: