lightbox title

I’m pretty excited about Twitter’s new feature: Twitter Card. For those who haven’t heard of it yet, it is pretty similar to what Facebook offers with Open Graph in which it takes user defined metadata in your site and creates a card for the page when you tweet it. I am simply in love with this as it give me a little more control in how I want my content to be displayed when it is tweeted. The Twitter Card API is pretty simple to get setup, and Twitter offers a fairly straight forward description of acceptable uses of this new service.

Twitter Card Meta Tags

Twitter offers three types of cards that you can use with this new service; summary, photo, and video. The summary card is the most popular, and also the easiest to get approved upon proper implementation in your site. Here is a list of available properties that can be set in your meta tags.

  • twitter:card – The card type, which will be one of “summary”, “photo”, or “player”.
  • twitter:url – Canonical URL of the card content.
  • twitter:title – The title of your content as it should appear in the card.
  • twitter:description – A description of the content in a maximum of 200 characters.
  • twitter:image – A URL to the image representing the content.

Each of these meta tags must be utilized regardless of which type of twitter card you decide to integrate in to your site. Remember, if any of these tags are missing then your card will not display properly which will dictate whether or not Twitter will approve your card or not.

How to Implement

For this scenario, I will go through how I setup my twitter card that I use with my site. First off, you will need to login to your Twitter Developer Account and review their documentation. If you don’t have a developer account yet it only takes a couple of seconds to register and get started with it. Once you have reviewed their documentation (or just used my examples here in this post) and decided which type of card you want to create, go ahead and add your meta tags to your site.

Twitter offers a nifty tool to check whether or not you have applied your tags properly and provides a preview of what your card will look like. After everything checks out and you are satisfied you can submit your request to Twitter for them to approve or deny your card.

Below is an example of the tags I used on this page.

As a final note, Twitter states that you should expect a few weeks turn around for approval of your twitter card. I’ve seen where it has taken that long, but then I’ve also seen where it only takes a day. My personal experience is that I received my approval in 2 days. Regardless of how long it takes, just know that you don’t have to wait until you are approved to add the meta tags to your site. In fact, it’s a good idea to implement the solution to your site so when Twitter approves your request you are already setup.