ブログをTwitter Cardsに対応させる方法

Twitter Cardsとは

Twitter Cardsとは、最近Twitterが始めた新しいツイート表示形式のことです。今まで、リンク付きのツイートの詳細は、以下のような感じで見えていたと思いますが、

これが以下のように、リンク先のタイトル、概要、アイキャッチ画像、書いた人のTwitterアカウントが表示させることができるようになりました。

Twitter Cradsに自分のブログなどのWEBサイトを対応させる方法

Twitter Cardsに自分のWEBサイトを対応させる方法は簡単です。HTMLのヘッダー情報に以下の例のようなHTMLが記述されていれば対応は完了です。facebookに概要を表示させるfacebook OGPタグの書き方と似ていますね。

meta name=”twitter:url” content=”https://www.geek.sc/archives/830″>
meta name=”twitter:title” content=”Linux版TeamViewerとTigerVNCの注意点 (CentOS6.3最小構成)” //</
meta name=”twitter:description” content=”CentOS6.3最小構成のサーバーに、X Windowを入れてリモート接続可能なようにする必要が出て設定したのですが、かなりハマりました。最小構成ゆ”>
meta name=”twitter:image” content=”https://www.geek.sc/wp-content/uploads/2013/03/TeamViewer-ProLarge.jpg” //</
meta name=”twitter:image:width” content=”321″>
meta name=”twitter:image:height” content=”321″>
meta name=”twitter:creator” content=”@miraihack”>[/html]

twitter:urlには記事のURL、twitter:urlにはページタイトル、twitter:descriptionにはページの概要、twitter:imageにはアイキャッチ画像（そのページの特徴となる画像）、twitter:createrを入力します。これでサイト側は対応完了です。

WordPressブログをTwittre Cardsに対応させる

WordPressブログの場合は、Twitter Cardsプラグインがあります。プラグインをインストールするだけで、WordPressの記事情報から、twitter:url、twitter:title、Twitter:description（WordPressの抜粋）twitter:image（WordPressのアイキャッチ画像）を自動的にHTML出力してくれます。プラグインの設定は特にいりません（WordPress管理画面にも設定項目はありません）。ただ、現時点でこのプラグインは、twitter:createrの出力には対応していないようで、そちらの情報はテンプレート側で対応させました。

Twitter Cardsを登録申請する

自分のサイトがTwitter Cardsに対応したら、Twitterに通知する必要があります。まず、Twitter DevelopersにTwittreアカウントでログインします。

次に出てきた、Participate in Twitter Cardsのページで以下の情報を入力します。

そして、submitボタンを押します。これで申請は完了です。その後、Twitterの方で審査が行われるようです。

Twitterからのメール

Twitter Cardsの審査には１週間ほど掛かると言われていますが、私はTwitter Card Supportから２日後に以下の承認メールが来ました。

Twitter Cards – Your submission has been approved!

Hello 齊藤貴義,

Your request to be included in Twitter Cards has been approved. We’ve activated Summary and Photo cards for www.geek.sc.

If you would like to have more domains approved, please fill out the form at https://dev.twitter.com/form/participate-twitter-cards again.

Thanks, The Twitter Cards Team

(This is an unmonitored email account. Please direct questions to the following support thread: https://dev.twitter.com/discussions/cards/help)

これでTwitter Cards登録手続きは完了です。この時点で、過去の記事も含め、Twitter Cardsに対応しているHTMLページへのツイートは全て、Twitter公式サイト上でTwittre Cards形式で表示されます。

Twitter Cardsのメリット

これは評価の難しいところです。Twitter公式サイト上では一番最初にお見せしたようなページの概要表示がされますが、これがどれくらいインパクトがあるかは正直微妙なところです。公式サイトのツイート詳細ページに出てくること以外では、タイムライン上では「概要」というリンクをクリックしないと出て来ません。

また、現時点ではTwitter Cards APIなどは公開されておらず、Twitter Cardsに対応したTwitterクライアントも（私の知っている限りでは）見たことがありません。ただ、今後APIが整備されて対応クライアントも増えてくれば、自分のサイトの概要表示にアクセントをつけられる手段になるかもと少し期待しています。

今のところ、大手サイトではAmazonやはてなブログなどがTwitter Cardsに対応しているようで、Amazonの商品ページをツイートすると、商品画像や概要が表示されます。