最近剛好有幾位讀者都詢問到 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"，作者暱稱會以超連結顯示、並顯示額外資訊。
2016.8.5 補充：感謝留言 #13 提供的資訊，如果作者連結使用的是「FB 個人頁」的話，必須設定為公開，系統才能抓到 FB 個人頁的連結。
2018.5.7 補充：FB 近期已關閉「顯示作者資訊」之功能，少數能顯示作者資訊的網站，經過交叉比對後，必須符合以下要件：
- 粉絲頁類型需設定為 "新聞媒體網站"
- 追蹤人數夠多，流量夠大
相信這是 FB 打擊內容農場的手段之一，符合要件 FB 才可能自動出現作者資訊。如果是一般部落格的型態，而且粉絲頁沒有設定成 "新聞媒體網站"，FB 不會讓作者資訊出現。
Q7：更改後 FB 還是顯示原來的資訊？
這是本篇重要性屬一屬二的問題，大部分相關文章也會提到。由於分享到 FB 的每篇文章，在 FB 伺服器都會有快取資料，這可以減少機器人重複爬取的工作、降低伺服器負擔，但也會讓文章修改後的資訊無法即時顯示出來。
因此當各項相關資訊修改後，若想立即看到呈現在 FB 的結果，務必進入這個 FB 官方偵錯網址：
輸入網址後，按下「Fetch new scrape information」按鈕，就可以強制 FB 重新更新快取資料了。
更多 Facebook 相關文章：
這個設定對於有「假性」強迫症的人來說，真痛苦...。尤其發現自己每一篇文章都沒有加入過「搜尋說明」的時候...。本來想刪除「meta expr:content='data:blog.metaDescription' itemprop='description' property='og:description'/」這一段，眼不見為淨，但最後還是妥協了。
回覆刪除「搜尋引擎入口文章」是指搜尋自己的部落格名稱後，比較前面面次出現的文章嗎？
刪除我目前也是先往高 CP 值的熱門文章處理，還好我屬於難產型的部落客，新增的文章比例已經大幅減少（本來就少，哈哈！）。比較可怕的是～看到熱文中舊往生澀的文章排版，會想順便整理一下，想說總不能只有分享的門面好看，點進來卻有去到上一個世紀的感覺吧？
喔～原來是從 Google 流量分析可以看到，了解，謝謝！
刪除最近分享文章到Facebook，文章標題都會變成網址，而不是文章的標題，摘要也無法正常顯示，必須除錯才能恢復正常，而且70篇文章有50篇是種情況。(手動為50篇文章一一除錯，手好痠)
回覆刪除能不能一次將網誌所有的文章進行除錯，因為一個一個 (50篇) 除錯真的很累。或者能不能從 OG 去強制改回文章標題及摘要，但我不會設定，使用 OG 會造成每篇文章顯示的標題都一模一樣。
OK 我知道了，我還是自己找 OG 的寫法，從 OG 改善，看能不能自動抓取文章個別的標題。
刪除我試試把這個 data:post.title 寫入 OG 的 og:title 裡，用 IF 判斷式包覆 meta 限定文章頁面執行。
我找到一篇文章，提供您參考：
刪除兩分鐘幫Blogger設定好Facebook的OG
他的og:title 寫法是：
< meta expr:content='data:blog.title' property='og:title' />
大大你好今天遇到問題, 已加入語法
回覆刪除http://3.bp.blogspot.com/-1wjM06JzBhY/VhZZLjuzxyI/AAAAAAAAMp8/vEimrud_o_U/s1600/fb-meta.jpg
但FB還是沒辦法抓到, 摘要敘述 也在偏好設定 有打好
您好，我依照您的說明以及「讓 Facebook、Google+ 轉貼圖文正確顯示首頁與網頁的名稱、圖片和摘要」一文的方式加入了語法。但遇到問題：
回覆刪除1. 直接貼網址在FB分享時，抓圖還是會抓到不止一張，無法只直接顯示首圖
2. 從blogger那邊的FB分享按鈕按出去，抓圖也會錯誤（會抓到我banner的圖片）
3. 摘要敘述和作者說明還是沒有跑出來...
希望大大可以幫忙解答，感激不盡！我試好多天了（頭昏腦脹）
html處的語法：
https://goo.gl/photos/Rc33pRchEVtpVYbH9
FB meta設定：
https://goo.gl/photos/o5rF7Xgm2GfPUCpB6
文章網址：http://alexandertechchinese.blogspot.com/2015/10/AT-research.html#more
刪除剛架站所以只有兩篇文章，但目前兩篇文章都是這樣。再麻煩您幫忙看看！感謝！
您好! 請問「縮圖網址」是指貼上固定圖片的連接(e.g. logo.jpg) 還是相片文件夾的位置?
回覆刪除謝謝!
您好! 我的網站在 wordpress, 我根據教程調試了多次但仍不能在fb上試顯縮圖, 不知道是那裡弄錯了...
回覆刪除請問您可以教我一下應怎樣解決這問題嗎? 謝謝! 超級感激!!
感謝大大的指導! 問題已經解決了!!!!! (高興中) XD
刪除您好，在處理og的meta data時遇到些問題想請教您。
回覆刪除我在head裡已設定好og的meta, 在OG debugger也抓取得到meta data的content
但在預覽以及實際分享時卻和設定的不一樣(昨日已有這樣的情形, 今日再測試一樣)
狀況如圖：http://ppt.cc/QaMdD
先謝謝您
hi, 網址在這裡：
刪除http://leonshih.blogspot.tw/
不過很詭異的是, 若是在標籤搜尋的網頁下,
分享狀態又正常, 例如以下網址：
http://leonshih.blogspot.tw/search/label/%E6%97%A5%E6%9C%AC-%E9%97%9C%E6%9D%B1
可以用一個工具叫做PicSee（網址：http://picsee.co/）
回覆刪除只要把要分享的連結貼上去，按「換圖縮網址」，
還可以自己選擇照片，不用在文章中把照片放在第一張！
或是也可以自己從電腦上傳。
外行人也可以輕鬆操作～～～超方便！
PicSee 超好用的啊！！！
刪除
回覆刪除<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
可是它卻顯示網站名稱而已,並不是顯示文字標題
原始媽:
刪除https://goo.gl/photos/KskJHALBUmVxg3r66
跟著設定了,依然顯示網站名字呢
刪除https://goo.gl/photos/cEApcrMAxfbRd3kj9
https://drive.google.com/file/d/0B6SuGR77P_0hVWpMdEs0OVg2bVk/view?usp=sharing
刪除這是我完整的範本
本篇跟Q1-3的網址都詳細閱讀並依照Q1-3的另外一篇網址設定了，只顯示網站標題（data:blog.title）、作者的FB資訊；但以下META無法顯示：data:blog.pageName－所在頁面的標題（包含文章、網頁）
回覆刪除使用的是blogger。
但是g+的在設定後是都可以正常顯示。
刪除很好奇是否有方法能突破臉書貼文只能顯示「3行」的限制？因為有時候光標題就佔去2行了。
回覆刪除除了設定 meta author 資訊外，還需要把 追蹤者的設定改成「公開」。
回覆刪除參考 http://www.andreavahl.com/facebook/how-to-use-author-tags-in-facebook.php
事情是這樣的~
回覆刪除小弟是位巴士迷 常拍巴士照片
然後將照片放在文章中 轉至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
您好：
回覆刪除請問作者資訊是否還有效？
因為已經很久沒看到作者資訊出現，應該說整個FV幾乎看不到了。本來以為FB終止這個服務，但今天有看到有一篇轉貼文章依然會出現作者資訊，像是中央社新聞這篇：http://www.cna.com.tw/news/aloc/201802180132.aspx
那是否表示作者資訊依然有效，只是Meta要改寫呢？
最近又發現一篇 也會顯示作者資訊：
刪除http://www.lookingforward.info/post03272551010906