How to Create a Twitter Card

On December 8, 2014, in Raj Murthy, by Raj Murthy

TwitterCardIt is surprising to see the number of companies and the Twitterati who for some reason do not always have a Twitter card setup on their blogs. Simply put, a Twitter card is just something that ensures that your tweet expands to a preview of the rich content with a title, summary and if you wish, an image or video. These three reasons alone will considerably increase the engagement that tweet receives whether it be the link being read thus driving traffic to your site, or being retweeted and thus spreading yourself into the social sphere.

If you’ve ever watched a Vine, viewed a YouTube video or clicked on a photo with your Twitter stream, you’ve already come into contact with a Twitter card. Twitter’s card infrastructure is what allows us to have these rich media experiences that go far beyond a 140-character written message right within Twitter.

By adding a few lines of HTML to your webpage that are described here, you can create this experience for your audience, too. Any users who Tweet links to your content will have a “card” added to the tweet that’s visible to all of their followers.

There are three types of Twitter Cards: summary, photo, and video. The summary Twitter card is for articles and text-based content, while photo and video cards are self-explanatory (YouTube uses the video card type, for example). There are a few META tags used for all card types, then a few more that are card-type-specific. All META tag name attributes are prefixed with twitter so you will have to follow them verbatim

Watch out – When you edit the code remember that HTML escape characters such as / ‘ ” < and > could really mess up your formatting and invalidate your card or in some cases really mess up your wordpress or CMS for that particular post. It is best to stay away from these characters unless you know how to make them HTML friendly. The template below is for a Twitter “Summary Card”

A text version of the Twitter Card Template for your own use and customization is also included here for your perusal.

All you need to do is to use the template and update the information to your own accounts, title, link to the story, and select the path to the image you want attached and insert it into the <head> </head> portion of the page.

 

Comments are closed.