Make Your Tweets Interactive with Twitter Cards

Did you know that you can control the way your websites are previewed on Twitter when tweets are linked to them with Twitter Cards? How does that help? Well this practically means that you can share a part of the experience provided by your website onto every tweet that links to your page. This means controlling how your content is displayed, diverting traffic to your website and getting more people to follow your Twitter account. All at once.  Sound good enough?

To start off you need to apply for approval for certain Twitter Cards to twitter to unlock some advanced features. Otherwise you get quite a lot with auto approval.  You need to decide how you want to display your page on twitter.  For that you should first understand the types of Twitter Cards that are available for display:

•  Summary Card: The default card available which includes title, description, thumbnail and twitter account attribution.
•  Photo Card: A tweet featuring an image from the page.
• Gallery Card: A tweet showing an entire collection of photographs.
• App card: Tweet featuring details of applications.
• Player card: Twitter card featuring playback of multimedia content.
• Product Card: Twitter Card showing product details.

Now that you know what kind cards are available you can select one for a page based on the content being displayed on the page. For example summary cards are great for blogs and product cards are great for ecommerce websites and so on.

Once you have decided on card review documentation for the card. Adding the cards to your page is not a problem. It is a simple collection of meta tags that specify the parameters. You can visit the different links above to review the documentation for each card. Below is an example of the meta tags for the summary card that you need to add to the head section of your page

[code language=”html”]
<meta name="twitter:card" content="summary">

<meta name="twitter:site" content="@nytimes">

<meta name="twitter:creator" content="@SarahMaslinNir">

<meta name="twitter:url" content="http://www.nytimes.com/2012/02/19/arts/music/amid-police-presence-fans-congregate-for-whitney-houstons-funeral-in-newark.html">

<meta name="twitter:title" content="Parade of Fans for Houston’s Funeral">

<meta name="twitter:description" content="NEWARK – The guest list and parade of limousines with celebrities emerging from them seemed more suited to a red carpet event in Hollywood or New York than than a gritty stretch of Sussex Avenue near the former site of the James M. Baxter Terrace public housing project here.">

<meta name="twitter:image" content="http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg">

<!– additional footer tags available (See the App Installs and Deep Linking document to learn more) –>
[/code]

Once you have added the code you only need to run the URL of the page through the Twitter Card Validator. Simply follow the link, login with your twitter account and have your links validated. You can fill up your details here and have the meta tags for your card generated for you. The rest is simple copy paste.

Everything else is simple and when it is done people tweeting links will feature the cards in you links.