用Open Graph優化按讚或分享後被看見的訊息視窗

Open Graph Protocal (OGP) tags是我花最多時間在研究的地方，畢竟很多網站和部落客都有寫到，但是試了很多種，都不太行，我一直在找一種當我按讚／分享時，它能動態的抓取對的資訊（文章標題／摘要／照片）來顯示到FB去，這就跟Meta Description語法和OGP Tags（open graph)有關了。 

但這也是我最頭痛的，還好有些國外的高手分享的很清楚，讓我終於試出來了。

謝謝他我才能試成功，如果各位看的懂原文，按他的步驟作一次就可以了：

Adding Open Graph Protocol (OGP) tags to your Blogger Blog by Matthew Wilson


懶得看很多解釋的就把下面的語法複製下來：  

<!--START CUSTOM CODE-->

<meta content='FB ID' property='fb:admins'/><meta content='APP ID' property='fb:app_id'/> <meta property='og:url' expr:content='data:blog.canonicalUrl'/><meta property='og:title' expr:content='data:blog.pageTitle'/><meta property='og:site_name' expr:content='data:blog.title'/>

<b:if cond='data:blog.pageType == &quot;item&quot;'><title><data:blog.pageName/> | <data:blog.title/></title><meta property='og:image' expr:content='data:blog.postImageUrl'/><meta property='og:type' content='article'/>

<b:else/><title><data:blog.pageTitle/> - 您想加的附標題</title><meta property='og:image' content='圖片連結'/><meta property='og:type' content='blog'/></b:if>

<b:if cond='data:blog.metaDescription'><meta property='og:description' expr:content='data:blog.metaDescription'/></b:if>

<!--END CUSTOM CODE-->

在編輯HTML的範本中找到這個語法： 

<title><data:blog.pageTitle/></title>

把它刪掉取代它並儲存。

紅色標示的地方請取代： 

• FB ID －不知道的可以參考如何解決按讚後還要再確認的問題！置入FB Admin ID
• APP ID － 此部落格當初跟FB 申請的APP ID

• - 您想加的附標題  －可以加入你想出現在站名標籤頁後的附標題，若不想可刪除，不會影響儲存。

• 圖片連結 －加入此站的LOGO或是任何想出現在FB的圖示，此為預設圖片連結圖，如果你所發表的文章內有圖，它會先去抓文內的圖，若沒有就會出現你所預設的圖。

存檔後，可以去Debug一下看看是否能夠正確的顯示相關的訊息如下，就算大功告成了。