Twitter Cards help your pages stand out by adding an image and text blurb to any tweets that link to them. The results are more engaging than a plain text tweet, hopefully inviting more click-throughs. For example, take this picture of happy toast I drew a few years back:
For whatever reason, I’ve decided to set this happy toast as the Twitter Card image for this page. Now if anyone tweets a link to this page, it’ll look like this:
Defining a Twitter Card
Adding a Twitter Card to a page is just a matter of adding a couple meta tags to <head>, like so:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:creator" content="@lonekorean">
<meta name="twitter:site" content="@lonekorean">
<meta name="twitter:title" content="Awesome Title">
<meta name="twitter:description" content="Awesome text blurb...">
<meta name="twitter:image" content="http://codersblock.com/awesome.png">card decides how the Twitter Card is laid out. For most pages, you’ll probably use either summary (shows the image as a thumbnail next to the blurb) or summary_large_image (shows a large image above the blurb). The one I’m using is summary_large_image.
creator is your Twitter handle, displayed in the “by” line. site is the Twitter handle of whatever entity you are writing for, displayed as a tiny icon and name above the image. For example, if you write for a newspaper site, you’d put the newspaper’s Twitter handle there. site is optional, or you can just use your own Twitter handle again.
The rest are pretty self-explanatory, but with a few rules. Only the first 200 characters of description are used. The image must be at least 280px in width and 150px in height, but no more than 1MB in size.
Card Validator
Now’s a good time to check out the Twitter Card Validator, which lets you do 3 things:
- Mock up a Twitter Card to see how it would look.
- Double-check Twitter Card markup already on your pages.
- Apply for approval for Twitter Cards on your domain.
That last one is important! Your Twitter Cards won’t show up on tweets until you get approval. Note that you’ll have to get approval for each card type you want to use (summary, summary_large_image, etc.). Even though Twitter says it takes a few weeks to get approval, I’ve done it twice and was immediately approved both times.
That’s It
That’s really all it takes to get up and running with Twitter Cards. Check out Twitter’s own documentation for more details. Next time I’ll share how to integrate Twitter Cards into WordPress.
Update: As promised, Twitter Cards with WordPress.