Twitter Cards: Get Inside the Stream

12.05.2012 - No Comments

Something kind of recent to the web development/social media scene is Twitter Cards.

Twitter Cards are snippets of data that Twitter pulls from links you share, like image thumbnails, descriptions, photos, and videos. It’s similar to the method Facebook uses to show content previews when you type a link into your composer:

Example of a shared link on Facebook
Example of a shared video on Facebook

Twitter just includes a streamlined preview description, image, link, video, and sometimes Twitter author in their previews:

Twitter Card video

Adding Twitter Card functionality to your website

Currently, Twitter Cards are only functional on a limited basis. The biggest part of the process is applying for the Twitter card program and entering your website’s data.

First, you need to add the proper meta tags to the  of your website. These tell Twitter that 1) your site supports Twitter cards and 2) your site is connected with a Twitter account.

<meta name="twitter:card" content="photo">
<meta name="twitter:site" content="@examplephotosite">
="twitter:creator" content="@sippey">
<meta name="twitter:url" content="http://example.com/photo/a/">
<meta name="twitter:title" content="Good Morning, San Francisco">
<meta name="twitter:description" content="Great view this morning">
<meta name="twitter:image" content="http://example.com/photo/a/image.jpg">
<meta name="twitter:image:width" content="610">
<meta name="twitter:image:height" content="610">

A great benefit of the meta tag “twitter:creator” is the ability to embed the author’s Twitter handle in addition to the site’s Twitter handle. So when we post our Happy Medium blogs, our individual Twitter handles are marked as the author of that blog post.

Twitter Card Link

Not all of these tags are required, and if you already use Facebook’s OpenGraph tags, Twitter can grab data from those instead. Check out the Twitter Card documentation for more information on this.

The next step is to test a page on which you’ve added Twitter Card meta data. Head over to the Twitter Card Tester and input the link to your page.

Twitter Card Previewer

Twitter Card Previewed

After you’ve confirmed Twitter can properly pull the card data from your page, head over and begin the request and approval process. The application will ask that you provide an example of how Twitter Cards will be used on your site.

After anywhere from a few days to a week, you may receive an email saying that your site has been approved for Twitter Card use.

Twitter Card Request

Email that Twitter Cards have been approved

Limitations to Twitter Cards

Right now, the code Twitter provides for Twitter Cards gets flagged as invalid by the W3C. If that matters to you, a workaround is to use property in place of name in the meta tag.

W3C Validation Error

Another interesting topic is the benefit to business. In fact, Instagram pulled support for Twitter Cards this morning. What does this mean? Instagram photo links posted to Twitter will not automatically be pulled in by Twitter. This means exponentially fewer views of photos, but likely more clickthroughs to the Instragram links on Twitter.

Have you began using Twitter cards? Do you find them to be of value? Please let me know in the comments below!

Sign up here for our weekly newsletter, It's a Snappy Readium