ブログのTwitter Cardsが有効になりました

2012/11/15 13:34

Twitter CardsはTwitter独自の仕様で、ツイートにURLが含まれているとそのURLのタイトルや概要、サムネイル、そのサイトのTwitterアカウントなどの情報がTwitterのWebサイトや公式クライアントアプリに表示されます。Facebookなどで利用されるいわゆるOGPみたいなものです。

この機能を有効にするにはまずサイトのほうにTwitter Cards用のmetaタグを記述する必要があります。さらにTwitter Cardsを有効にするために申請が必要です。申請が通ったらメールが送られてきます。

うちのブログはMTなので<head>タグ内に以下のような記述をしました。参考までに。

<!-- Twitter Cardsの種類。ブログ記事ならsummaryで。 -->
<meta name="twitter:card" content="summary">

<!-- パーマリンク -->
<meta name="twitter:url" content="<$MTEntryPermalink encode_html="1"$>">

<!-- 記事タイトル -->
<meta name="twitter:title" content="<$MTEntryTitle encode_html="1"$> - F.Ko-Jiの「一秒後は未来」">

<!--
  サイトのTwitterアカウントを@つきで。
  きちんと自分のアカウントを書いてね！
-->
<meta name="twitter:creator" content="@fkoji">

<!-- 概要は冒頭180文字とかにした。適当に。 -->
<meta name="twitter:description" content="<$MTEntryBody words="180" encode_html="1"$>...">

<!--
  twitter:image を指定しておくとサムネイルが表示される。
  うちのブログは独自のスクリプトで出しているのでコードは割愛。
 -->
<meta name="twitter:image" content="画像のURL">

当初 twitter:image はコメントアウトしていたのですが、その状態でもサムネイルは表示されてましたｗどうもコメントアウトは無視してるっぽい。あと最初はサムネイルの表示が少々重いです。

※ (追記) サムネイルが表示されていたのは、どうやらTwitter CardsがOGPにも対応しているためのようです。

ところでアカウント名が確かにそのサイトの所有者のものかどうかって、目視で確認してるんでしょうか。そのための申請フローかな。だとしたらサイト内にきちんとTwitterアカウントへのリンクを載せといたほうがいいかもしれないですね。

プレビューツールは少々重くてエラーばかりだったので申請のときに「プレビューツールはうまく動作しなかった」的なことを書いたのですが、無事に承認されました。現在は少し改善されているようです。

» Twitter Player Cards and HTTPS | Twitter Developers