[WP] 今更 Twitter Card を設定してみたらアピール度が増した気がするのでオススメです

SOICHA/J を愛用していたのですが Twitter API 1.1 への対応版がリリースされないのでクライアントの乗り換えを余儀なくされそうな @azur256 です。

2013/03/05 には Twitter API 1.0 のエンドポイントが廃止されてしまうので、今後は Twitter Developer Display Rquirements に従ったアプリしか使えなくなります。逆に Display Guideline に従ったアプリが増えてくると Twitter Card も効果的に見えるかも、ということで数週間前に Twitter に申請し、やっと審査が通りました。

有効になってみると、結構アピール度が増した気がするので申請の方法と何が変わるのかをご紹介します。

Twitter Cardって何？

Twitter Card というのは Twitter のタイムラインに流れるメッセージにカード上のコンテンツを埋め込むことができる仕組みです。

カードの種類には幾つかあるのですが、今回は自分のブログのエントリがツィートされた時にエントリのサマリを埋め込むことができる Summary Card を設定してみました。

Twitter Card についてもっと詳しく知りたい方は、ここにある公式ドキュメントを参照してください。

Twitter cards make it possible for you to attach media experiences to Tweets that link to your content. Simply add a few lines of HTML to your webpages, and users who Tweet links to your content will have a "card" added to the Tweet that’s visible to all of their followers.
via: Twitter Cards | Twitter Developers
https://dev.twitter.com/docs/cards

公式ドキュメントを日本語に訳してくださっている方がいらっしゃいます。

Twitter公式webタイムライン中にコンテンツを埋め込めるTwitter Cardsについての自分用メモ。あとで実装する用。
via: Twitter Cardsのメモ（ドキュメントの適当訳） – adiary開発日誌
http://adiary.blog.abk.nu/0288

Summary カードを設定するだけであれば、この先を読んでもらえば大丈夫です。

Twitter Card を使うためにすること

大きくは 2 つ。まず 1 つ目は自分のブログを Twitter に認識してもらえるようにメタ情報を設定すること。2 つ目は、Twitter に登録を申請すること。

ブログにメタ情報を設定しよう

Twitter Card に必須なメタ情報は次の5つだけ

twitter:card
twitter:site
twitter:url
twitter:title
twitter:description

しかもこれらのうち、url, title, description は og:url, og:title, og:description を参照してくれるので、OGP を設定済みのサイトであれば card と site を設定するだけです。

twitter:card は Twitter Card の種類を指定するので summary を指定、site にはブログサイトに紐づける Twitter ID を指定します。

私の場合は次のように設定しました。

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@azur256">

1 2	<meta name="twitter:card" content="summary"> <meta name="twitter:site" content="@azur256">

このメタタグの追加は子テーマの header.php の中で直接書いています。Twitter Cards Plugin というようなプラグインもあるようなのですが、自分で管理している方が安心なのでカスタマイズで対応しました。

ちなみに、OGP は WP-OGP customized を使わせてもらっています(All in One SEO Pack は多機能過ぎて意味不明な動きをすることがあるので使っていません)。
WordPressで簡単にOGPタグを実装できるWP-OGPプラグインを設定画面付きに改造してみた。 » INSPIRE TECH

ここまでで設定ができたら、期待した通りに動作するかを Preview Tool (https://dev.twitter.com/docs/cards/preview) で確かめておきましょう。

Twitter アカウントでログインして自分のブログの URL を指定して、正しく表示されるか確認することができます。ブログのトップページだけでなく、個別のエントリ記事でもサムネイルなどが正しく表示されているかチェックしておきます。

これで、思った通りに表示されていたら、Twitter に申請を行いましょう。

Twitterカードを申請する

これはもう言われるがままに情報を入力していくだけです。
https://dev.twitter.com/form/participate-twitter-cards にアクセスして必要となる情報を入力してください。
星印の付いている項目のみが必須情報なので、それだけ入力すればOKです。

ただし、”Example Summary Card URL” の項目だけは星印がついていませんが、Summary Card で申請する場合には必須ですので、必ず入力しましょう。

これで、申請すると “get back to you in 5-10 Business days” と出ますが、私の場合には3週間以上かかりました。

あとはメールで審査結果が送られてくるのを待ちましょう。

Twitter Card を設定すると何が変わるのか

現時点では Twitter が公式に提供しているクライアント系以外でサポートしているものを知らないのですが、タイムラインに概要が表示できるようになります。

iOS の Twitter クライアントで TL に自分のブログの URL が流れている時に、そのツィートをタップすると

このように Twitter Card の情報が表示されます。

Web 版でも同じように表示されます。

また Twitter の新しいブログパーツも Twitter Card に対応しています。「概要を見る」というリンクをクリックすると

同じように概要が表示されます。

最初から展開されて表示されるわけではないので、目に止まりにくいし、わざわざタップされることは少ないのではないか、とも思いますが、タップしてもらった時に、より多くの情報を提供できるということはアピール度アップに繋がるのではないでしょうか。

設定や申請はそれほど面倒ではないので(待ち時間長いですが)、設定してみてはいかがでしょうか。