最近在 Facebook 時常常發現自己舊樣板的 Blogger 無法正常顯示圖片，但在 編輯貼文 或 貼在塗鴉牆時卻可以正常顯示。在透過 Facebook debug tool 處理後，在預覽時可以正常呈現，告知錯誤訊息：

缺少以下必要資訊 og:image
缺少以下必要資訊 og:site_name
缺少以下必要資訊 og:title
缺少以下必要資訊 og:url





導致在 Facebook 分享時變成下面這種破圖的樣式：





找了一些文章後，老實說真的看不太懂那些 SEO 或教學網站在寫什麼。參考了些程式碼，稍微丟出下列語法，才能成功在 Facebook 粉絲團分享文章而不會找不到圖片。


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='article' property='og:type'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<link expr:href='data:blog.postImageUrl' rel='image_src'/>
<b:else/>
<meta content='[你網站的logo url]' property='og:image'/>
<link href='[你網站的logo url]' rel='image_src'/>
</b:if>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='og:description'/>
</b:if>
view raw blogger.xml hosted with ❤ by GitHub



大致上內容是，在顯示單一篇文章的時候，取得：

  1. data:blog.pageName 作為 og:title (文章名稱)
  2. data:blog.canonicalUrl 作為 og:url (文章連結)
  3. data:blog.title 作為 og:site_name (站台名稱)
  4. data:blog.postImageUrl 作為 og:image (顯示圖片)

如果在這篇文章內找不到圖片，就使用你的網站 Logo 作為圖片



修改步驟如下：

Step 1. 到後台點選 主題 > 自訂旁邊的下拉按鈕





Step 2. 點選編輯 HTML (建議編輯前先進行備份，以免改錯改不回來)





Step 3. 找到 <head> 標籤，將語法貼在 <head> 與 </head> 之間即可







之後回到 Facebook，重新編輯該文章後確定，或者重新發文即可看見完整的分享文章了。