Twitter Cardsの種類を変更し、ついでにアナリティクスを確認する
少し前からこのブログ、さりげなく「Twitter Cards」に対応していました。
Twitter Cardsとは
TwitterでURL付きの記事を投稿したとき、タイムラインで少しだけリッチに見せる仕組みで、ブログやサイトオーナー側があらかじめソースに埋め込んでおくものです。今のところ対応しているのはTwitter公式（とアプリ）くらい…ですか？
手順はこちら。
- 実装したいカードの種類のリストをご覧ください。
- 適切なメタタグ（英語）をあなたのページに入れてください。
- あなたのURLを検証ツールで確認して、申請を行ってください。
- 申請が無事に通っていたら、URLをツイートしてカードがツイートの下に表示されることをご確認ください。
- Twitterカード・アナリティクスを使って効果を測定しましょう。
タグを仕込んで検証ツールから申請するだけ。「実装したいカード」、つまりタイムライン上でどのように表示されたいかということですが
- Summary Card：標準のカードです。タイトル、ディスクリプション、サムネイル、サイトのTwitterアカウントを含みます。
- Summary Card with Large Image：Summaryカードに似ていますが、画像が目立つようになっています。
- Photo Card：写真を表示するためのカードです。
- Gallery Card：写真の収集を目立たせるカードです。
- App Card：アプリケーションを紹介するためのカードです。
- Playerカード：動画や音声プレーヤーカードです。
- Product Card：商品を見せるためのカードです。
- リード・ジェネレーション・カード：ユーザーは貴社のキャンペーンに対する興味関心を簡単に示すことができるカードです。Twitter広告ダッシュボードを使って作成できます。
- ウェブ・サイト・カード：貴社のサイトをフィーチャーしてクリックを誘うカードです。Twitter広告ダッシュボードを使って作成できます。
「とりあえず」Summary Card選んでおけばいいべーと紹介されていたので、根っから素直で人を疑うことを知らない純粋な私はそれを選びました。
Twitter Cards（Facebook ogp）のタグを仕込む
Twitter Cardsのコードはいろいろ用意されていますが、Facebookのogp記述をきちんと書いていればURLやアイキャッチなどほとんどが取得できます。その他はこの二行だけをhead内にぶっこんでアップしておけば大丈夫。
|
1 2 |
<meta name="twitter:site" content="@username"> <meta name="twitter:card" content="summary"> |
そうでない方はこれ以外も入れることになるのですが、どうせ書くなら汎用性のあるFacebook ogpのほうが良いと思います。Twitter Cardsに最低限必要なのはog:title, og:description, og:imageあたりですが、まあワンセットで。
|
1 2 3 4 5 6 7 8 9 10 |
<meta property="og:title" content="ページタイトル"> <meta property="og:site_name" content="サイトタイトル"> <meta property="og:description" content="ページの説明、概要"> <meta property="og:url" content="ページのURL"> <meta property="og:type" content="article"> <meta property="og:locale" content="ja_JP"> <meta property="og:image" content="ページやサイトを表す画像URL（最低限500px、推奨800px以上 ※）"> // og:imageの大きさの仕様については2014年10月の私見です。 //「シェアされたときの体裁のみ」を前提に、この例ではfb:adminsやfb:app_idは割愛しています。Facebookページを持っている、インサイトを使いたいという方は別途設定してください。 |
あとは@usernameでログインしてCard Validator（検証ツール）からの登録作業が済めば、このように指定した形式で表示されるようになります。短縮URLかどうかは関係なく、また投稿に画像が添付されている場合はTwitter Cardsより優先され、両方は表示されません。
少し前に、大きな画像表示のTwitter Cardsを使おう。以前から使っている人は12文字追加するだけ。 という記事を読みました。そうか、大きいほうでもいいのか。大きいことはいいことかしら。大きいことはいいことなのね。
一度申請してあるのだから、大きいほうを使うよーと設定ページなどで変更するのかと思ったら違うのですね。登録の際の作業を繰り返すんですね。
Twitter Cardsの変更手順
1 まずhead内の表記を変えておく
|
1 2 |
<meta name="twitter:site" content="@username"> <meta name="twitter:card" content="summary"> |
を
|
1 2 |
<meta name="twitter:site" content="@username"> <meta name="twitter:card" content="summary_large_image"> |
ここからは申請・登録時の作業と同じ。
2 Twitterにログインした状態で Card Validator（検証ツール） へ。Card URLにトップページURLかページのURLを入れてPreview Cardボタンを打つべし
3 右にプレビューが出る。
タグも認識されるよ、ページには問題ないよ、でもアンタまだ登録してないよねと叱られる。だからそれを今お願いしているんじゃないか…と思いつつ現れた「Request Approval」ボタンを押す。
4 サイトの情報が表示される。
特に変更するところはない。なんでボタンの名前同じなんだろう、確定とかOKとかにすればよいのにと思いつつもう一度「Request Approval」ボタンを押す。
5 ちょっと待っとけと言われる。 待てないのでもう押す。プレビューしちゃう。
6 だーかーらーちょっと待てよって言ってんだろうがとたしなめられる。 しつこいと嫌われる。でもあたい待てない。押す。
7 もう、せっかちなんだから…と言われつつ成功する。 これで完了。
評価を測定する – Twitterアナリティクス
せっかくなので、Twitter Cardsを入れた効果を見られるページにもちょびっと触れておきます。
- パブリッシャーと開発者の皆さまへ：Twitterカードアナリティクスのご案内 | Twitter Blogs
- 今後、注目の解析ツールに！Twitter Cards Analyticsの使い方を解説します | 株式会社LIG
一般ユーザーへの公開時にフォロワーの内訳が見られるとかで話題になりましたが、目的を持って使う人でなければ「あーそうなんだふーん」で終わる測定結果です。
Twitter Cardsで投稿を目立たせるのは手段の一つであって、これによる効果を確認して役立てるのが目的です。特にお店・企業やアフィリエイトを主にするサイトなどでは。ということでTwitterアナリティクスのページヘ。
サル少佐さんのフォロワーさんは非常にクールな方が多いので、とある植物アカウントを持つ人の結果を表示します。
そもそも宣伝に積極的といえないTwitter活動状況で、数量的に参考にはならないと思いますが、一例ということでご容赦。ひとつひとつのツイートをクリックすると、ポップアップでこのような詳細が見られます。
上は比較的多いリアクションのあった画像付きツイート。園芸趣味家さんが多いので、台風情報は気になっちゃうようですね。
ヘッダーの「Twitterカード」をクリックしてカードタイプ別の状況を見てみると
もともと設定していたSummaryカードから、Large Imageのカードに変えたことで効果が出ている…のかな？ ということがわかります。
設定するべきか、特に必要ないのか
憂うべきは表示に対応しているのが公式クライアントのみであり、その公式ですらタイムライン上ではただのリンク付きツイートにしか見えないという点です。運良く「概要を表示」のテキストを見つけてくれたユーザがクリックしてくれるかどうか。
公式アプリでは、ツイートをタップして詳細表示にすればTwitter Cardsに対応した表示になりますが、タイムライン上にはそれを促すUIはありません。
そりゃ「タイムラインで目を引くなら画像付きツイート」という主張も出てくるというものです。
とはいえ仕様などいつ変わるかわかりません。前述したように現状では「投稿に画像が添付されている場合はTwitter Cardsより優先」されるようですので、仕込んでおいても損はないのではないかと。
So, Happy tweet!