Twitterに記事をつぶやいた時に画像（サムネイル）付きにする方法 Twitter Cardsの活用

最近知ったのですが、open graph のような Twitter版があるんですね！
Twitter Cards というのですが、Facebookの場合との違いはサイトをTwitterに申請しないといけないということ
これは重要なのでサイトを対応したら必ず申請です！

まずはTwitter Cardsってどんなものなのか？

WordPressのカスタムフィールドの入力欄の幅を広くする方法 http://t.co/VeJMlVBP27 テスト

— 9-bb (@9bb_) 2013, 12月 7

こんな感じに表示されます

サイトのページがつぶやかれた時に画像をつけることでインパクトを与えることが出来る代物なんですが
タイムラインでは概要を表示を押さないと開かないので、それほど効能は無いのかもしれない？
でも、やっておいたほうがやらないより良い

Card Validator でテストできます
このテストの結果を元にサイトに情報を埋め込みます
open graph（og）の情報を流用出来る箇所もあります

image、descriptionはogのものを流用できます
また全ての情報を入れる必要はなく、必要最低限の情報でOKです

まずは、投稿タイプを選択します
好きなのを選んでください

chose card からタイプを選択します

このサイトは、記事ではSummary Large Image、一覧ページでは Summaryにしました
WordPressなどでは、投稿タイプとか選択できるものがあるので、動画や写真、アプリとかカスタマイズしておけば、使い分けとかも簡単にできるようになりますね

タイプを選んだら、あとはテスト用にデーターを入力します

情報を入力したら、Update Preview を押します

情報が正しく入力されていたら、丸い所に色が付きます
緑だと正しく入力されています

とりあえずテストではこのような情報になっていますが、実際にimageとdescriptionとtitleはogの物を使う場合は無くてもいいのですが、表示を試すために入力しています

右には実際にはこんな風に表示されるよっていうプレビューが出ます

その下にはコードが表示されています
これをサイトに貼り付ければ、プレビューの様な表示になるんですが
手作業で貼るのは大変ですので、CMSならプラグインと組み合わせると良いですね

自分の場合はWordbookerというWordPressのプラグインでogを埋め込んでいるので
残りはヘッダーに記入しています

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@9bb_">
<meta name="twitter:creator" content="@9bb_">

All in one seo の新機能Socialを使えば、その設定だけで出来ますが
cardタイプがsummaryだけになってしまうので、それだと画像でアピール出来ないので、手作業+Wordbookerで実装しました

ウェブサイトの方でTwitter cards用の設定が済んだら今度は実際のURLを入力して試します

URLを入力して試します
タブをTry Cards から Validate & Apply に切り替えます

画像のような結果になると思います、これで成功です。サイトでの設定は正しく完了しています

ちょうど試している時にTwitter側の不具合で、Errorが出て動かなかったのでそういうときは
焦らず時間を置いて試してみてください

詳しく見てみると

ogの表記があります
これはogの情報から得ているということです、ogを利用している場合は
必要最低限な情報は card、site、creatorの3つです

正しくサイトが設定されている場合はTwitter Cardsへの青色の登録のボタンが出現します
ちょっとSS撮り忘れたので・・・update previewがあったところに表示されます

それをクリックすると、登録画面になります
必要な情報を入力してやります

descriptionは長すぎるとダメですね、Request Approvalを押せば登録完了です

あとはメールが届くのを待つだけ、正式登録のメールがしばらくしたら届きます

あとは実際にTwitterで試してみてください

短縮URL:

2013年12月07日 WEB制作系 Twitter