2015-05-29

用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 


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

<!--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>

把它刪掉取代它並儲存。

紅色標示的地方請取代: 



  • - 您想加的附標題  -可以加入你想出現在站名標籤頁後的附標題,若不想可刪除,不會影響儲存。
  • 圖片連結 -加入此站的LOGO或是任何想出現在FB的圖示,此為預設圖片連結圖,如果你所發表的文章內有圖,它會先去抓文內的圖,若沒有就會出現你所預設的圖。

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




沒有留言:

張貼留言

您或許對這些文章有興趣~