How to Create a Twitter Card

By on  
Twitter Card

One of my favorite social APIs was the Open Graph API adopted by Facebook.  Adding just a few META tags to each page allowed links to my article to be styled and presented the way I wanted them to, giving me a bit of control over how my content is presented on Facebook.  Twitter's new Twitter Cards API allows for the same idea:  add META tags to your pages to allow links to your site to be more informational when tweeted.  Implementing Twitter Card META tags on your site takes five minutes, applying for approval from Twitter takes another five minutes, and from that point forward, your content is presented much more professionally.  Let's get started!

Twitter Card META Tags

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:.

Generic META Tags

META tags you would use in all card cases include:

  • twitter:card - The type of card to be created: summary, photo, or video.
  • twitter:url - The URL that should be used for the card.  This will likely be the same URL as the page's canonical link.
  • twitter:title - The title as it should display in the Twitter Card.
  • twitter:description -  A 200 character summary of the content at the given URL.
  • twitter:image - A representative image URL for the content.  In many cases, simply providing your logo's URL will be just fine.

Each of these items get their own META tag, so  the Twitter Card META tags for this page would look like:

<meta name="twitter:card" content="summary">
<meta name="twitter:url" content="http://davidwalsh.name/twitter-cards">
<meta name="twitter:title" content="How to Create a Twitter Card">
<meta name="twitter:description" content="Twitter's new Twitter Cards API allows developers to add META tags to their website, and Twitter will build card content from links to a given site.">
<meta name="twitter:image" content="http://davidwalsh.name/wp-content/themes/punky/images/logo.png">

Twitter also provides attribution META tags for content, providing an opportunity for authors to get credit within the TwitterCard:

  • twitter:site - The Twitter username used by the given site including the '@'
  • twitter:creator - The Twitter username of the individual author of the content

I use the same handle for the site and author, though I could use my @davidwalsh account for the creator if I wanted:

<meta name="twitter:site" content="@davidwalshblog">
<meta name="twitter:creator" content="@davidwalshblog">

These are the basic META tags you'll want to use whenever creating Twitter Cards.  Let's have a look at the tags specific to image and video cards!

Image and Video META Tags

Media-specific cards require a bit more information about the media itself, so for image and video cards, these additional tags are useful:

  • twitter:image:width - The width of the image
  • twitter:image:height - The height of the image
  • twitter:player - URL to the IFRAME'd player, must be HTTPS
  • twitter:player:width - The width of the player IFRAME
  • twitter:player:height - The height of the player IFRAME
  • twitter:player:stream - The URL to stream as video
  • twitter:player:stream:content_type - The content type of the stream

Twitter video cards are much more involved than the other card types, but well worth configuring so that users can watch their videos within their Twitter app.  Sample tags could look like:

<meta name="twitter:image:width" content="600">
<meta name="twitter:image:height" content="600">

<meta name="twitter:player" content="https://davidwalsh.name/video-embed/12345">
<meta name="twitter:player:width" content="435">
<meta name="twitter:player:height" content="251">
<meta name="twitter:player:stream" content="https://davidwalsh.name/raw-stream/12345.mp4">
<meta name="twitter:player:stream:content_type" content="video/mp4; codecs="avc1.42E01E1, mpa.40.2"">

Twitter provides a Card Preview utility so that you can ensure your META tags are used in a valid fashion.  I recommend using this utility for all card types, but especially for video card types, as they require the most information.

Now that the Twitter Card META tags are in place, the next step is applying for approval from Twitter.

Applying for Twitter Card Approval

Twitter requires that your domain be approved before they will allow Twitter Cards for your site;  this is likely to combat abuses like pornography and sites promoting illegal activity.  When you apply for Twitter Card approval, you provide simple information about your site, like the Twitter username associated with the domain, which cards you intend on using, and so on:

Twitter Card Application

Twitter mentions the approval process can tween five and ten days, but my site was approved in two days.  Once your site is approved, links to your site containing the appropriate META tags will provide Twitter clients enough information to build Twitter Cards!

Twitter and Robots.txt

If you're running into issues with your card content not being pull correctly, ensure that your robots.txt file isn't blocking Twitter. Twitter's bot is aptly named Twitterbot so check your robots.txt file for incorrectly Disallow rules!

Sample Twitter Card

The following image shows a Twitter card for this site:

Twitter Card

At first I was upset about Twitter's idea of a Twitter Card because I assumed it would close down the platform, and to this point, no one knows if that will be the case.  What I do know is that implementing Twitter Card META tags is incredibly easy and provides another way for business / site owners to effectively market their site.  Twitter Cards are also nice for the user, allowing them to play videos within their Twitter client, or simply provide a visual associated with a given tweet.

Want to see Twitter Cards in action?  Tweet a link to this or any other post on the site, then click/tap the tweet for the detailed view!

O'Reilly Velocity Conference
Save 20% with discount code AFF20

Recent Features

  • Write Better JavaScript with Promises

    You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...

  • Send Text Messages with PHP

    Kids these days, I tell ya.  All they care about is the technology.  The video games.  The bottled water.  Oh, and the texting, always the texting.  Back in my day, all we had was...OK, I had all of these things too.  But I still don't get...

Incredible Demos

  • Create a Photo Stack Effect with Pure CSS Animations or MooTools

    My favorite technological piece of Google Plus is its image upload and display handling.  You can drag the images from your OS right into a browser's DIV element, the images upload right before your eyes, and the albums page displays a sexy photo deck animation...

  • MooTools dwCheckboxes Plugin

    Update / Fix: The checkboxes will no longer toggle when the "mouseup" event doesn't occur on a checkbox. Every morning I wake up to a bunch of emails in my Gmail inbox that I delete without reading. I end up clicking so many damn checkboxes...


  1. Helen

    What are you talking about? I don’t have any idea what a Twitter card does or should be good for :)

  2. Srebric

    Yeah, I’m in the same boat as Helen. So what exactly is a Twitter card and what is its purpose? ;)

  3. The “Twitter Card” piece is the block under the actual tweet test, as mentioned in the post.

  4. Very interesting! Just migrated my blog’s template to build a card :)

  5. Nice, Walsh! I think I’ll add this before my next post.

  6. Thanks for the detailed article.
    I tried to implement cards on my blog, but failed. Later discovered that Yoast’s SEO plug-in for WordPress has option for it. Yay!!

  7. Aaaaaaarrrggghhhhh!! Why couldn’t they use Open Graph too???

    • I agree. So now I’ll need to duplicate what I’ve already set up for Open Graph into this format. I can hardly wait to add yet more duplication for versions from Google Plus, XBox Live, Myspace (ok, probably not that one), iCloud, and whatever future social network is the flavor of the month. Hey, if Twitter and Facebook have ’em, why can’t they? Plus, the new formats feature a fresh lemony scent, so that’s what makes them special!

  8. John Holt Ripley

    Is there any guidance on preferred image sizes for the twitter:image?

  9. Interesting…Anyone done any testing around detecting the twitter page fetch bot? I’d rather not pollute my header with yet more graph tags, would be good to only load these when required, not for every visitor.

  10. Thanks David, again your post/site is a golden nugget. Will implement this, was holding off because I thought it would be a nightmare do code. Cheers

  11. This is brilliant. I’ve recently started a new blog (reviewing the 500 best films ever, as I watch them) so I’m constantly on the look out for things like this that make it a bit more likely people might click through the links to read my posts. I wasn’t aware of Twitter cards or the Facebook equivalent. Thanks a lot.

  12. Dear David,

    Thanks for the detailed information. I have successfully implemented “Summary Card” for my wordpress blog (single post template). I just wanted to know how will it work for Card Type – Photo/Video in the same single-post tempalate. Do I need to do some custom coding.

    Any help of guidance will be greatly appreciated.

  13. Now that is pretty cool.

  14. Hi there,

    Thanks for this post. Just wanted to say I made a plugin for WordPress blog that can make your day : http://wordpress.org/extend/plugins/jm-twitter-cards/stats/ allows you to implement this great stuff from Twitter.

  15. To apply W3C standards valid syntax to Twitter Cards, change attribute name to property https://plus.google.com/u/0/110977198681221304891/posts/axa3UaVF8x2

  16. Wow, this is really interesting, I need to try this .

  17. Colin

    Of course, it would be helpful if they told you what didn’t work when you went through the approval process – especially when it all seemed to work in testing!

  18. Anyone else have an issue with Twitter not approving their twitter account for the Twitter Card? Just curious. I enabled this through WordPress SEO by YOAST and went into my Twitter account to enable the option and its been pending for a few days.

  19. waaaw it’s realy !! i wil try this
    thank you..

  20. Immediately beneficial useful. I hope this doesn’t lead us to a new age proprietary code rot…

  21. Seems no way to apply for App card for the moment, anybody has any idea?

  22. For those worried about bloating your head with yet more meta data—if you’re already using OpenGraph you can use some of this data as Twitter Card is happy to fall back on a lot of it.

    You can use what OpenGraph data you’re already using and add twitter:card, twitter:site, twitter:creator and twitter:domain and have a functioning Twitter Card summary with 4 extra lines for instance.

  23. I had a good try at getting the new app cards / install links to work this afternoon, but no luck. Anyway, here is my in progress how to for creating an app card from meta tags on your product page http://www.app8ite.com/2013/04/04/twitter-app-installs-links/

  24. getting this error

    Error Encountered
    Something went wrong and your request to be added to the whitelist failed. Please try again.

    Reason: is not a valid screen name

  25. I’m intrigued and also considering what you’re talking about here.

  26. Alex, use their validator tool. After a few tests, it will prompt you to apply for verification and approval for your website/app. I’m patiently waiting for my approval.

  27. David, your article is really really clear for guide me. Thanks advance.

  28. Thanks, David, this took me from first hearing about Twitter Cards to implementation in a few minutes.

  29. Yeah, I’m in the same boat as Helen. So what exactly is a Twitter card and what is its purpose? ;)

  30. Wow! thanks for this nice API

  31. Hey Guys does anyone know where the entry information goes ? it’s not coming into my account or email address linked to my account

  32. Teddy

    Hi David,
    Is it possible to set dynamic values for the title, description and image twitter tags? I want the title, description and image to be different for each page in my site.

  33. Mr Teets

    Twitter is finding a lot of people are leaving because they are hiding far too many tweets and making members agree to far to many terms and conditions and block half the internet when you try to link to a page with some silly message about spam and viruses.

    Tweet more that a few negative about Google and see that all over sudden no one is talking to you.

  34. thanks david . i have been try some plugin , and now will try your plugin for my web :)

  35. This is really useful thank you.

    One thing, we have enabled this using the WordPress Yoast SEO Plug-in and set up a Twitter card manually entering all of the information on the card validator for one blog post.

    This worked, however when I tweet a link to my other blog posts it doesn’t pull through the Twitter card. Do you have to set up the Twitter cards for each blog post or should it do it automatically for each blog post?

  36. Can you add all the Twitter cards meta tags to one’s website?

  37. That was a brilliant idea, I think. It just really works fine on Facebook so I hope it’ll rock on Twitter too :) Thanks for sharing it and explain how it woorks. Maybe a blonde one, like me, will understand it more easily :)

  38. Madhav Navelkar

    Nice post.. My query is, how do I dynamically change the meta tag values for twitter cards.

  39. Hong


    My twitter card keeps defaulting to Julien Maury’s Twitter username – how do I change this in the WP backend?

  40. Simon Arnold

    Seems like the “Card Preview” and the “apply for Twitter Card approval” links are broken.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Open Files from Command Line on OS X

    I'm as much of a fan of application UIs as anyone else but I'm finding myself working more and more from the command line lately.  Much of that is becoming obsessed with media manipulation but I'm forcing myself to use less UIs so that I...

  • Get Stock Quotes From Command Line

    When I conned my way into my first professional programming gig, I didn't really think much about money -- just that I was getting my foot in the door.  But as my career has gone on, I've been more aware of money, investing, and retirement.  I've recently...

  • Geolocation API

    One interesting aspect of web development is geolocation; where is your user viewing your website from? You can base your language locale on that data or show certain products in your store based on the user's location. Let's examine how you can...

  • Create an Image Preview from a Video

    Visuals are everything when it comes to media.  When I'm trying to decide whether to watch a video on Netflix, it would be awesome to see a trailer of some kind, but alas that isn't available.  When I'm looking to download a video on my computer,...

  • New:  Webdesigner News!

    A new and exciting website has recently been launched for web designers and developers. You likely spend hours every morning browsing through hundreds of posts on your RSS feeds, hoping to stumble across relevant stories. Webdesigner News was built to provide web designers and developers with...