Twitter Summary Card Overview
The Twitter Summary Card provide rich, engaging ways to promote your site or content with Photos and Videos as you create new posts on twitter. Although Twitter still supports the addition of media to your tweets, it can be less interactive and engaging.
By leveraging these cards, we can maximize the traffic to your site or blog and increase the optimization and efficiency of your marketing efforts. The cards will render live content via the markup it finds within the pages you reference from your links.
As a publisher, you can easily share things like the Title, Description, Image, and Author of the page you are sharing.
Twitter Summary Card Types
Depending on what type of content your are trying to promote, you can choose between different card types. Each card type will render differently when you go to promote your content. Each card type can be specified by adding the <meta> tags to page <head>.
Summary Card
Simple preview of webpage with Title, Description, and Thumbnail Photo. Best for mobile devices.
<meta name="twitter:card" content="summary" /> <meta name="twitter:site" content="@flickr" /> <meta name="twitter:title" content="Small Island Developing States Photo Submission" /> <meta name="twitter:description" content="View the album on Flickr." /> <meta name="twitter:image" content="https://farm6.staticflickr.com/5510/14338202952_93595258ff_z.jpg" />
Summary with Large Photo
Preview of webpage with Title, Description, and Large Photo. Best for desktop or PC devices.
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@nytimes"> <meta name="twitter:creator" content="@SarahMaslinNir"> <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">
Player Card
Media Player to promote Audio and Video content. Allows users to play content directly within feed.
<meta name="twitter:card" content="player" /> <meta name="twitter:site" content="@rchoi" /> <meta name="twitter:title" content="Sample Player Card" /> <meta name="twitter:description" content="This is a sample streaming video. When you implement, make sure all links are secure." /> <meta name="twitter:image" content="https://yoursite.com/example.png" /> <meta name="twitter:player" content="https://yoursite.com/container.html"/ > <meta name="twitter:player:width" content="480" /> <meta name="twitter:player:height" content="480" /> <meta name="twitter:player:stream" content="http://devimages.apple.com/iphone/samples/bipbop/gear1/prog_index.m3u8" /> <meta name="twitter:player:stream:content_type" content="video/mp4; codecs="avc1.42E01E1, mp4a.40.2"" />
App Card
Promote mobile application Name, Icon, and Link for Download. Directly download highlighted application from within feed.
<meta name="twitter:card" content="app"> <meta name="twitter:site" content="@TwitterDev"> <meta name="twitter:description" content="Cannonball is the fun way to create and share stories and poems on your phone. Start with a beautiful image from the gallery, then choose words to complete the story and share it with friends."> <meta name="twitter:app:country" content="US"> <meta name="twitter:app:name:iphone" content="Cannonball"> <meta name="twitter:app:id:iphone" content="929750075"> <meta name="twitter:app:url:iphone" content="cannonball://poem/5149e249222f9e600a7540ef"> <meta name="twitter:app:name:ipad" content="Cannonball"> <meta name="twitter:app:id:ipad" content="929750075"> <meta name="twitter:app:url:ipad" content="cannonball://poem/5149e249222f9e600a7540ef"> <meta name="twitter:app:name:googleplay" content="Cannonball"> <meta name="twitter:app:id:googleplay" content="io.fabric.samples.cannonball"> <meta name="twitter:app:url:googleplay" content="http://cannonball.fabric.io/poem/5149e249222f9e600a7540ef">
Twitter Summary Card Validator
Twitter provides developer resources to preview what your cards will look like prior to posting. Here you can view what your content looks like prior to publishing becoming a tweet. This is extremely useful when preparing the initial setup of your meta tags or while ensuring your images are displaying correctly. See: Card Validator Tool.
For more information regarding what options are available for adjusting your cards, please see the following Optimize Tweets with Cards
