Summary Card with Large Image

API version 1API version 1.1
Updated on Fri, 2014-06-27 10:31

The Summary Card with Large Image features a large, full-width prominent image alongside a tweet. It is designed to give the reader a rich photo experience, and clicking on the image brings the user to your website.

The Tweet below from @Yahoo shows a Summary Card with Large Image along with the 140 characters:

On twitter.com and our mobile clients, the image appears below the tweet text.

Our system recognizes when URLs are included in a tweet, and crawls your site to fetch the Card type and content. To learn more about how our Card system works, read our Getting Started Guide.

Sample Code

Adding a Summary Card to your tweets is as simple as adding the below meta tags to your site:

  1. <meta name="twitter:card" content="summary_large_image">
  2. <meta name="twitter:site" content="@nytimes">
  3. <meta name="twitter:creator" content="@SarahMaslinNir">
  4. <meta name="twitter:title" content="Parade of Fans for Houston’s Funeral">
  5. <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.">
  6. <meta name="twitter:image:src" content="http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg">

Be sure to provide your own site attribution and content.

Once the tags are live, you can submit your Card for approval using our Twitter Card Validator.

App Downloads and Deep Linking

In addition to displaying your content in a more engaging way, the Summary Card can also drive downloads of and even link directly into your mobile applications. For more information, see App Installs and Deep-Linking.

Additionally, you can learn how to deep-link from this Card into your mobile app by reading here.

Reference

Below are the suggested minimum properties for the Summary Card including title, description, and image.

Card Property Description Required
twitter:card Should be set to a value of "summary_large_image" No. If no twitter:card value is set, we will default to a summary card.
twitter:title Title should be concise and will be truncated at 70 characters. Yes
twitter:description A description that concisely summarizes the content of the page, as appropriate for presentation within a Tweet. Do not re-use the title text as the description, or use this field to describe the general services provided by the website. Description text will be truncated at the word to 200 characters. Yes
twitter:image URL to a unique image representing the content of the page. Do not use a generic image such as your website logo, author photo, or other image that spans multiple pages. Images for this Card should be at least 280px in width, and at least 150px in height. Image must be less than 1MB in size. No
For a full list of supported tags, please see the Cards Markup Tag Reference.