まだ重たいCMSをお使いですか?
毎秒 723リクエスト を捌く超高速CMS「adiary

2012/08/30(木)Twitter Cardsの仕様メモ(ドキュメントの適当日本語訳)

Twitter公式webタイムライン中にコンテンツを埋め込めるTwitter Cardsについての自分用メモ。あとで実装する用。

Twitter Cardsとは?

twitter_cards.png

TwitterをWebサイトから見ているときに、クリックするとTwitpicの画像やYoutubeの動画がそのままタイムライン上で表示されたりするあの機能のことです。

このTwitter Cardsは誰でも対応サービスを作ることができます。

大まかな流れ

  1. 公式のドキュメントをよく読んで
  2. 3種類のTwitter Cardsのどれを実装するか決めて
    • summary: デフォルト。タイトルと説明とサムネイルを表示。
    • photo: 写真を表示。
    • player: 動画や音のメディアを表示
  3. サイトに必要なmetaタグを実装して
  4. apply to participateからTwitterにCardsを申請。
  5. Twitterに認可されればカードが表示されるようになる。

申請結果は申請フォームに入力したメールアドレスに送られてきますので、忘れず確認してください。

メタタグ要素

<meta name="twitter:card" content="summary">

以上のようなデータを、そのページの<HEAD>内に出力する。

プロパティ必須要素か説明
su-ph-pl-
twitter:cardYesYesカードのタイプ。「summary」か「photo」か「player」*1
twitter:urlYesYesYesコンテンツのCanonical URL
twitter:titleYesコンテンツのタイトル。最大70文字(70 characters)
twitter:descriptionYesコンテンツの説明。最大200文字(200 characters)
twitter:image:srcYesYesコンテンツを象徴する画像のURL。*2
twitter:image:width画像の横px(アスペクト比を保持してリサイズするために必要)
twitter:image:height画像の縦px(アスペクト比を保持してリサイズするために必要)
twitter:player--YesiframeプレイヤーのURL。コンテンツが混ざってないこと。
twitter:player:width--Yesiframeの横px
twitter:player:height--Yesiframeの縦px
twitter:player:stream--生ストリームのURL。Twitterのモバイル・アプリケーション等でダイレクト再生時に使用する。「MPEG-4 コンテナ format (拡張子.mp4)」でなければならない。
twitter:player
:stream:content_type
--*3生ストリームの「MIME type/subtype」を指定(RFC 6381)。現在サポートしているのはRFC4337(MP4のMIME type)のみ。
twitter:site「@username」形式。WebサイトオーナーのTwiter ID
twitter:site:id上と一緒だが、Twitter user IDの代わりに記述する文字列。
twitter:creator「@username」形式。コンテンツ製作者のTwiter ID
twitter:creator:id上と一緒だが、Twitter user IDの代わりに記述する文字列。

補足

  • twitter:siteやtwitter:creatorはCardコンテンツのフッタに表示される。ここにTwitter IDを指定することで、そのIDのツイートに直接アクセスしたりフォローすることができる。

*1 : 省略時は「summary」を指定したとみなされる

*2 : player指定時はプラットフォームがiframesやインラインプレイヤーをサポートしてない時に表示する画像。画像はプレイヤーと同じサイズであり、縦px×横pxの値が68,600pxを超えないこと。

*3 : twitter:player:stream指定時は必須

Summary Card

  • 画像のサイズが120px×120pxを超える場合はリサイズないしはクロッピングされます。

カードのサンプル。

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@nytimes">
<meta name="twitter:creator" content="@SarahMaslinNir">
<meta name="twitter:url" content="http://www.nytimes.com/2012/02/19/arts/music/amid-police-presence-fans-congregate-for-whitney-houstons-funeral-in-newark.html">
<meta name="twitter:title" content="Parade of Fans for Houston’s Funeral">
<meta name="twitter:description" content="NEWARK - The guest list and parade of limousines with celebrities emerging from them seemed more suited to a red carpet event in Hollywood or New York than than a gritty stretch of Sussex Avenue near the former site of the James M. Baxter Terrace public housing project here.">
<meta name="twitter:image:src" content="http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg">

Photo Card

Twitterで表示される際、画像は次のようにリサイズされます。

媒体最大サイズ
Web横435px×縦375px
モバイル横280px×縦375px
モバイル(retina displays)横560px×縦750px

カードのサンプル。

<meta name="twitter:card" content="photo">
<meta name="twitter:site" content="@examplephotosite">
<meta name="twitter:creator" content="@sippey">
<meta name="twitter:url" content="http://example.com/photo/a/">
<meta name="twitter:title" content="Good Morning, San Francisco">
<meta name="twitter:description" content="Great view this morning">
<meta name="twitter:image:src" content="http://example.com/photo/a/image.jpg">
<meta name="twitter:image:width" content="610">
<meta name="twitter:image:height" content="610">

Player Card

生ストリーム再生時のMPEG-4でサポートするコーデックは以下のとおり。

  • Video: H.264, Baseline Profile (BP), Level 3.0。最大640x480ピクセルの30fpsまで。
  • Audio: AAC, Low Complexity Profile (LC)

カードのサンプル。

<meta name="twitter:card" content="player">
<meta name="twitter:site" content="@foobar">
<meta name="twitter:url" content="http://example.com/watch/a">
<meta name="twitter:title" content="Example Video">
<meta name="twitter:description" content="This is a sample video from example.com">
<meta name="twitter:image:src" content="http://example.com/keyframe/a.jpg">
<meta name="twitter:player" content="https://example.com/embed/a">
<meta name="twitter:player:width" content="435">
<meta name="twitter:player:height" content="251">
<meta name="twitter:player:stream" content="https://example.com/raw-stream/a.mp4">
<meta name="twitter:player:stream:content_type" content="video/mp4; codecs=&quot;avc1.42E01E1, mpa.40.2&quot;">

Twitterクローラー

Twitterはカードの情報を拾いに行く際、robots.txt を参照します。適切に許可がされていないと、Cardsは表示されません。TwitterクローラーのUser-Agentは「Twitterbot/1.0」です。

Twitterにのみ許可を出す場合の robots.txtの記述例。

User-agent: Twitterbot
Disallow:

User-agent: *
Disallow: /

正しく設定できているか確認する 2013/04/11

正しく設置できているか、実際どのように表示されるかは、以下のURLから確認することができます。申請する前に一度表示確認をしておくほうが問題が少ないでしょう。*4

*4 : これを知らず、申請したけどタグが間違ってて登録されなかったことがありました(汗)

画像が表示されない 2014/02/24

"twitter:image" が "twitter:image:src" に仕様変更されたらしい。上のvalidatorでは昔の仕様でも正しく表示するという(紛らわしい……)。

まとめ

ドキュメントをみながら適当にまとめたメモです。実装の際には、一次情報として必ず公式ドキュメントを参照してください。またOpen Graphに関する仕様は省略しました。

記述ミス(勘違い)など発見しましたら、コメントもしくはリプライください。

adiaryなら設定不要でTwitter Cards/Facebook OGPに対応しています。

メモ

TwitterがアクセスするときのUIとIP。

199.59.148.209 - "GET /robots.txt HTTP/1.1" 200 4000 "-" "Twitterbot/1.0"

$ whois 199.59.148.209
NetRange:       199.59.148.0 - 199.59.151.255
CIDR:           199.59.148.0/22
NetName:        TWITTER-NETWORK
OK キャンセル 確認 その他