Many of you may have already heard of Twitter’s new rich media experience called Twitter Cards. They’ve been around for awhile, but most of us have to specifically opt-in. I went ahead and did that, but I guess we’ll see what benefit, if any, it brings.
What are Twitter Cards?
In case you don’t know what this is all about, here’s a brief summary from the Twitter Cards development site:
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.
So essentially, your tweet ends up looking like a Facebook post, along with a little thumbnail. When I found out my Twitter Cards were enabled, I did a quick tweet (via the tweet button from one of my posts) just to see how it looked, and this is what came up (click here if you don’t see the tweet):
Just because –>Giant-Sized Cyborg Zombie Steve Jobs hypertransitory.com/blog/2013/01/2…
— John Garrett (@johngarrettX) May 16, 2013
Pretty snazzy, right? Right??? Ehhhhhhhh.
Trials and tribulations of Twitter Cards
I first read about this in a post from Yoast last year.
He explains that he had added Twitter Card code into his WordPress SEO by Yoast plugin, and you could add the same functionality into your own site by using his plugin.
I was already using it, but it turns out I had a bunch of work ahead of me. My theme is a non-standard theme that I’ve hacked to hell and back, so not all plugins have the necessary hooks to put data where it needs to go.
I had to clear that up, plus remove two(!) Facebook plugins that I was using for “Like” functionality and also for my Fan Page box over on the right. It turns out they were both adding a ton of Open Graph (the data that Facebook and other social sites rely on) info into the theme, much of it duplicated, outdated and some of it grabbing the wrong info for certain pages. Yikes, I should have looked into that a long time ago!
Anyway, to mitigate the Open Graph disaster, I decided to remove the two plugins, and replace them with the official Facebook Plugin. This way, I can be reasonably sure that the code is up to date, plus Yoast explained that his plugin will co-exist with the official FB plugin. Meaning that the Twitter Card functionality will use the FB data if it exists, and won’t duplicate it.
Now, once that was done, it was time to apply for Hypertransitory.com.
Sites like Yoast and other larger media sites were opted in automatically. Twitter was trying to roll this thing out in stages to keep it under control. I saw some folks from around the web remarking that they noticed the Twitter Cards working for them without having to do anything.
I suspect if they had higher traffic and a decent brand (plus your site has the necessary Open Graph info) then Twitter just went ahead and set it up for them. Not so on my site.
When I first started in on this, Twitter had a preview tool (since discontinued) and a Twitter Card Validator. The funny thing is the preview tool worked, but the validator always failed for me. You couldn’t complete your application steps until you passed the validator, so I was forced to dig into my site -this is when I discovered the issues above.
I turned to the Twitter developer site discussion board for help, and found pages and pages of issues -some over 500 posts long, with people who could not get the Cards to work. As you can imagine, help would be slow in coming.
One thing that has plagued Twitter since the beginning is that they’ve had difficulty scaling upward. This time looked to be no exception.
After working out my code issues and finally getting the validator tool to work, I completed the steps -and then I had to settle in to wait for my approval. Many sites I read reported waits from a few days long to a couple of weeks. Well, it took about a month and a half from the time I got accepted (via the validator tool) to the day I got the approval email from Twitter -not counting all the time I spent trying to get it to work.
I actually had forgotten all about it and was pleasantly surprised when the email hit my inbox:
Mo’ Twitter Card action…
If you notice in the email screenshot, it says I can apply for different kinds of Cards, not just the “summary” kind that I initially went for. From the site:
There are 6 card types that can be attached to Tweets, each of which has a beautiful consumption experience built for Twitter’s web and mobile clients:
- Summary Card: Default card, including a title, description, thumbnail, and Twitter account attribution.
- Large Image Summary Card: Similar to a Summary Card, but offeres the ability to prominently feature an image.
- Photo Card: A Tweet sized photo card.
- Gallery Card: A Tweet card geared toward highlighting a collection of photos.
- App Card: A Tweet card for providing a profile of an application.
- Player Card: A Tweet sized video/audio/media player card.
- Product Card: A Tweet card to better represent product content.
The only thing is, even though I should probably apply again for a “Photo” card, I think I’d have to stop and adjust my code a bit in order to get both Summary and Photo working, and I just don’t feel like dealing with it right now.
Another plugin contender to the rescue?
While I was searching around for ways to implement the cards, I came across this plugin, called Twitter Cards Meta.
The Best Way to Add Twitter Cards Metadata in WordPress Site. Enable Summary and Photo Cards Easily, With Control.
So this plugin allows you to set card type on a post by post basis. Now, this could be exactly what the doctor ordered! I haven’t tried it yet, because I’ve struck a decent balance here on this site and I’m not looking to upset the applecart just now. However, if you’re in the market this could be the one to use.
ANOTHER EXCITING EXAMPLE
I found the link to this tweet on Mashable.com (make sure to mouse over the image!):
— Joy Collins (@JoyCollinsMusic) November 6, 2012
So this is a country music star named Joy Collins (click here if you don’t see the tweet). I’m not a fan, but I guarantee you I would play around with this tweet and check out all the interactive stuff going on. Not to mention that I’m obviously posting it here, so it’s definitely doing it’s job of making the tweet more interesting.
Except, this isn’t the kind of card I have. My basic summary card seems kind of boring right now. Aw, shucks.
The Wrap Up
So before I go, I’ll just throw out a few Twitter Card links I came across when I was initially investigating:
And finally, now that I have the summary cards working for this site, I guess I’m not sure if it will result in that much more traffic.
Twitter Cards don’t necessarily work in 3rd party apps, most notably seen when Instagram pulled their support for the feature.
The point is, how many folks are using a “Twitter Card enabled” interface? If you’re not getting a sizeable chunk of traffic from Twitter, and then if that segment is even further broken down into folks who can’t see the Twitter Card anyway, it might not be worth it for you to implement.
But if you’re game, then you should give it a shot, I guess it can’t really hurt to use every advantage you can to make your tweets that much more irresistible.
If you got them working (especially other types than the summary type), or failed to, let me know in the comments, I’d like to hear about your experiences!