Twitter now supports story summaries in an expanded Tweet view powered by Twitter Card markup. Twitter looks for special <meta> elements inside linked pages to classify content and build a story summary. Twitter Cards fall back to Open Graph protocol markup to complete a story when no Twitter-specific <meta> exists. Publishers may associate a page with an author and site Twitter account to encourage new followers. Twitter plans to syndicate parsed story summaries with the Tweet data, allowing a viewer to browse basic story information in a mobile client before following the link. Anyone can add Twitter Card markup to their pages; Twitter is currently whitelisting domains for special treatment within timeline (request inclusion here).

I wrote a Twitter Card generator for PHP and a Twitter Card WordPress plugin if you would like to add Twitter Card markup to your site.

Card types

Twitter supports three types of story summaries: summary, photo, and player.

Summary

Twitter Card summary

All pages are considered a “summary” by default. Twitter wants to see a canonical URL, page title up to 70 characters, and a description up to 200 characters. You may optionally provide an image Twitter will crop and resize to a 120×120 pixel square.

Photo

Twitter Card photo

Photo cards place an image at the top of the story summary expanded up to the full width of the expanded Tweet display area. Photos must be at least 280 pixels wide and 150 pixels tall to meet the minimum viewing area of mobile phone client. Twitter will resize your image up to a maximum width of 560 pixels while trying to maintain your original aspect ratio.

Player

Twitter Card player

A player card features inline video through an HTML <iframe> or a directly linked MP4 file with a H.264 Baseline Level 3.0 video track and AAC LC audio track up to 640×480 pixels. All video assets are expected to be served over HTTPS to avoid any mixed content issues with a parent Twitter HTTPS timeline.

2 replies on “Twitter Card markup in expanded Tweets”

  1. I notice the twitter card documentation has the meta tags with attributes ‘name’ and ‘content’, whereas in the source for this page you have meta tags with attributes ‘name’ and ‘value’, not ‘content’.

    Not to sound picky, but is there a particular reason for this?

Comments are closed.