Twitter cards

My selfie

James Turner,

Tags: HTML

We're back from hiatus with a series of posts on Ethan Marcotte and Karen McGrane's Responsive Web Design, an entrepreneurial site by the the masters of all things responsive and content. As I did last year, when I kicked off this blog, I'm going to start by taking a look at a morsel that I came across in the <head> section: Twitter cards.

Skip to navigation

Twitter what now?

Here's an overview of Twitter cards on Twitter's developer pages. In a nutshell, if you include the appropriate <meta> tags in your webpage's <head> section, any tweets that contain the URL to your webpage will automatically have a thumbnail of your website added to them.

A tweet containing a standard URL and a screen capture of the webpage content.
Figure 1: An example of a summary card.

Twitter cards come in a variety of forms. There are summary cards, which are just a small image, a title and a description of the page's content; app cards, which give a link to your app on Apple Store or Google Play; and player cards, which enable you to embed a video or audio player into your tweet.

Skip to navigation

Card coded

So, what are the meta tags used on Responsive Web Design? The first line tells Twitter what type of card it is. In this case, it's a summary card.

1: <meta name="twitter:card" content="summary">

The second line gives the Twitter username, including the @ symbol, of the website's author.

2: <meta name="twitter:site" content="@RWD">

Third, we have the URL of the website.

3: <meta name="twitter:url" content="http://responsivewebdesign.com/index.html" />

Next the title (in Figure 1, above, I guess it's the line in bold, below the ‘Moosejaw’ logo).

4: <meta name="twitter:title" content="Responsive Web Design — Welcome" />

Finally comes the small image which appears at the top of the Summary Card.

5: <meta name="twitter:image" content="http://responsivewebdesign.com/.../logo-rwd-sq.png" />

Looking under the bonnet of the ‘Moosejaw’ page (episode 54 of the podcast), I notice two interesting points. Firstly, they used a 120x90 GIF file. Twitter's developer guidelines simply state that the image must be under 1MB. The second interesting point is that the image they used seems to have been specially created for use in the page's Twitter Card.

One final tag that other pages on the site use is a description for the Twitter card. For example:

6: <meta name="twitter:description" content="Description text peas and carrots, rhubarb rhubarb." />
Skip to navigation

What good is it?

Going too far into the topic is beyond the scope of this post, but the developer site for Twitter cards talks about access to analytics data for your tweets. Here, it seems to suggest that cards tend to get slightly more click-throughs than plain URL links. I suppose for a Twitter user with a large following, this could have a considerable effect on through-traffic to your website, and potentially more conversions, all for just a few extra lines of code. Perhaps more impressive for me is the potential for a site to be linked in unusual ways not just to Twitter but to other social media tools. Let's see if my three Twitter followers (hi, mum) click through to this post now that I've added a Twitter card.

Skip to navigation