Twitter公式webタイムライン中にコンテンツを埋め込めるTwitter Cardsについての自分用メモ。あとで実装する用。
TwitterをWebサイトから見ているときに、クリックするとTwitpicの画像やYoutubeの動画がそのままタイムライン上で表示されたりするあの機能のことです。
このTwitter Cardsは誰でも対応サービスを作ることができます。
- 公式のドキュメントをよく読んで
- 3種類のTwitter Cardsのどれを実装するか決めて
- summary: デフォルト。タイトルと説明とサムネイルを表示。
- photo: 写真を表示。
- player: 動画や音のメディアを表示
- サイトに必要なmetaタグを実装して
- apply to participateからTwitterにCardsを申請。
- Twitterに認可されればカードが表示されるようになる。
申請結果は申請フォームに入力したメールアドレスに送られてきますので、忘れず確認してください。
<meta name="twitter:card" content="summary">
以上のようなデータを、そのページの<HEAD>内に出力する。
| プロパティ | 必須要素か | 説明 |
|---|
| su- | ph- | pl- |
|---|
| twitter:card | | Yes | Yes | カードのタイプ。「summary」か「photo」か「player」 |
| twitter:url | Yes | Yes | Yes | コンテンツのCanonical URL |
| twitter:title | Yes | | | コンテンツのタイトル。最大70文字（70 characters） |
| twitter:description | Yes | | | コンテンツの説明。最大200文字（200 characters） |
| twitter:image:src | | Yes | Yes | コンテンツを象徴する画像のURL。 |
| twitter:image:width | | | | 画像の横px（アスペクト比を保持してリサイズするために必要） |
| twitter:image:height | | | | 画像の縦px（アスペクト比を保持してリサイズするために必要） |
| twitter:player | - | - | Yes | iframeプレイヤーのURL。コンテンツが混ざってないこと。 |
| twitter:player:width | - | - | Yes | iframeの横px |
| twitter:player:height | - | - | Yes | iframeの縦px |
| twitter:player:stream | - | - | | 生ストリームのURL。Twitterのモバイル・アプリケーション等でダイレクト再生時に使用する。「MPEG-4 コンテナ format (拡張子.mp4)」でなければならない。 |
twitter:player
:stream:content_type | - | - | | 生ストリームの「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のツイートに直接アクセスしたりフォローすることができる。
- 画像のサイズが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">
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">
生ストリーム再生時の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="avc1.42E01E1, mpa.40.2"">
Twitterはカードの情報を拾いに行く際、robots.txt を参照します。適切に許可がされていないと、Cardsは表示されません。TwitterクローラーのUser-Agentは「Twitterbot/1.0」です。
Twitterにのみ許可を出す場合の robots.txtの記述例。
User-agent: Twitterbot
Disallow:
User-agent: *
Disallow: /
正しく設置できているか、実際どのように表示されるかは、以下のURLから確認することができます。申請する前に一度表示確認をしておくほうが問題が少ないでしょう。
ドキュメントをみながら適当にまとめたメモです。実装の際には、一次情報として必ず公式ドキュメントを参照してください。また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
