How To: Twitter Summary Cards Through Wordpress

In my last post, I briefly touched on the various ways in which Twitter has evolved as a social media platform, with one of the defining changes I mentioned being the introduction of the Twitter summary cards…

So what actually is a Twitter summary card? In short, if you have included a link within your tweet, the summary card is Twitter’s way of pulling metadata from your site to showcase the content in a uniform way. For example, if you have included a link to your blog in a tweet, Twitter will pull the page’s header image (and re-size according to the size of your image) and include a brief summary of the content within the link that’s in your tweet.

The way in which Twitter pulls the information from your site is through a smart bit of code that can be placed within the page / pages you will be linking to, but for those of you like myself who aren’t website developers, the thought of dealing with any kind of code can put you off bothering with the cards altogether. With that in mind, here’s an easy “how to” guide on implementing Twitter cards on Wordpress.

Step 1

First thing’s first, you’ve got to install the Yoast SEO Wordpress plug-in. We would strongly recommend this plug-in for anyone who blogs regularly and wants to simplify the SEO of their site. We use it here at Klood to manage the SEO of our blog posts and it certainly makes life a lot easier when it comes to Twitter summary cards, as you’ll see.

Step 2

Once you’ve installed the plug-in head to the Yoast tab on the main dashboard followed by “Social”, then “Twitter”.

Step 3

From there, add in your Twitter user name and default summary card type

“Summary Large Image” if you have larger images across your site, or “Summary” if not

Step 4

Once you’ve saved your settings, click on the “Twitter card validation” link to validate your Twitter cards. This is basically to show Twitter that you’re not spam or a robot… a spambot if you will.

Step 5

Enter the URL of your Wordpress site and hit “Preview Card”.

This will generate a summary card for you to preview. The “Standard Tag” fields that appear should all be green indicating something’s worked. There will also be an orange "not whitelisted" notification - don't worry, this will happen the first time you set up your Twitter cards, it just means you will need to verify your domain with Twitter... which leads me nicely onto the final step...

Step 6

If your site is not whitelisted, you will see a prompt (as below) for you to request domain approval so that Twitter cards can be displayed from your domain. Simply click on the “Request Approval” button that appears and fill in the information requested by Twitter. Once approved, which may take some time, Twitter will notify you via email of your approval, and through some internet wizardry, your site will be tagged and you posted site link will start to look very snazzy indeed!

So that’s it. There are many other cards Twitter offer such as product, photo and app cards, so once you’ve mastered the summary cards, you can set your sites to the others… but we’ll look at those another day!