What’s a Twitter Card? I’m glad you asked! Twitter recently introduced a way for us to get a richer media experience on Twitter’s website and mobile devices. All you need to do to make it work is to add some meta data to the page on your site. When users Tweet links to your content a “card” is added to the Tweet that’s visible to all of their followers.
Before we get into the nuts and bolts of making it work in WordPress, let’s look at what Twitter cards are available.
Product cards allow you to add data about a product, including a photo, price, colors, availability and sizes as well as a short description. Images should be square and optimally 160X160. Larger images will be cropped to fit.
Note: You’re going to want to have one product per page so your meta tags stay focused on that product.
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 indicate in the meta tags. The tags are very simple, Title, description, summary and the name of the Titter account associated with the card.
Photographers and graphic designers can have a lot of fun with Twitter Image cards. Twitter will resize images, maintaining your original aspect ratio to fit the following sizes:
- Web: maximum height of 375px, maximum width of 435px
- Mobile (non-retina displays): maximum height of 375px, maximum width of 280px
- Mobile (retina displays): maximum height of 750px, maximum width of 560px
The image must beat least 280px wide by 150px tall. Images will not be cropped unless they have an exceptional aspect ratio. Furthermore, images must not be greater than 1mb in size. All images will be fetched and proxied by Twitter to ensure a high quality of service and SSL security for users.
App Install Cards
Add a few meta tags to the footer of your page and you’ll be able to specify downloads for users who’ve not yet installed your app on their device. This will work across iPhone, iPad, and Android (Google Play).
You can also do deep links into your app so when a user already has the app installed and clicks on the “Open in app” tap target, Twitter will send that user out into your application.
Lead Generation Cards
Lead gen cards are a great way to add a call to action. Want people to sign up for your newsletter? Sign a petition? Fill out a form? You can used Lead Gen Cards to make it happen. When someone expands your Tweet, they see a description of the offer and a call to action. Their name, @username, and email address are already pre-filled within the Card. The user simply clicks a button to send this information directly (and securely) to you. Currently these are available ONLY to Twitter managed accounts. Hopefully the rest of us will get access soon.
Cool! How do we make this work??
Finally to the nuts and bolts. If you have a static website, click on the titles of each description above to learn how to use the meta tags on your pages. If you have WordPress though, you’re in luck because there are plugins to do the work for you on your pages.
On this blog we are using a plugin called WP Twitter Cards to add the meta data we need to each post.It allows us to add the creator’s Twitter handle, a title, description and choose which type of card to create. If that particular plugin isn’t going to work for you, here are a few more to consider. Go ahead, Tweet this post and give it a try. Then visit Twitter to see how your post displays!
Installed a Twitter card plugin? Check to see if it works with the Twitter card validator.
Please note: Many themes and plugins edit the head tags in WordPress. If you are already editing those tags there may be a conflict to work out. Be sure to back up your WordPress install before you start messing around in there.
Are you using Twitter cards on your site? How is it working for you?