Photo Card

This Card was DEPRECATED on July 3, 2015 and has been mapped to the Summary Card with Large Image.

The Photo Card puts the image front and center in the Tweet. Clicking on the photo expands it to a richer, detailed view.

Below is a tweet from @Flickr showcasing the Photo Card.

Stunning photo of mountainous landscape and reflections http://t.co/esvsXTy7Tq

—Flickr (@Flickr) January 15, 2014

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 Photo Card to your tweets is as simple as adding the below meta tags to your site:

<meta name="twitter:card" content="photo" />
<meta name="twitter:site" content="@flickr" />
<meta name="twitter:title" content="Mountain sunset" />
<meta name="twitter:image" content="http://farm8.staticflickr.com/7334/11858349453_e3f18e5881_z.jpg" />
<meta name="twitter:url" content="https://www.flickr.com/photos/reza-sina/11858349453/" />

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.

Helpful Tips

Twitter will resize images, maintaining original aspect ratio to fit the following sizes:

  • Web: maximum height of 375px, maximum width of 435px
  • Mobile (non-retina displays): maximum height of 375px, maximum width of 280px
  • Mobile (retina displays): maximum height of 750px, maximum width of 560px

Twitter will not create a photo card unless the twitter:image is of a minimum size of 280px wide by 150px tall. Images will not be cropped unless they have an exceptional aspect ratio. Images must be less than 1MB in size. Images will be fetched and proxied by Twitter to ensure a high quality of service and SSL security for users.

Specifying the width and height using twitter:image:width and twitter:image:height helps us more accurately preserve the aspect ratio of the image when resizing.

Photo Cards are the only type of card which support a blank title. To render no title for the photo card, explicitly include a blank title element. For example: <meta name="twitter:title" content="">.

Animated gifs are currently supported in Twitter Cards via the Player Card.

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 Cards for Mobile Developers.

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 Photo Card including title and image.

Card Property Required
twitter:card

Must be set to a value of “photo”

Yes
twitter:site

The Twitter @username the card should be attributed to.

Yes
twitter:title

The title of your content as it should appear in the card. You may specify an empty string if you wish no title to render.

No
twitter:image

A URL to the image representing the content. Image must be less than 1MB in size.

Yes
twitter:image:width

Providing width in pixels helps us more accurately preserve the aspect ratio of the image when resizing.

No
twitter:image:height

Providing height in px helps us more accurately preserve the aspect ratio of the image when resizing.

No

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