Welcome to this weeks video blog, today James and I are going to give a brief introduction to Twitter Cards and explain how you can go about implementing them onto your website.
So midway through last year, Twitter announced their new Twitter Cards API that allows developers to create expanded tweets similar to how at the time, YouTube videos and Instagram photos were visible within tweets. Twitter Cards take this one stage further allowing for tweets to be expanded to reveal additional excerpts from the shared link including images and media.
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.
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.
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.
So in conclusion, Twitter Cards are still in their infancy but do look promising if Twitter can ensure they are not spammed and spoil the simplicity of Twitter which has made it so popular over the past 6 years. Despite Twitter Cards having been around for about 6 months, we both only noticed them in December last year as they’re not immediately obvious to see, and very few websites have applied to use them. If you’re looking for some verified examples however, we recommend taking a look CreativeBloq.com, TheVerge.com, YouTube, Flikr and Yoast’s website.