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

Twitter Cardsとは

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

rakuten

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

teamviewer

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

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

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のページで以下の情報を入力します。

Website domain 自分のサイトのドメイン(http://はいりません)
www.geek.sc
Website description 自分のサイトの説明
例:格差社会に立ち向かう齊藤貴義の個人ブログ
Twitter Username associated with that domain 自分のTwitterアカウント名
例:miraihack
Example Summary Card URL 自分のサイトのURL(Twitter Cardsに対応しているページならどれでも良いです)
例:https://www.geek.sc/archives/830
Example Photo Card URL 空欄のままで大丈夫です
Example Player Card URL 空欄のままで大丈夫です

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

Twitterからのメール

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

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の商品ページをツイートすると、商品画像や概要が表示されます。