2015年4月9日

分享文章到 Facebook 的 Meta 設定﹍縮圖+標題+摘要+作者資訊

A+
最近剛好有幾位讀者都詢問到 FB 分享文章時,會遇上的各種狀況,例如標題、摘要敘述無法正常顯示,或是想要自訂縮圖等等。

這些問題牽涉的層面不太簡單,需要瞭解的知識不少,例如 FB 自己制訂的 Open Graph 標記規範。不過網路可以找到的解答文章倒是不少,因此這些任務可以說是有點困難又不太困難。

而特地再寫一篇文章也是有些好處,能將所有常見問題統整在同一篇,查閱上比較方便,以下採用問答的方式來呈現。



Q1:如何讓標題及縮圖正常顯示?


1. 啟動 Open Graph protocol

FB 制訂了一套 Open Graph protocol,讓站長們將 Open Graph 標記語言 (og) 放入網站的範本之中,那麼當分享文章到 FB 時,就可以根據這些 og 標記的內容,來讀取對應的標題、摘要、縮圖等等資訊。

要怎麼啟動 Open Graph 標記語言、讓 og 這個標記生效呢?根據最新的「官方範例」,我們可看到這一行:

<html prefix='og: http://ogp.me/ns#'>
將上圖綠字的部分,加入範本中 html 這個標籤之內即可。不過這個語法比較新,屬於 HTML5 的語法,目前比較常見的是舊版語法,例如下面的綠字部分:

<html xmlns:og='http://ogp.me/ns#'>
但如果你的 html 標籤已經有舊版語法,那麼不一定要改成新版語法。而  html 標籤若有其他屬性參數,請保留不動即可。


2. 設定 Meta 標籤

接下來就可以將 og 標記放入各個 Meta 標籤之中,並置放於範本中 <head> ~ </head> 之間的位置。根據「Open Graph protocol 官方文件」,基本的設定有下面四項,:

<meta property="og:title" content="網頁標題"></meta>
<meta property="og:type" content="網站類型"></meta>
<meta property="og:url" content="網址"></meta>
<meta property="og:image" content="縮圖網址"></meta>


以上綠字的部分為 og 標記,藍字的部分是需要填入的內容,也就是分享到 FB 時,會顯示出來的資訊。如果是部落格平台,藍字的部分通常有語法可以自動產生,不必每篇文章自行填寫,否則就累翻了!

但不能自動產生的有 og:type,如果是部落格平台,"網站類型" 可填入 "blog"。

除了以上的基本項目,這兩個也是常用的項目:

<meta property="og:description" content="網頁敘述"></meta>
<meta property="og:site_name" content="網站名稱"></meta>

如果對其他額外項目有興趣的話,請再參考官方文件進行設定。


3. Blogger 語法

瞭解原理之後,以上藍字敘述的部分,請根據自己的部落格平台來設定。而 Blogger 平台的話,這篇「讓 Facebook、Google+ 轉貼圖文正確顯示首頁與網頁的名稱、圖片和摘要」說明得很詳細,可直接按安裝步驟來做即可。

這篇文章的優點是,額外說明了網站首頁的設定,讓首頁被分享時,能有較佳的分享資訊呈現。



Q2:如何讓摘要敘述顯示出來?


有的 Blogger 讀者按照以上設定進行後,可能會發現,明明 Meta 標籤的設定內容沒什麼錯誤,但分享到 FB 的文章卻無法出現摘要敘述。

這個項目的原理是,Blogger 為了加強單篇文章的 SEO 效果,讓每篇文章都能各自設定摘要敘述,但需要在後台開啟幾個選項。請到後台 → 設定 → 搜尋偏好設定 → 中繼標記 → 按下「編輯」:



如上圖,檢查「要啟用搜尋說明嗎?」要勾選 "是"。儲存之後,在後台編輯文章時,右半邊的「文章設定」就會出現「搜尋說明」這個選項。

詳細說明請參考「Blogger 文章設定選項」→「六、搜尋說明」,想要在 FB 分享文章時能出現摘要敘述,得確定該篇 Blogger 文章有填寫「搜尋說明」的內容才行!



Q3:我的摘要敘述好像被切斷了?


正常來說,為了配合版面的比例,"標題 + 摘要敘述" FB 最多只會顯示三行,就像下面這樣:




超過三行的部分,就會被截斷,版面才不會太難看。但有些例子看起來特別怪異,也看不太出原因,就像下面這篇文章:



摘要怎麼會只有一個英文字呢,明明就寫了好幾行啊!FB 是不是在亂搞,這樣的 PO 文貼出去能看嗎?

這件事看來有些蹊蹺,於是拿了多篇文章進行交叉比對測試,終於找出原因所在,以下是分析結果:

  • FB 開發環境為英文,並未針對中文進行優化。
  • 依照每個英文單字用空格分開的特性,FB 偵測 "標題 + 摘要" 的長度滿三行後,自動抓取最後一個空格之前的英文單字,並顯示到該單字為止
  • 中文因為不需使用空格,因此直接抓取滿三行前的最後一個文字。
  • 但中英夾雜時,判斷依據仍以英文規則優先,所以滿三行之前的最後一個英文單字後面若有空格,之後的內容會被截斷。

因此兇手抓出來了,就是 "空格符號"。為了驗證分析結果,以下為實測畫面,特地將英文單字後的空格去除:



將 "Google" 這個單字後面的空格刪去後,摘要敘述就正常顯示出來了!



Q4:如何讓縮圖顯示指定的那一個?


讀者問到「若一篇文章中有好幾張圖,該如何指定某張圖成為FB的縮圖?」,這個問題可以分幾個面向來討論:

1. 從 FB 選擇

有兩種情況可以從 FB 分享畫面來選擇圖片:
  • Meta 標籤設定了多個 og:image 標記時,FB 會讀取到多張圖
  • 沒有正確設定 og 標記時,FB 可能從別種標記語言來判定,自行抓取多張圖



結果就像上圖一般,紅框處會出現箭頭,約可選擇三張圖片來成為該篇 PO 文的縮圖。但沒有正確設定 og 標記的話,會抓到哪些圖非我們能控制,因此不建議採用這個方式,將無法自訂指定的縮圖。


2. 文章中的第一張圖

如果有按照「Q1:如何讓標題及縮圖正常顯示?」來設定 og 標記,那麼正常情況下 og:image 標記只會抓到一張圖 → 文章中的第一張圖

所以要控制 "某張圖成為FB的縮圖" 這件事就簡單了,把指定的圖片放在文章中最前面的位置即可。


3. 使用隱形圖片

但是有某些情境,想當縮圖的圖片,不一定適合擺在最前面的位置,因為版面或整體感可能變得突兀。那麼在這類的情況下,可以使用隱形圖片的技巧,將指定的圖片隱藏,並放在文章中最前面的位置即可,詳細的操作方法請參考這篇:




Q5:怎麼顯示大尺寸縮圖?


借用前面這張圖當範例,當圖片比例不對、大小不對時,就無法顯示大尺寸縮圖:




該用多大的圖片尺寸才能顯示最大的寬度,FB 的規則很多,如果要簡單說的話,根據這篇「Facebook Photos Size Guide / 2015」,至少得使用 484(寬) x 252(高)px 的尺寸。

如果覺得全英文看起來吃力,可以另外參考這篇「Facebook 放大分享網址的預覽圖片」。



Q6:如何顯示作者資訊(及 FB 連結)?


如下圖最下方的「由 Wayne Fu 上傳」,FB 分享貼文可以顯示作者暱稱的文字,我們稱為 "圖 A":




2015.10.8 更新:這則 Blogger 中文論壇貼文詢問「怎麼設定og,才能在發連結的時候帶FB粉絲專頁的作者」,如下圖,該則 FB 貼文的作者資訊,不但能顯示為超連結,滑鼠經過時還能顯示 FB 專頁的畫面,我們稱為 "圖 B":




要如何顯示作者相關資訊呢?請接續「Q1:如何讓標題及縮圖正常顯示?」→「2. 設定 Meta 標籤」的步驟,增加下面這行 META 標籤的內容:

<meta content='https://www.facebook.com/wayne.fu.blogger' property='article:author'/>
紅字網址的部分請替換為自己的作者資訊連結,根據你填入的連結內容,會有不同的效果:
  • 如果填入 G+ 個人資訊頁面的連結,例如 WFU 的 G+ 連結為 https://plus.google.com/+WayneFu/,那麼該篇文章被轉貼到 FB 後,顯示的效果就如同前面的 "圖 A",會顯示作者暱稱,但不顯示連結。
  • 如果填入 FB 個人頁/專頁 的連結,那麼該篇文章被轉貼到 FB 後,顯示的效果就如同上面的 "圖 B",作者暱稱會以超連結顯示、並顯示額外資訊
這個現象不能說是 FB 大小眼,在 FB 自己的地盤享有地主優勢算是無可厚非。


2016.8.5 補充:感謝留言 #13 提供的資訊,如果作者連結使用的是「FB 個人頁」的話,必須設定為公開,系統才能抓到 FB 個人頁的連結。



Q7:更改後 FB 還是顯示原來的資訊?


這是本篇重要性屬一屬二的問題,大部分相關文章也會提到。由於分享到 FB 的每篇文章,在 FB 伺服器都會有快取資料,這可以減少機器人重複爬取的工作、降低伺服器負擔,但也會讓文章修改後的資訊無法即時顯示出來。

因此當各項相關資訊修改後,若想立即看到呈現在 FB 的結果,務必進入這個 FB 官方偵錯網址:




輸入網址後,按下「Fetch new scrape information」按鈕,就可以強制 FB 重新更新快取資料了。


更多 Facebook 相關文章:

41 則留言:

  1. 這個設定對於有「假性」強迫症的人來說,真痛苦...。尤其發現自己每一篇文章都沒有加入過「搜尋說明」的時候...。本來想刪除「meta expr:content='data:blog.metaDescription' itemprop='description' property='og:description'/」這一段,眼不見為淨,但最後還是妥協了。

    回覆刪除
    回覆
    1. SEO 比的就是誰比較勤勞,多用一分心、多出一分力,就能比別的網站多一分的效果 ^^

      以我當初開始使用「搜尋說明」的心得,所有舊文章都要加這一項可是大工程,也沒那個功夫。因此最後採取 CP 值比較高的作法,先從熱門文章、搜尋引擎入口文章這些開始加,比較冷門的文章就隨他去了,因此我有很多文章到現在也是都沒處理的~~

      刪除
    2. 「搜尋引擎入口文章」是指搜尋自己的部落格名稱後,比較前面面次出現的文章嗎?

      我目前也是先往高 CP 值的熱門文章處理,還好我屬於難產型的部落客,新增的文章比例已經大幅減少(本來就少,哈哈!)。比較可怕的是~看到熱文中舊往生澀的文章排版,會想順便整理一下,想說總不能只有分享的門面好看,點進來卻有去到上一個世紀的感覺吧?

      刪除
    3. "搜尋引擎入口文章" 代表訪客從搜尋引擎進入你網站的文章,也就是搜尋而來的文章,通常就是熱門關鍵字的文章。從 GA 可以查到這些文章,針對這幾篇先設定 "搜尋說明" 即可,有餘力的時候,再照顧其他文章吧~~

      刪除
    4. 喔~原來是從 Google 流量分析可以看到,了解,謝謝!

      刪除
  2. 最近分享文章到Facebook,文章標題都會變成網址,而不是文章的標題,摘要也無法正常顯示,必須除錯才能恢復正常,而且70篇文章有50篇是種情況。(手動為50篇文章一一除錯,手好痠)

    能不能一次將網誌所有的文章進行除錯,因為一個一個 (50篇) 除錯真的很累。或者能不能從 OG 去強制改回文章標題及摘要,但我不會設定,使用 OG 會造成每篇文章顯示的標題都一模一樣。

    回覆刪除
    回覆
    1. 這算客製需求,可發案給我,另外寫程式批次處理。

      刪除
    2. OK 我知道了,我還是自己找 OG 的寫法,從 OG 改善,看能不能自動抓取文章個別的標題。

      我試試把這個 data:post.title 寫入 OG 的 og:title 裡,用 IF 判斷式包覆 meta 限定文章頁面執行。

      刪除
    3. 我找到一篇文章,提供您參考:
      兩分鐘幫Blogger設定好Facebook的OG

      他的og:title 寫法是:
      < meta expr:content='data:blog.title' property='og:title' />

      刪除
    4. 仔細讀一下這一篇吧,你需要的資料都找得到。

      刪除
  3. 大大你好今天遇到問題, 已加入語法

    http://3.bp.blogspot.com/-1wjM06JzBhY/VhZZLjuzxyI/AAAAAAAAMp8/vEimrud_o_U/s1600/fb-meta.jpg

    但FB還是沒辦法抓到, 摘要敘述 也在偏好設定 有打好

    回覆刪除
    回覆
    1. 看了附圖,你的 content 裡面的設定完全沒更改喔,可參考「Q1:如何讓標題及縮圖正常顯示?」→「3. Blogger 語法」的教學文章連結。

      刪除
  4. 您好,我依照您的說明以及「讓 Facebook、Google+ 轉貼圖文正確顯示首頁與網頁的名稱、圖片和摘要」一文的方式加入了語法。但遇到問題:
    1. 直接貼網址在FB分享時,抓圖還是會抓到不止一張,無法只直接顯示首圖
    2. 從blogger那邊的FB分享按鈕按出去,抓圖也會錯誤(會抓到我banner的圖片)
    3. 摘要敘述和作者說明還是沒有跑出來...
    希望大大可以幫忙解答,感激不盡!我試好多天了(頭昏腦脹)
    html處的語法:
    https://goo.gl/photos/Rc33pRchEVtpVYbH9
    FB meta設定:
    https://goo.gl/photos/o5rF7Xgm2GfPUCpB6

    回覆刪除
    回覆
    1. 可以提供你的文章網址,看看是怎麼回事~

      刪除
    2. 文章網址:http://alexandertechchinese.blogspot.com/2015/10/AT-research.html#more
      剛架站所以只有兩篇文章,但目前兩篇文章都是這樣。再麻煩您幫忙看看!感謝!

      刪除
    3. hi Aimee, 從你提供的圖片來看,語法感覺上沒什麼問題,但使用「Q7:更改後 FB 還是顯示原來的資訊?」官方提供的除錯工具來檢視,卻又抓不到資料,這情形滿奇怪的。

      唯一有疑慮的地方是,從你的圖片 https://goo.gl/photos/o5rF7Xgm2GfPUCpB6 來看,有很多 &#160; 符號 → 這不知道是怎麼產生的,因為安裝碼應該沒有這些

      你可以試著把多餘符號都刪除,再用官方除錯工具清除快取資料後,再試試看。

      刪除
  5. 您好! 請問「縮圖網址」是指貼上固定圖片的連接(e.g. logo.jpg) 還是相片文件夾的位置?
    謝謝!

    回覆刪除
  6. 你好,貼到瀏覽器網址列,能成功顯示出該張圖片的那個網址,就是你要的該張縮圖網址。

    但若是Blogger平台,不需要手動填入縮圖網址,請參照本文參考文章的連結進行設定。

    回覆刪除
  7. 您好! 我的網站在 wordpress, 我根據教程調試了多次但仍不能在fb上試顯縮圖, 不知道是那裡弄錯了...
    請問您可以教我一下應怎樣解決這問題嗎? 謝謝! 超級感激!! 

    回覆刪除
    回覆
    1. 看了你的網頁原始碼,有看到 og:image 的標記,因此要顯示縮圖不會有問題,你需要的是按照「Q7:更改後 FB 還是顯示原來的資訊?」的步驟,讓 FB 更新文章快取資料即可。

      刪除
    2. 感謝大大的指導! 問題已經解決了!!!!! (高興中) XD

      刪除
  8. 您好,在處理og的meta data時遇到些問題想請教您。
    我在head裡已設定好og的meta, 在OG debugger也抓取得到meta data的content
    但在預覽以及實際分享時卻和設定的不一樣(昨日已有這樣的情形, 今日再測試一樣)
    狀況如圖:http://ppt.cc/QaMdD
    先謝謝您

    回覆刪除
    回覆
    1. 你好,圖片無法開啟,請附上你覺得有問題的文章網址,看看是什麼情形。

      刪除
    2. hi, 網址在這裡:
      http://leonshih.blogspot.tw/
      不過很詭異的是, 若是在標籤搜尋的網頁下,
      分享狀態又正常, 例如以下網址:
      http://leonshih.blogspot.tw/search/label/%E6%97%A5%E6%9C%AC-%E9%97%9C%E6%9D%B1

      刪除
    3. 看了你的原始碼,設定的不夠完全,建議依照「Q1:如何讓標題及縮圖正常顯示?」→「3. Blogger 語法」這裡提到的教學連結,完成基本的設定。

      然後再詳讀本文其他部分,增加更進階的設定。

      刪除
  9. 可以用一個工具叫做PicSee(網址:http://picsee.co/)
    只要把要分享的連結貼上去,按「換圖縮網址」,
    還可以自己選擇照片,不用在文章中把照片放在第一張!
    或是也可以自己從電腦上傳。
    外行人也可以輕鬆操作~~~超方便!

    回覆刪除

  10. <meta content='' property='og:title'
    <meta content='article' property='og:type'
    <meta content='' property='og:image'
    meta content='' property='og:url'
    meta content='' property='og:description'
    這是我用的facebook meta
    可是它卻顯示網站名稱而已,並不是顯示文字標題

    回覆刪除
    回覆
    1. 原始媽:
      https://goo.gl/photos/KskJHALBUmVxg3r66

      刪除
    2. 看了你的設定,很多參數都沒設定喔,可參照留言 #8 的回答:

      建議依照「Q1:如何讓標題及縮圖正常顯示?」→「3. Blogger 語法」這裡提到的教學連結,完成基本的設定。

      刪除
    3. 跟著設定了,依然顯示網站名字呢

      https://goo.gl/photos/cEApcrMAxfbRd3kj9

      刪除
    4. 我看不到你範本怎麼改的 請提供足夠的訊息才能判斷是什麼情況

      刪除
    5. https://drive.google.com/file/d/0B6SuGR77P_0hVWpMdEs0OVg2bVk/view?usp=sharing
      這是我完整的範本

      刪除
    6. 看了內容,你的各種 meta 設定,content='' → 這裡的內容依然是空白的,跟之前一樣。請按我上面的回答,那篇教學連結需要多看幾次囉。

      刪除
  11. 本篇跟Q1-3的網址都詳細閱讀並依照Q1-3的另外一篇網址設定了,只顯示網站標題(data:blog.title)、作者的FB資訊;但以下META無法顯示:data:blog.pageName-所在頁面的標題(包含文章、網頁)

    使用的是blogger。

    回覆刪除
    回覆
    1. 但是g+的在設定後是都可以正常顯示。

      刪除
  12. 很好奇是否有方法能突破臉書貼文只能顯示「3行」的限制?因為有時候光標題就佔去2行了。

    回覆刪除
    回覆
    1. FB 是規則創立者 因此很可惜這不是由我們決定的
      跟官方反應的使用者數量若多 規則就有可能改變

      刪除
  13. 除了設定 meta author 資訊外,還需要把 追蹤者的設定改成「公開」。

    參考 http://www.andreavahl.com/facebook/how-to-use-author-tags-in-facebook.php

    回覆刪除
  14. 事情是這樣的~
    小弟是位巴士迷 常拍巴士照片
    然後將照片放在文章中 轉至Facebook給車迷們欣賞、觀看
    原本都用的好好的
    但是自從Blogger開始支援分享到FB自動顯示縮圖後
    (WFU大的文章 之前有提到Blogger開始支援分享到FB顯示縮圖~
    http://www.wfublog.com/2016/03/blogger-fb-share-thumbnail-duplicate-og-url.html)
    每次我分享文章到Facebook時 都會出現縮圖跑掉的問題
    第一個"og:image"是Blogger內建的
    第二個"og:image"是我自己設定的
    兩張圖片看似相同,但是每次Blogger的縮圖位置都不正常
    偏偏Blogger的縮圖總是擺在第一張

    研究了一下
    若要讓FB縮圖顯示正確
    每篇文章都要照這三個步驟 相當麻煩
    步驟1.
    在發布文章後
    到Facebook Debugger處理

    步驟2.
    再將圖片撤下 或是 隨便貼一張圖
    然後再到Facebook Debugger處理 (讓Facebook Debugger重新Run一遍)

    步驟3.
    接著 再貼回正確的圖
    再到Facebook Debugger處理
    才會得到正確的縮圖位置
    (此時 Blogger內建的"og:image"才會正常顯示,與我自行設定的"og:image"縮圖相同
    本篇文章:http://weigetrainbus.blogspot.com/2016/08/775-WW.675-ZZ.html)

    但以上都算是運氣好 只要三個步驟就完成
    有時重複以上步驟10幾次才成功 真叫人相同頭痛!!
    (聽說這好像是比例問題?
    我的圖是3:2的,然後Blogger內建是1.9:1 (大約2:1) ,所以才會這樣?)

    我留了一篇Blogger縮圖顯示錯誤的文章作示範 (尚未將縮圖刷到正常的)
    可以試著轉貼到Facebook上 就會懂為何我說縮圖位置有問題了
    http://weigetrainbus.blogspot.com/2016/08/135-FL.html

    回覆刪除
    回覆
    1. 既然你看過我這篇 http://www.wfublog.com/2016/03/blogger-fb-share-thumbnail-duplicate-og-url.html 文章,相信以下回答可以知道怎麼做:

      看了你的網頁,加上 Blogger 官方內建的 og:image,你一共設定了 3 個 og:image,而且第一個 og:image 的語法是錯的,才會抓到錯誤的圖。

      你只要把額外的 og:image 設定都刪除,只留下官方的,就能解決問題了。

      刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。