Twitter Cards をプラグインなしで設定してみました:Twitter カードアナリティクスも使えるようになった!

Twitter Cards とは?

「Twitter Cards」というのは、ふだんのTwitter投稿で表示されるスペースの下の部分に、設定した説明内容を追加するサービスです。たとえばサイト名や紹介文や画像などを入れることができます(リッチスニペット)。

こんな感じに↓

Twitter cardの例

よくGoogleやfacebookでやっていることの、Twitter版だと考えてもらってもかまいません。というのも、同じOGP(Open Graph Protocol)を利用しているからです。

こうしておけば、新規投稿ツイートを見た人に「このサイトはどんなサイトなのか?」ということを、すぐに知ってもらうことができます。いちいちリンク先に来てサイトの紹介を読んでくれたり、Twitterプロフィールを見てサイト情報を知ろうとする人はまれですから、ツイート文のすぐ下にこういう表示があればサイト訪問への訴求力がぐっと高まりますね。

詳しい説明はTwitter Developers に書いてあります(英語)。
Twitter Cards | Twitter Developers

「Twitterカードアナリティクス」が利用できるメリットあり

さらに、Twitter Cards に登録していると「Twitterカードアナリティクス」を利用することができるようになります。いわゆるTwitterの分析ツールです。

パブリッシャーと開発者の皆さまへ:Twitterカードアナリティクスのご案内 | Twitter Blogs

ここでは、ブログを更新時の新規投稿を知らせるツイートが、どれだけの回数見てもらえたのか(インプレッション)を知ることもできます。閲覧者にたいしてクリックされた回数も計測されます。

ふだんのツイートの返信やリツート、リフォローまでが詳細にわかるので、自分の発言の影響を測ることも可能です。たとえば悪ふざけツイートを連発したりエロ発言を繰り返したあとなどのフォロワーさんが激減する数値が的確にわかってしまいますし、速報性の高い話題が拡散していくようすも把握できます。

ほかにも、自分がTwitter をはじめてから現在に至るまでのフォロワー数の伸び率がグラフで示されてくれたり、フォロワーさんがどんな人(男性/女性)で、どこの地域の方なのかまで分析可能です。

とくに企業などでTwitterを利用されているところであれば、不可欠のツールとなるはずです。

プラグインならかんたんにできるよ

とまあ、そんなこんなで、いろいろやっておいて損はないことですので、わたしもやってみることにしました。方法は2つあります。

  1. プラグインを利用
  2. <head>内に直接書き込む( ← 今回はこちらを解説)

よく使われているプラグインは、これらのようですね(2014年4月)。

WordPress › Twitter Cards « WordPress Plugins

WordPress › Twitter Cards Meta « WordPress Plugins

プラグインを利用される場合の注意点は、他のプラグインに干渉するかもしれないということです。ご注意ください。プラグインを使うメリットは、今後Twitterが仕様変更した時などに、作者に対応をお任せできる点です。

ご自分の都合に合わせて選択されることを、おすすめします。

 プラグインなしでの設定方法

OGP設定

最初にも書きましたがTwitter Cards はfacebookやGoogleと同じOGPを利用しています。facebook用のOGP設定は以前に書きましたので、そちらを参考にしてください。

WordPressプラグインなしでFacebookのOGP(Open Graph Protocol)設定をしてみた | かっぱのWordPress入門ブログ

今回は、facebook用OGP設定をすでに終えている段階からはじめます。

Twitter Cards のメタタグを記述

記述されるべきメタタグのリストはCards Markup Tag Reference | Twitter Developers に載っています。

記述するのは2行だけ。

  1. Twitter Cards の種類
  2. サイトオーナーのアカウントID

以上。

えっ、これだけっ!? はい、基本的にはこれだけです。

もしfacebook用OGP設定をしてない場合は、もうすこし書いておく必要があります。

  1. Twitter Cards の種類
  2. @Twitterアカウント名
  3. 記事ページのタイトル
  4. 記事ページのURL
  5. 説明文
  6. 画像のURL

などでしょうか。つまり、

このように。

でも、これだと静的なページでの出力になっちゃうので、<?php the_permalink(); ?>などでWordPress用のパーマリンクを出力する設定が必要です。

めんどくさいですね。

なので、プラグインを使うか、facebook用OGP設定をして上の2行を加える方法を、おすすめします。もちろん、サイトに合わせた細かい設定をしたい場合には、上のリンク先を参考にして、メタタグを組み変えてください。

確認作業

メタタグを記述したら、正しく反映されるかを確認します(バリデーション・チェック)。

Twitterカードのチェック01

サイトのURLを入れて「Go!」をクリック。

Twitterカードのチェック02

正しく反映していればこうなります。

Twitterカードのチェック03

うまくいかないとき

正しく設定しているのに反映されない場合もあります。

もしかしたらプラグインのキャッシュが関係しているのかもしれないですし、ほかの原因があるのかもしれません。わたしは設定してすぐには全然反映されなかったので、キャッシュ系プラグインを停止したり、いろいろしたのですがダメ。けっきょく、原因がわからず放置してその日は寝ることにしたら、翌日には反映されていました。

困ったら待つ、というのも必要・・・・・・なのかなぁ? まあ、うまくいきました。

Twitter 社に申請する

上の画像ではサイト名の左に緑のマークがでていますが、認証されていなければ黄色マークに「not approved」と表示されます。そこで「Request Approval」をクリックして申請フォームへと進みます。

申請フォームに必要事項を記入して申請したら、あとは待つだけです。早いときは数秒後、遅いときには数週間後には認証許可メールが来ます。

当ブログは数分後にメールが届きました!

チェックしてみる

さっそくテストツイートしてみます。タイムラインにはこのように表示。

ツイート

「概要を表示」をクリックします。すると・・・

2014-04-05_00h39_14

詳しいサイトの解説が表示されていますね。こんな感じにサイト名・サイトの紹介文・指定した画像などを表示することが可能です。

確認できましたので、これで終了です。

関連記事

Google Analytics のトラッキングコードをプラグインなしで埋め込んでみました:Google の推奨する PHP の設定方法

いままではかんたんに設置できるプラグイン「Google Analyticator」を使っていたのですが、サイトデザインも一新したことなので、プラグインの数を整理・削減していっています。今回はGoogle が提供しているアクセス解析サービスの…

PageSpeed Insights で「スクロールせずに見えるコンテンツのレンダリングブロック JavaScript / CSS を排除する」と提案されたときの修正方法

Google Developer では無料サービスの1つとして「PageSpeed Insights」という「ウェブページのコンテンツを解析し、ページの読み込み時間を短くするための修正方法を提案してくれるツール」が提供されています。 Pag…

プラグインなしで WordPress サイトにソーシャルボタンを設置する方法

ソーシャルボタンを作るの備忘録 各種ソーシャルボタンの作成手順をまとめました。いろんなところで解説されている内容とほとんど同じです。自分が忘れないようにするためと、ひとつのページにまとめておくと、あとで修正するときに便利だからメモの代わりに…