Perhaps you have recently noticed some pretty tweets appearing on your Twitter stream, these are performed by people who have successfully implemented the relatively new Twitter Card metadata protocol. Similar in several ways to Open Graph, Twitter Card is a simple mark-up that allows you to enrich how your content appears when tweeted.

With Twitter Cards, you can attach videos, rich photos as well as media experience to Tweets that drive an audience to your site. All you need do is to simply add a few lines of HTML to your webpage, and users who Tweet links to your content will have a “Card” added to the Tweet that is visible to each of their followers. In addition to the URL and copy, there are several card types you would like to appear whenever the URL is tweeted.

Summary Card

This card can be utilised for diverse web contents, from news articles and blog posts to products and services. The summary card is designed to provide the reader with a preview of the content before clicking through to your site. The dimension of the image must be at least 120px by 120px and the file size must not be more than 1MB. For a timeline, the image will be cropped to 4:3 aspect ratio and resized so as to be displayed at 120px by 90px. Likewise for embedded tweets, the image will be cropped and resized to 120px by 120px.

Sample code:

<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/1433952_93595258ff_z.jpg"/>

Summary Card with Large Image

The Summary Card with Large Image offers a great, full-width notable photo together with a tweet. It is built to provide the audience with a rich-photo experience and on tapping on the picture leads the user to your website.

The description text box is truncated to 200 characters therefore, you should use that space to briefly summarise the content of the page as appropriate for presentation within a Tweet.

Image: URL to a unique image representing the content of the page and should be able to drag an attention (funny photos, intensive colours or graphics). It is not a good practice to use a generic image such as your author photo, website logo or other image that spans multiple pages. Images for these Cards should be at least 280px by 150px but must be less than 1MB in file size.


Sample code:

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

Single Photo Card

The Photo Card places the image at the front and centre in the Tweet. Whenever you click on the photo, the photo card expands it to a richer, detailed view. Twitter resizes images while maintaining the original aspect ratio to fit the following sizes:

  • Web: maximum length of 375px, maximum breadth of 435px
  • Mobile (non-retina screens): maximum length of 375px, maximum breadth of 280px
  • Mobile (retina screens): maximum length of 750px, maximum breadth of 560px

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


Sample code:

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

Gallery Card

The gallery card shares a photo collection with your Twitter audience. It allows you to embed up to four photos in a tweet. Also, the Gallery Card allows you to represent collections of photos within a Tweet. This Card type is designed to let the user realize that there is more than just a single image at the URL shared but rather, a gallery of related images. The maximum allowed description length of the content is 200 characters.


Sample code:

<meta name="twitter:card" content="gallery"/>
<meta name="twitter:site" content="@fodorstravel"/>
<meta name="twitter:creator" content="@fodorstravel"/>
<meta name="twitter:title" content="America's Best Small Towns"/>
<meta name="twitter:description" content="For the second year in a row, we've compiled a list that highlights some of the best places in the country you don't hear about every day." />
<meta name="twitter:url" content="http://www.fodors.com/news/photos/americas-best-small-towns"/>
<meta name="twitter:image0" content="http://www.fodors.com/ee/files/slideshows/telluride-resized.jpg"/>
<meta name="twitter:image1" content="http://www.fodors.com/ee/files/slideshows/shutterstock_18216130-resized.jpg"/>
<meta name="twitter:image2" content="http://www.fodors.com/ee/files/slideshows/3-marfa-texas.jpg"/>
<meta name="twitter:image3" content="http://www.fodors.com/ee/files/slideshows/4-maui-hawaii.jpg"/>

Product Card

The Product Card is a better way to represent retail items and products on Twitter. This type of card is designed to showcase your products by means of a description, an image and allow you to highlight two other key details about your product.

The Product Card requires an image size of 160 x 160 or greater. Although it prefers a square image, we can resize/crop oddly shaped images to fit as long as both dimensions are greater than or equal to 160 pixels.
example twitter product card
Sample code:

<meta name="twitter:card" content="product" />
<meta name="twitter:site" content="@iHeartRadio" />
<meta name="twitter:creator" content="@iHeartRadio" />
<meta name="twitter:title" content="24/7 Beatles — Celebrating 50 years of Beatlemania" />
<meta name="twitter:image" content="http://radioedit.iheart.com/service/img/nop()/assets/images/05fbb21d-e5c6-4dfc-af2b-b1056e82a745.png" />
<meta name="twitter:label1" content="Genre" />
<meta name="twitter:data1" content="Classic Rock" />
<meta name="twitter:label2" content="Location" />
<meta name="twitter:data2" content="National" />

Website Card

A Website Card allows you feature your website content within a Tweet and allow users to gain access directly to your site by clicking on the card. When the Card is tweeted, it will be appended with an engaging image and any additional information about your website.

If your aim is to lead visitors to your website by clicking on your tweets then, Web Cards will assist you build a lot more targeted traffic. Usually, Tweets leading to your website would have just the Tweet text and the link. Nevertheless with the Website Card, visitors will see more contexts regarding your site and a heading.
website twitter cards
How to set up a Website Card
1. Log into your Twitter Ads account.
2. Click on the “Create new campaign” drop down and select “Website clicks or conversions”.
3. Underneath the “Creative” section, set up your Website Card

App Card

The App Card is an excellent way to include mobile apps on Twitter as well as to drive set ups. It is unique, just like we utilize each of the respective app stores (Google Play, Apple iTunes) to proxy the pertinent Card data. If you specify the Card type, and each of the corresponding App IDs to the respective app stores, our system will proxy the rest for you (number of reviews, number of stars for the app etc.). You can as well optionally specify a more concise description of your application.

The App Card is built to accommodate name, icon and description, as well as to emphasize qualities like the price and the rating. When applying and evaluating your App Card, be sure that the app is publicly available in an app store, else Twitter will not be able to gather its details. Likewise by default, the system examines the US store therefore if your application is located in other countries, make sure to specify this by using the Twitter country Meta tag.

The picture for the Apps Card is likewise downloaded straight from the apps store wherein your app is located. Ensure your App Card works properly and the size of the image uploaded to the Google Play store/iTunes is less than 1MB.


Sample code:

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

Player Card

Social media is now increasingly turning towards video marketing. Over the last few years, online video has proven to be the most compelling and engaging form of content for social media users who watch and share thousands of them every single minute. Every major social network has recently developed its own native video services and/or promoted video ads. No wonder Twitter came up with a similar solution.

Audio streams and video clips have a special place on the Twitter platform courtesy of the Player Card. Thus by implementing a few HTML Meta tags to your website, you can deliver your rich media to you audience.

After using the card validator to test your player card, you as well use it to submit your player card for approval. The procedures for this are as follows:
1. Go to the Card Validator
2. Click on “Validate & Apply” tab
3. Enter your URL and click on “Go!”
4. If the Meta tags are properly in place, click “Submit for Approval”
5. Complete the form and provide your email address to enable us contact you for updates.

The Twitter team is keen to bring rich content. Their approval process includes testing your experience across the various platforms, as well as re-validating it periodically. That allows them to provide a secure and consistent experience to all users and across all platforms. In particular, they want to ensure that your Player Card implementation does not breach the style or security policy of a Player Card. To understand this policy, please read the following resources:

  • Display Requirements;
  • Player Card Policy & Rules;
  • Mixed content/SSL security violation troubleshooting.

Twitter Card and Analytics

The most interesting thing about these cards is the fact that the Twitter Cards will not only let you attach rich-media experiences to Tweets regarding your articles, through Twitter Card Analytics you will get relevant experience into how your content will be shared on Twitter. Furthermore, through custom-made data and ideal tactics, Twitter Card analytics shows tips on how to enhance fundamental metrics like app install attempts, URL clicks and Re-tweets.

This tool allows you;

To compare the top performing Twitter Cards that drive clicks, allowing you to measure the results from the different types of cards implemented:

card types twitter cards
 

You can have a complete view of exactly how your articles are performing on Twitter, showing the number of Tweets having a hyperlink to your application or site and monitors how the entire data in your Snapshot changed with time.

change over time twitter cards
 

For more information about the features and the implementations of Twitter Card Analytics, visit the twitter developer site.