Twitter Cardでツイートに含まれるURLをリッチに表示

Twitter Cardという、FacebookのOGPのような機能がTwitterにもあります。

Twitter Card未設定のサイトをシェアした場合、下記の様に、タイトル、概要文章、記事中のサムネイル画像が表示されます。

3 things you need to know to save your IT job: #1 Cloud computing http://t.co/zwGu2BtrAa @computerworldさんから

— 木下慶(ディレクター@ランサーズ) (@kei_kinoshita) August 26, 2013

Twitter Cardでは、リンク元サイトのTwitterアカウントや記事の著者といった関連Twitterアカウントをこの領域に表示できます。
Twitter Cardを設定している有名サイトとしては、ぐるなびさんがあります。

ぐるなび - 全室個室空間 ～月夜の舞‐TSUKIYONOMAI‐～ 渋谷駅前店 http://t.co/jFa4hJOEEs #gnavi

— 木下慶(ディレクター@ランサーズ) (@kei_kinoshita) August 26, 2013

タイトルや概要文章に加えて、ぐるなびのTwitterアカウントやお店のTwitterアカウントまで表示されています。（設定されていませんが、もちろん画像も表示できます）

ぐるなびさんのページのソースをみると、下記のようなTwitter Cardの記述があります。

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@gnavi_tweet" />
<meta name="twitter:creator" content="sibuya_hanare" />

この他に、タイトルや概要文章もtwitter:titleやtwitter:descriptionで設定可能です。（設定しない場合は自動解釈されます）

詳しい設定は以下のサイトが参考になります。
『Twitterカード』を設定してサイトへの質の良い流入を増やそう！1万6742文字に渡る開発者向けドキュメントの日本語訳まとめ。

FacebookのOGP対応だけでなく、Twitter Card対応もしっかり行いたいと思います。