Get your Twitter Card on With WordPress

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 card requires an image of size 160 x 160 or greater.

Product Twitter Card

Product Cards
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.

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 indicate in the meta tags. The tags are very simple, Title, description, summary and the name of the Titter account associated with the card.

Photo Cards
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.

Product Twitter CardsLead 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?

 

  • AlisaMeredith

    Hi, Fouts. Yes, I’m using Twitter cards, but the description often looks like a bunch of code instead of the description. Wondering if maybe a plugin is interfering.

  • http://friedmansocialmedia.com/ Brad Friedman

    Thanks for the info! I installed the plugin you recommended and it doesn’t work anything like you say. I have no choice for the type of Twitter Card and it puts two @@ symbols before my Twitter username (No, I did not add the @ symbol in the meta box, just my user name). And it doesn’t pull a photo like it says it will. Probably going to uninstall.

  • http://inspiretothrive.com/ Lisa Buben

    I have them with Yoast SEO plugin and mine works well – though sometimes It does not pick my featured images. I have heard of others not working well or not being approved via Twitter. Anyone else getting error messages when they apply for them?

    • http://barry-wells.com/ Barry Wells

      Hi Lisa, I’m still having the same concerns. Been onto Twitter again but still no joy :(

      Tried on 2 accounts now and have the same error on both… Time to move on I think ;)

  • http://barry-wells.com/ Barry Wells

    These Twitter cards have had me going in circles for far to long.

    I have WP SEO by Yoast and have added my details to it for the Twitter cards but every time I try to apply I have trouble.

    I fill in the card details, get a preview which looks ok then I click validate and apply, enter my URL and get an invalid card displayed. Go back and edit the card, over and over, and still get the same invalid card message.

    I’ve been onto Twitter about it but never get a reply from them.

    I’ve tried these cards on 2 different accounts and both get the same error.

    Can you offer any advice?

    Thanks,
    Barry

    • http://janetfouts.com Janet Fouts

      Hi Barry,
      Yoasts’s SEO Plugin support doesn’t seem to be answering here: http://wordpress.org/support/topic/images-in-twitter-cards-not-working-any-more
      either, but I’m pretty sure it is a plugin or theme conflict.

      Check your other plugins and your theme. They may already be changing the head tags and then it will conflict.

      • http://barry-wells.com/ Barry Wells

        Hi Janet, thanks for the follow up.

        I never thought of it being a Yoast issue so that’s interesting. I’ll go and check it out, thanks :)

        I’m not sure it’s the theme as I’m trying from 2 different accounts with different themes being used…. They do both use Yoast though ;)

  • http://janetfouts.com Janet Fouts

    I should have added to the post that not all themes and plugins will work with every plugin. If you’ve already got plugins altering your head and or meta tags then they may conflict. I suggest un-installing and installing one of the other plugins. You may have to experiment to get the right mix.

    Before you start tweaking things BACKUP!

  • Alex

    I’ve found a very good Twitter Card manager for WordPress, which I highly recommend. Its called TCWP and can be found here: http://hbt.io/tcwp