Twitter Cards に対応して WordPress の更新ツイートをリッチにしてみる

2012年6月から Twitter Cards という表示形式が Twitter の公式 Web や公式アプリでサポートされるようになっていました。様々な形式の画像や動画、その他のメディアを一意な形で表示しようとする Twitter 側の思惑があるようですが、単純に見た目がいいじゃないか! という理由で、このサイトでも対応をしてみました。

本体は、タイトルのような更新ツイートをリッチにするための手段ではなく、TL 上で流れてきたリンクがどんなものかがリンク先に飛ばなくてもその場で確認できるリッチな表示形式なので、リツイートされまくりや紹介されまくりなエントリを書いているブログなどでこそ有効に機能しそうな気がしますね。

でも、

通販さんのツイートがまさに通販に(笑) な感じで割とネタとしても面白い機能ですよね。これは Amazon が対応しているからこういう表示ができているわけですが。

WordPress での対応準備

Summary Card というフォーマットに対応する方法です。詳細は技術情報をご覧下さい。

WordPress を使っている場合はブログ側での対応はそれほど面倒ではありません。基本的な対応を自動で行ってくれるプラグイン、Twitter Cards が公式プラグインディレクトリにてい公開されています。

このプラグインをインストールして、有効にすれば、対応完了まであと一歩!

現在のバージョンでは、Twitter Cards 対応に必要なメタ要素 twitter:site が自動的に追加されませんので、使用しているテーマを編集してヘッダ部分に出力されるように書き込んでやります。

<meta name="twitter:site" content="@yuuichi">

content 部分に自分の Twitter ユーザ名を書いてやれば良いでしょう。

これで下準備は完了。正しく動作しているかどうかは、ブログの特定のエントリを開いてソース表示してみて、

このようになっていればプラグインの動作は正常ですね。

続いて、Twitter 側にサイトを登録する申請を行います。

Twitter に Cards 対応したサイトを登録する

Participate in Twitter Cards へアクセスするとログインが求められますので自分のアカウントでログインします。

登録用のフォームがあるので、必要事項を記入して送信します。

Contact information

登録申請者の情報です。自分の名前、メールアドレス、Twitter ユーザ名 を入れておけば良いでしょう。

Website information

Twitter Cards で表示したいサイトの情報です。

Website domain は表示したいサイトURLのホスト名を書いてやれば良いです。ドメイン名のみだと、当サイトのように www が付いたりすると上手く動作してくれませんでした。

Website description はサイトの概要です。WordPress で設定しているならその内容をそのまま書いて良さそうです。

Twitter Username associated with that domain は自前のサイトの場合は自分の Twitter ユーザ名を入力します。

Example のフォームが3つありますがいずれか1つの入力で良いです。Photo Card や Player Card 対応の場合はまた方法が多少異なりますが、今回は Summary Card 対応ですので、一番上の Example Summary Card URL に自分のサイトの特定のエントリの URL を入力します。

以上でフォームへの入力は完了です。間違いがないのを確認して、Sbumit ボタンを押して送信しましょう。

翌日くらいには Twitter から 「Your request to be included in Twitter Cards has been approved」という件名のメールが届いて対応が完了したことが通知されます。

どのような形で表示されるかは Preview your Twitter Card のページで確認できますので、メールが届くまでプレビューを見ながらニヤニヤして待ちましょう(笑)

ロボットアクセスの許可

Twitter Cards は対応サイトの巡回に Twitterbot という名前のクローラが定期的にやってきます。robots.txt を読んで動作しますので、ロボットのクロールを拒否している場合などは修正してやる必要があります。

より良いタイムラインのために!

ということで以上で Twitter Cards への WordPress の対応は完了です。個人ブログよりは企業のサイトやニュース系のサイトなどがより恩恵が受けられそうな機能ですが、リッチなタイムラインを構築するための一助に対応してみてはどうでしょうか。

……まぁ、こういう囲い込み戦略が、API の規制やクライアントの多様性を損なっている面もあるので手放しに歓迎というわけにもいかないのが悩ましいところですね。