Summary Card

Summary Card

 

The Summary Card can be used for many kinds of web content, from blog posts and news articles, to products and restaurants. It is designed to give the reader a preview of the content before clicking through to your website.

The Tweet below shows a Summary Card (photo and text) below the text of the Tweet:

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:

<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" />

Be sure to provide your own site attribution and content.

Once the tags are live, you can test your Card using our Twitter Card Validator.

Reference

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

Card Property Required

twitter:card

Must be set to a value of “summary”

 Yes

twitter:site

The Twitter @username the card should be attributed to.

 No

twitter:title

A concise title for the related content.
Platform specific behaviors:
  • iOS, Android: Truncated to two lines in timeline and expanded Tweet
  • Web: Truncated to one line in timeline and expanded Tweet
 Yes

twitter:description

A description that concisely summarizes the content as appropriate for presentation within a Tweet. You should not re-use the title as the description or use this field to describe the general services provided by the website. Platform specific behaviors:

  • iOS, Android: Not displayed
  • Web: Truncated to three lines in timeline and expanded Tweet
 No

twitter:image

A URL to a unique image representing the content of the page. You should not use a generic image such as your website logo, author photo, or other image that spans multiple pages. Images for this Card support an aspect ratio of 1:1 with minimum dimensions of 144x144 or maximum of 4096x4096 pixels. Images must be less than 5MB in size. The image will be cropped to a square on all platforms. JPG, PNG, WEBP and GIF formats are supported. Only the first frame of an animated GIF will be used. SVG is not supported.

 No

twitter:image:alt

A text description of the image conveying the essential nature of an image to users who are visually impaired. Maximum 420 characters.

 No

For a full list of supported tags, please see the Cards Markup Tag Reference.