Twitter Cards Create Your Own Rich Media Tweets

Adam Barrell
Adam Barrell Founder, Tweet Perth

Posted on April 4th 2013

Twitter Cards Create Your Own Rich Media Tweets

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.

Adam Barrell

Adam Barrell

Founder, Tweet Perth

Founder of Tweet Perth one of Perth's most influential and trusted Twitter accounts. I am a Twitter enthusiast with an extensive background in Social Media and Marketing. Also a freelance web and graphic designer.

Please view my personal website adambarrell.com

See Full Profile >

Comments

Twitter Cards seem to blur the line between microblogging and blogging, if such a line ever existed.

Thanks for your comment Kerry,

You are right it is pushing that line, but it is no real difference from the way Facebook create link previews. The only difference being is the Twitter I think has done a better job of being able highlighting your content. Also it is worth noting that only the users who go to the effort to create these Twitter cards will be able to use/benefit from them.

 

For WordPress site the most easiest and working option will be "Twitter Cards Meta". So you dont have to hard code it, And this plugin makes it super easy to use various type of Cards. 

I'm wanting to set up my twitter video player card like Vine, NBA and ESPN where it actually shows it's a video in the news feed view without having to click view media. Is that possible or do NBA and ESPN get special treatment because of their relationships with twitter?