先前寫過一篇社群分享按鈕總整，整理了各大社群分享的連結，但分享後長什麼樣子也是與分享後的成效有相當的關係，這邊來介紹一下 Facebook, Google+ 的分享內容。
可以設定的如簡單幾項，更多細節可以參考官網文件，或參考下方圖片（圖一）
<meta property="fb:app_id" content="FACEBOOK_APP_ID" />
<meta property="og:type" content="SHARE_METADATA" />
<meta property="og:url" content="SHARE_URL" />
<meta property="og:title" content="SHARE_TITLE" />
<meta property="og:description" content="SHARE_DESCRIPTION"/>
<meta property="og:image" content="IMAGE_URL" />
<meta property="og:site_name" content="SITE_NAME"/>
如果不知道或是沒有的請隨手把他刪掉，這時候如果有疑問 "都沒設定那會show出什麼" ，這時候只好說《侏羅紀公園》（Jurassic Park）中的經典台詞：「生命總會找到出路。」（Life will find the way.），可以使用官方提供的工具來檢查分享後的樣子，以及哪些部分需要調整。
Google 大神更是提供了簡單的網頁工具提供你快速產生 Web Snippet，可參考下方圖片（圖二）
<body itemscope itemtype="http://schema.org/Product">
<h1 itemprop="name">Shiny Trinket</h1>
<img itemprop="image" src="{image-url}" />
<p itemprop="description">Shiny trinkets are shiny.</p>
</body>
Google 提供了幾種不同的方式，如果你不依照上方的設定方式，優先會去查找 Open Graph "og:title, og:image, og:description" 的參數，如果還是都沒定則會以 page title 以及 meta description 來設定。
相關連結
社群分享按鈕總整
Facebook Using Self-Hosted Objects
Facebook Debugger
Google+ Snippet
圖一 - http://kb.mailchimp.com/article/how-can-i-choose-the-image-thumbnail-that-shows-up-on-facebook
圖二 - https://developers.google.com/+/web/snippet/
發表文章
沒有留言:
張貼留言