Twitter have just announced several new Twitter Card features which in my opinion are quite significant changes giving you the power to create media rich tweets to help promote your own content.

What is a Twitter Card?
Twitter cards make it possible for you to attach media experiences to Tweets that link to your content.

How is this achieved?
By simply adding a few lines of HTML to your webpages, and users who Tweet links to your content will have a "card" added to the Tweet that’s visible to all of their followers.

Types of Twitter Cards?
By default Twitter has already been showcasing some of your tweets with rich media, everytime you take a photos and post it through Twitter that is a Twitter Card, posting a link to a photo on your Flickr account in a tweet also creates a Twitter Card. Posting a Youtube video creates a Twitter Card. So what is so significant then?

Create your own Twitter Cards
Twitter has now given all it's users the power to create media rich tweets containing their own content. This is a massive game changer as now you are able to share your own content in a very attractive display. Users now have the ability to create the following Twitter cards:

  • Summary Card: Default card, including a title, description, thumbnail, and Twitter account attribution.
  • Photo Card: A Tweet sized photo card.
  • Gallery Card: A Tweet card geared toward highlighting a collection of photos.
  • App Card: A Tweet card for providing a profile of an application.
  • Player Card: A Tweet sized video/audio/media player card.
  • Product Card: A Tweet card to better represent product content, showcasing product photo, price and description.

In particular I am going to focus on 2 Twitter Cards to let you see how you can benefit from them.

 

Summary Card Twitter Summary Card

The Summary Twitter Card is going to be the Twitter Card of choice for major news websites and bloggers. As you can see from the sample above the Summary Card allows your tweet to feature the articles title of the page, description (with a 200 character limit) a thumbnail image, authors name/Twitter account and also the link to the actual article.

So now you will have the power to have a tweet with not only 140 character but also a tweet with an image, description and multiple links to your content. So now when your news article or blog post is tweeted by a user who has just visited your website they will also produce the same style tweet because the Twitter Cards are a product of your website. Anyone who shares content from your articles/blogs that have been set up with Twitter Card code will produce these media rich tweets.

 

Gallery Card Screen shot 2013-04-04 at 3.16.36 PM

This one will have photographers excited! Twitter Cards now have the ability to create Twitter Gallery Cards. The sample above shows 4 photos that are within the tweet. What better way to attract interaction than to have multiple photos on the one tweet? With the Twitter Gallery Card you are able to manually select which photos you want to showcase in your Twitter Card. Much like the Twitter Summary Card you are able to showcase a title, description, author details and a link to the article/blog post.

 

The Nuts and Bolts
You are 3 simple steps away from being able to have your website produce media rich tweets.

Step 1
First thing you must do is visit the official Twitter Dev site and review the information on all cards to determine which card would be optimal for your website.
https://dev.twitter.com/cards

Step 2
With a bit of coding add the required meta tags of the Twitter Card to your website or blog. This is done in two parts, first the addition of one line of code to your <header></header> section of your website. Then the required Twitter Card meta tag details into the HTML <body></body> of your article/blog with all the required details filled out. See the following link for the details required for the Summary Card. Once all details have been entered hit update preview and then copy the sample embed code.
https://dev.twitter.com/docs/cards/validation/validator

Step 3
Once you have added the sample embed code to the <body></body> section of the required article/blog, simply publish the article/blog and then copy and paste the websites URL into the Validator URL tab. Twitter will then ask you to verify your website and you will then go on the waiting list to be approved for Twitter Cards. https://dev.twitter.com/docs/cards/validation/validator

Early adoption of Twitter Cards could help your website and Twitter account stand out from the crowd, so please take the time to set up your site and start tweeting media rich tweets.