Twitter Cards | Twitter

Standards Based Development

Summary Card

The summary card represents syndicated content, like blog posts and news articles, etc.

Note: if any required fields are omitted, the card may not be shown in the Tweet.


<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" content="http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg">

Photo Card

The photo card represents an image tweet. Images will be resized maintaining aspect ratio to fit the following sizes:

The twitter:image must be a minimum of 280px wide by 150px tall; only images with an exceptional aspect ratio will be cropped. Specifying twitter:image:width/twitter:image:height enables more accurate preservation of the aspect ratio when resizing.

twitter:title may be left blank in photo cards, as shown below:


<meta name="twitter:title" content="" />

Note: Animated gifs are not supported in Twitter Cards.

Photo card example:


<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" content="http://example.com/photo/a/image.jpg">
<meta name="twitter:image:width" content="610">
<meta name="twitter:image:height" content="610">

Player Card

Player Card's represent interactive media experiences, presenting the content by embedding an iframe within the Tweet.

Note: You control the entire content experience, and are responsible for providing cross-browser/platform/client compatability, including the following:

Note: there are alot of rules and specifications regarding a player card. It would be prudent to revisit dev.twitter for reference.

Player card markup:


<meta name="twitter:card" content="player">
<meta name="twitter:site" content="@examplevideosite">
<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" 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">

Player card markup for a player from foobar.com where foobar.com is also providing the url of the raw stream (the event).


<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" 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="http://example.com/raw-stream/a.mp4">
<meta name="twitter:player:stream:content_type" content="video/mp4; codecs="avc1.42E01E1, mpa.40.2"">

Twitter Cards