てきとうなさいと べぇたばん

OGPを使ってTwitterとFacebookで自分のサイトの紹介をカスタマイズしました

Twitterでは、このように表示されるようだ。

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はやってないからし〜らないっ☆

参考