I was mindlessly scrolling through my twitter feed yesterday evening, when I saw a tweet with the words “View Summary” below it – it looked a little something like this:
So I did what I always do when I see something techy – I googled it. Turns out my search term “Twitter View Summary” is a nifty little thing known as: Twitter Cards.
From the Twitter Developers website:
Twitter cards make it possible for you to attach media experiences to Tweets that link to your content. Simply add a few lines of HTML to your webpages, and users who Tweet links to your content will have a “card” added to the Tweet that’s visible to all of their followers.
When users Tweet links to your content a Ã…”card Ã‚Â is added to the Tweet that’s visible to all of their followers. When you click on the “view summary” link, the tweet is expanded to look like this:
EDIT: Here’s what it looks like when it’s viewed on a mobile device and someone else has tweeted your link:
- Product cards: Can be used to represent a retail item on Twitter. The data about a product, including a photo, price, colors, availability and sizes as well as a short description can all be displayed on the twitter card.
- Photo cards: Are useful for photographers and graphic designers as they put images front and center in a tweet.
- App Install cards: Allow users to download your app (if the user doesn’t already have it installed), or deep-link into your own app (if the app is already installed on the user’s mobile device). The ability to enable app installs and deep-linking is globally available across all Twitter Card types – you’ll just need to add a new set of markup tags.And finally…
- Summary cards: These are the most common cards seen on Twitter. They include a summary of the post and grab the first image on the page or an image you show in the meta tags. The tags are very simple, Title, description, summary and the name of the Titter account associated with the card.
Summary cards are what I set up my blog to produce, and it was very very easy!
How to Set Up Twitter Cards on WordPress
If you use WordPress for your blog or website then you’re in luck because there are a few plugins to do the work for you on your posts and pages. If you aren’t using WordPress then you will need to follow the twitter tutorials or I can help you migrate to WordPress).
- Install and configure a Twitter Card WordPress plugin.
To set up my blog to produce the meta tags needed for twitter cards, I used the WordPress SEO plugin by Yoast – it’s a fantastic plugin that does SEO very well and does other things like produce XML sitemaps and Google Authorship. There are other twitter card WordPress plugins that you can use like: Twitter Cards, JM Twitter Cards, and Twitter Cards Meta. My personal preference is WordPress SEO simply because of all the other things it does in one neat little plugin. To configure WordPress SEO simply click the “Social Tab”, then Twitter, then check off the box for: “Add Twitter card meta data” and enter your twitter username.
- Validate your website’s Twitter Cards using official Twitter Cards Validator.
Visit the official Twitter Card Validator, sign in with your twitter account, then choose the type of twitter card you would like to produce. I selected “Summary Card“. After you select your card type, choose “Validate & Apply” – copy and paste a link to one of your blog posts. After you validate that the twitter card is working, click on apply.
- Wait until Twitter approves you.
Yes – I’m not very patient either, but you will have to wait until twitter approves your request. Fortunately the process for me was very quick. I followed all the steps above, applied to participate, and within 10 minutes I received an email telling me I was approved.
And that’s it!
Are you using Twitter Cards on your site?
Please note: Some themes and plugins edit the header meta tags in WordPress and there may be a conflict to work out. Be sure to back up your WordPress install before you start messing around in there.