SNSサイトでの表示のカスタマイズ

Open Graph protocolを設定することによって、TwitterとFacebookでの表示をカスタマイズ。この記事のコードは、久々に東武動物公園に行ったの記事を参考に。

Facebook

以下の内容を設定。

 <meta property="og:type" content="website"/>
 <meta property="og:site_name" content="てきとうなさいと。べぇたばん"/>
 <meta property="og:title" content="久々に東武動物公園に行った - てきとうなさいと。べぇたばん"/>
 <meta property="og:description" content="2015年に東武動物公園に行ってきた。ゆったりくつろげるのでおすすめ。" />
 <meta property="og:url" content="http://tekitoh-memdhoi.info/views/655" />
 <meta property="og:image" content="http://tekitoh-memdhoi.info/media/filter/l/img/dsc02752.png">

Twitter Card

Twitterでは、Twitter Cardで表示させる。今回はSummary Cardにしよう。

 <meta property="twitter:card" content="summary">
 <meta property="twitter:user" content="@youkidearitai">

上二行で良い理由として、OGPの設定との互換があるため。詳しくは、カードのマークアップタグリファレンスを参照。

チェック

Facebookのチェックには、https://developers.facebook.com/tools/debug/og/objectを参照。Twitter Cardのチェックには、https://cards-dev.twitter.com/validatorを参照。

結果

こうなるようだ。Facebookはやってないからし〜らないっ☆

リハビリついでに行ってみた。 http://t.co/4XPVNncqu4

— youkidearitai (@youkidearitai) 2015, 5月 3

参考

• http://www.webtech.co.jp/blog/developer-news/6199/
• https://dev.twitter.com/ja/cards/types/summary
• https://dev.twitter.com/ja/cards/markup

2015/05/11 3:36