Twitter Cards Explained

Twitter Cards allow for tweets to be expanded to reveal additional excerpts from the shared link including images and media.

Summary Cards

First you have Summary Cards, which are the default all encompassing option. These cards, like you can see here when you Tweet Yoast’s homepage, includes a title, description, square thumbnail image, and Twitter account attribution. This default option works well for regular pages and more specifically news or blog posts.

Photo Cards

Next you have the Photo Cards option which is similar to how Twitter used to embed Instagram images within tweets. Once expanded, Photo Cards offer an enlarged window to display a single relevant image, perfect for sharing individual photos on websites like Flikr as in the example here.

Player Cards

And last but not least, you have the Player Card for embedding media like videos, music and live streaming events. Naturally websites like YouTube have adopted the Twitter Player Cards for the videos, which provides seamless experience to watch videos within tweets.

So those are the three difference cards available and it’s clear to see that Twitter have followed the trend set by Facebook in embedding rich content when users post URLs on their timeline. Compatibility to see Cards when you expand tweets is not yet universal however. Twitter’s own Mac App doesn’t support them along with other apps and services that use the Twitter API. Despite this, if Twitter cards proove useful and popular, all apps and services will eventually catch-up to ensure Twitter Cards are visible on any media.

How to install

So in all, Twitter Cards provide rich media and content to otherwise sterile text-based tweets. If you’re looking to take advantage of Twitter Cards there’s a couple of steps you’ll need to take in order to enable them for your URLs.

Similar to Facebook, you initially set up a series of Meta Tags like this below, that allow you specify the elements within the twitter card, giving you full control of how your content appears within Tweets.

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@crearegroup">
<meta name="twitter:creator" content="@jamesbavington">
<meta name="twitter:url" content="http://www... Link to URL here">
<meta name="twitter:title" content="Title of Page goes here">
<meta name="twitter:description" content="Description of page goes here">
<meta name="twitter:image" content="http://www... URL of image thumbnail goes here">

We’d recommend heading over to the Twitter Cards official page to follow this process, as you also need to apply and register your URLs in order to participate in the Twitter Cards scheme. If you use WordPress to power your website, it’s also worth noting that Yoast’s WordPress SEO plugin provides support for Twitter Cards as standard.