The Twitter Cards API allows you to display a more descriptive overview of the content you're sharing on Twitter dubbed by Twitter as the way to 'get more than 140 characters out of your Tweets'.

First of, let me answer the question of why - why should you use Twitter Cards?

Not only are they very easy to setup, but they transform your Tweets into a more interactive experience allowing users to simply click on your Tweet to expand its details and revealing the Twitter Card. In short, the Twitter Card gives your users a sneak preview to the article or media you've shared.

What Card Layouts Are Available?

Twitter Cards currently supports 7 layouts:

  • Summary - The Summary Card is a general card that let's you preview content within a tweet. It will adjust it's appearance based on the size of the preview image available.
  • Summary Large Image - The Summary Card is a general card that let's you preview content within a tweet. It will adjust it's appearance based on the size of the preview image available.
  • Product - The Product Card is tailored towards previewing products in a tweet and has two customizable fields for product details.
  • Photo - The Photo Card will present a preview of an image within a tweet that can be viewed in the Twitter image viewer.
  • Player - The Player Card is specifically designed to playback video and audio content. Because this content is streamed, additional restrictions apply to this card.
  • App - The App Card is designed to work with the major Mobile App Stores and present preview information about a specific mobile app.
  • Gallery - The Gallery Card is ideal for an album, gallery, or collection of images that you want to preview in a tweet. The four preview images you choose for the Gallery Card will be viewable in the Twitter image viewer.

Twitter Cards Meta Tags

In this example, I'm going to look at the summary, image and video meta tags.

The first step is to ensure you've got the basic meta tags on your website:


<!-- card: Tells Twitter which layout you'd like to use (see the list above) -->
<meta name="twitter:card" content="summary" />
<!-- url: The URL of the content you're showing. Typically this is the canonical link of the page you want to display -->
<meta name="twitter:url" content="http://www.madebymagnitude.com/blog/using-twitter-cards-to-enhance-the-social-media-marketing-of-your-content" />
<!-- title: This will be displayed in the card -->
<meta name="og:title" content="Using Twitter Cards to Enhance the Social Media Marketing of Your Content - Technology" />
<!-- description: A short 200 character summary of the content (an intro paragraph) -->
<meta name="og:description" content="The Twitter Cards API allows you to display a more descriptive overview of the content you're sharing on Twitter. First of, let me answer the question of why - why.." />
<!-- image: The URL of the image representing the content -->
<meta name="twitter:image" content="http://static.madebymagnitude.com/blog/47137900351dd6c01810b21.20046013_4a34685a.jpeg" />
<!-- site: The Twitter username of the site itself including the @ -->
<meta name="twitter:site" content="@ALJTMedia" />
<!-- creator: The Twitter username of the author (it may be a multi-user blog) including the @ -->
<meta name="twitter:creator" content="@ALJTMedia" />

Twitter uses the OpenGraph title and description meta tags. If you're concerned about validating HTML5, then you won't be happy with this. OpenGraph doesn't support using meta name, instead it must be meta property - thought in the example above I've left it as meta name which Twitter recommends.

Full documentation of the meta tag markup can be found on Twitter.

Testing Your Meta Tags

Once you've got your meta tags setup, you can use Twitter's Card Preview utility to get an idea of how your content will look when you Tweet it.

Twitter Card - Summary Preview

If you're happy with how it looks then you're good for the next step. You can use the meta tags to set individual content for every unique article or media content that you'd like to share.

Applying for Twitter Card Approval

Twitter requires that anyone who wants to use Twitter Cards has to have their domain approved (you're given the option through the preview utility, so head there to be approved). It is a straight forward process and you're required to provide details on your domain including the associated username (be sure that the account has verified the website), summary of your website, categorising it, etc.

Twitter outlines that being approved can taken from five to ten days, but ALJT Media was approved within minutes of sending the application across to us receiving a confirmation email.  Once your site is approved, any links you Tweet will now show the Twitter Card (that you can see using the preview tool).

Twitter Card - Large Summary Image

It is important to stress that it may take an hour or so for Twitter to propogate the cache across therefore if you don't see the Twitter Cards on URL's you're Tweeting but can in the preview utility, and your domain is verified - just be patient. We experienced that our domain had a wildcard approval but only posts from a certain subdomain were showing but it resolved in about an hour, so just hang in there!

Was this article helpful to you? Are you using Twitter Cards for your content? You can get in touch with us by mentioning #ALJTMedia on Twitter, leaving a comment on our FacebookGoogle+ or LinkedIn page, or writing a comment below.

0
Ignite your brand, utilise user-generated content no matter where you or your audience are ›