No Web Service No Life

クラウドソーシングサービス「ランサーズ」のプロデューサーです。Webサービスや構成要素(UIや技術)について書いています。

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


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

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


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



タイトルや概要文章に加えて、ぐるなび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対応もしっかり行いたいと思います。

広告を非表示にする

最新のWebサービス・スマホアプリの情報が毎日メールで受信できるキュレーションサービス『Service Safari』を運営しています。
エンジニアを募集していますので、ご興味のある方はFacebookやTwitterからご連絡ください。