We’ve implemented Twitter cards for Add3 and a couple of clients and wanted to share some results and give you a full tutorial on how to implement Twitter cards for your own site. They’re pretty cool and it’s really easy to do!
What Are Twitter Cards?
Twitter cards are a way to attach more rich media to Tweets that link to your content. In other words – you can add pictures or other functionality to Tweets that link to your content.
For example – this is the standard way that Tweets look when they link to content.
But by taking a few simple steps and adding some code to your pages, Tweets to your content can look like this Summary Card
Pretty sick, right?
Or check out the even more sicker “Summary Card with Large Image”
Examples of Twitter card types
Below are a couple examples of the more interesting Twitter card types. There are actually several types of Twitter Cards you can implement, based on the type of content your site has. These are all screen shots from desktop, but these cards all work on mobile as well. For a full breakdown of card types – see the Twitter dev site: https://dev.twitter.com/docs/cards
For video/audio media
Social integration FTW!
The reason I’m blogging about Twitter cards today is because as SEO’s, I feel like we get all crazy about content strategy and on-site optimization and how to get links that we miss the obvious and easy “common sense” stuff. The – “hey, let’s make the most out of the work we’re already doing” stuff.
I can’t tell you how many sites that I’ve worked on that will add social sharing buttons to their content or blog, and don’t ever actually look at what happens when the share button gets clicked. I’m not going to out anyone here – but go ahead & go to one of your own blog posts and click on a “share this post” link… does it actually make sense?
If you are so lucky as to get someone to actually click on the “Tweet” or “Share” buttons on your page because they like your content, you should make sure that you’re using the opportunity to your full advantage. Otherwise – your opportunity could be squandered because your content looks like hell when it gets shared on Twitter, Facebook, LinkedIn, Google+, etc.
Twitter Cards FTW!
Benefits of Twitter Cards
We implemented Twitter Cards for Add3.com a little less than a month ago. The results have been fairly encouraging so far. I’ve also implemented Twitter cards for a few client sites recently and we’re seeing a lot of the same thing.
Figure 1: We’ve been getting more visits to our site from Twitter since implementing Twitter cards… so far.
Figure 2: Interactions with our Twitter account have increased since implementing Twitter cards as well.
Figure 3: We’ve tested the regular “Summary Card” vs. a “Summary Card with Large Image”. The large images get more RT’s.
How to implement twitter cards
The process for implementing Twitter cards is actually quite easy.
- You have to pick a card type
- Then add some code to your site
- Then you have to validate your code
- Then you have to request approval of your cards with Twitter
Twitter spells it all out here: https://dev.twitter.com/cards
The difficulty really only lies in whether it’s easy for you to add code to your site.
In our case – Add3.com is built on WordPress, and the Yoast SEO plugin has Twitter card functionality built right into it. All I had to do was check a box in Yoast and then validate the code with Twitter.
The Yoast SEO plugin only supports “Summary Cards” and “Summary Cards with Large Images”. Luckily for us – these are the only cards that make sense for our site so I’ve implemented both. There are several plugins for implementing different types of Twitter cards for your WordPress site if the summary cards don’t make the most sense for you.
One of my client sites is built on Magento, and their developer found a plugin that made implementing the product card type really easy as well. In other situations you may have to work with your developer to add the Twitter Card code to your site.