Twitter Cards仕様 (Summary Cards, Photo Cards, Gallery Cards)

※2013/4/2の時点での情報です

TwitterCard仕様 : https://dev.twitter.com/ja/docs/cards

概要

• 4/2にリリースされた新機能を含めて、Twitter Cardについてまとめる（大分時間がたってしまいましたが...)
• ここではSummary Cards, Photo Cards, Gallery Cardsのみまとめる
• Cardの調査はCard Validator、利用しているユーザの投稿から調査した
• 実際に利用してはいないため、Validatorと利用時の挙動の差に注意が必要

Twitter Cardとは

• ツイートに付加するコンテンツ
• ツイートにURLを付加すると、TwitterがそのURLのメタデータを見て、ツイートにカードを付加してくれる
• twitterタグとogタグに対応している
• 以下の6つのタイプがある
• Summary Card : 説明文とサムネイルを付加する。ブログやニュース記事、製品紹介などの説明に用いられる
• Photo Card : 大きな画像が1枚付加する。説明文は付加できない
• Gallery Card : 小さめの画像4つ付加する。説明文も付加できる
• Player Card : 動画を付加する
• App Card : アプリの紹介文、インストールへの導線を付加する
• Product Carad : 製品紹介となる写真や説明と価格やレーティングなどを付加する

OpenGraphとの対応表

• twitter:タグとog:タグが両方ある場合、twitter:タグが優先される
• twitter:url, og:urlは無視される (設定しても反映されない、なくても問題無し)
• Card Validatorで見る限り、リンクしたURLを使ってtwitter側が内部的に設定している様子

Property	Value	Summary	Photo	Gallery	OpenGraph Fallback
twitter:card	"summary", "photo", "gallery" (デフォルトsummary)	No	Yes	Yes	-
twitter:site	サイトのTwitterユーザ名 (@は省略可)	No	No	No	-
twitter:site:id	同上。ユーザのTwitter IDとは異なる。	No	No	No	-
twitter:creator	コンテンツ作成者のTwitterユーザ名	No	No	No	-
twitter:creator:id	コンテンツ作成者のTwitterユーザID	No	No	No	-
twitter:description	コンテンツの説明 (最大200文字)	Yes	-	No	og:description
twitter:title	コンテンツのタイトル (最大70文字, photo, galleryでは空白タイトル指定可)	Yes	No	No	og:title
twitter:image	カードで使われる画像のURL	No	Yes	-	og:image
twitter:image:width	ピクセルでの画像の幅	-	No	-	og:image:width
twitter:image:height	ピクセルでの画像の高さ	-	No	-	og:image:height
twitter:image0	ギャラリー内の最初の画像のURL	-	-	Yes	-
twitter:image1	ギャラリー内の2つ目の画像のURL	-	-	Yes	-
twitter:image2	ギャラリー内の3つ目の画像のURL	-	-	Yes	-
twitter:image3	ギャラリー内の4つ目の画像のURL	-	-	Yes	-

Card詳細

Summary Cards

• OpenGraphと同程度の情報が出る
• すでにogタグを設定している場合は、追加でtwitter:card や twitter:site, twitter:creator を設定しておいた方が分かりかりやすくて良さそう
• og:image で指定した画像がサムネイルとして表示されるの変更はここでは不要

Photo Cards

• twitter:card の指定が必須
• twitter:image の指定が必須
• 縦150px x 横280px 以上の画像でないと描画されない
• 4/2の仕様追加・変更でtwitter:descriptin は使えなくなった

Gallery Cards

• twitter:card の指定が必須
• twitter:description 設定可能
• twitter:image[0-3] の指定が必須
• twitter:image[0-3] で指定した画像が取得できない場合
• 一枚だけ取得できない場合 : twitter:image[0,1] なら上段に、 twitter:image[2,3] なら下段に、画像2枚分使って横長に表示される
• twitter:image0, twitter:image1 が取得できない場合 : 上段が空白になる
• twitter:image1 だけ取得できた場合 : 上段に画像2枚分使って横長に表示され、下段は空白になる
• すべて取得できない場合 : すべて空白になる
• ※これらはCard Valideator上での挙動のため、実際に使用したときどう表示されるかは要確認

その他Tips

• カード対応したURLを複数付けてツイートした場合、一番後ろのURLのページを参照して、カードが表示される (カードとページは1:1になる)
• カードの見え方は、表示するクライアントに依存する
• tweetをクリック(タップ)や詳細ボタン押下して始めて画像等が見える
• Photo Cardで表示される画像サイズ
• twitter:image:width や twitter:image:height を利用すると、より正確に縦横比を維持してリサイズされる
• Photo Cardでは、縦150px x 横280px 未満の画像は表示されない
• ※Summary Cardでは表示される
• 1MBを越える画像は表示されない
• gifは2013/04/04現在サポート外(表示される模様)
• 以下のサイズにリサイズされて表示される

クライアント	最大縦(px)	最大横(px)
ブラウザ(ウェブサイト)	375	435
モバイル端末(非Retinaディスプレイ)	375	280
モバイル端末(Retinaディスプレイ)	750	560

• Gallery Cardで表示される画像サイズ

• Card Validatorでは240x240px で表示される

• 仕様には明示されていない

• 利用申請

• 4/2の仕様追加に伴って、Summary Card, Photo Card, Gallery Cardは申請が自動承認されるようになった様子

• Card Validatorでページの確認をすると、「Request Aproval」のボタンが表示される
  クリックすると、以前の申請ページのフォーマットが表示される

• 必要項目を埋めて申請すればよさそう

• 仕様のトップページに次の一文がある

• Please note that auto-approval for Card types is not currently available for the Player Card, App Card, or Product Card at this time.

• 事前の利用申請ができるかは不明