How to Create a Twitter Card

Written by David Walsh on December 10, 2012 · 34 Comments
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/demo/openGraphLogo.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!

Comments

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

  2. 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 December 11, 2012

    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. 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. 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 April 22, 2014

    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.

Be Heard

Tip: Wrap your code in <pre> tags or link to a GitHub Gist!

Use Code Editor
Older
Vibration API
Newer
pointer Media Query