≡ Menu

Improving Your Blog Social Media Engagement With Twitter Cards

In the past we’ve talked about using microdata and schema.org on your site to let Google know what the things you talk about represent in the real world. One of the advantages of this is that it allows Google to create enhanced search engine listings for your site, called rich snippets.

Twitter Cards are Twitter’s version of rich snippets. Instead of being limited to 144 characters, Twitter Cards enable you to tell Twitter how it should display media and other information in your Tweets. These aren’t the same as the embedded tweets that can appear on your site’s pages; it’s the opposite process — getting your content onto Twitter rather than Twitter’s content onto your site.

Twitter Cards have had some exposure recently because of the ongoing spat between Twitter and Instagram. You’ve probably seen Instagram’s filtered photos popping up in your Twitter stream now and then. That was accomplished with Twitter Cards and you can achieve something similar for your WordPress site. Unfortunately, Twitter and Instagram are no longer friends, so no more 70s-style photos of your friends’ dinner in your stream.

Like Google rich snippets and Facebook’s Open Graph, Twitter cards require you to add extra markup to your site to let Twitter know what you want to include. In a perfect world, these companies would all agree on a standard method for implementing this sort of semantic markup, but they haven’t managed it so far–each service uses a different set of meta tags.

Setting Up Twitter Cards

You have to opt-in to have Twitter Cards displayed for your domain, and Twitter have to approve the integration. Rather awkwardly, you have to add the correct markup to your site before you apply for approval, so we’ll deal with adding the markup first, and the application process second.

The Markup

If you want to do this by adding the HTML yourself, you need to include a number of meta tags in the <head> section of the relevant pages.

First you should tell Twitter what type of card you want:

<meta name=”twitter:card” content =”summary”>

The “content” attribute can have the following values: “summary”, “photo”, or “video”.

Next, the following meta tags should be added, depending on the type of content you want to include:

The canonical URL of your content.

<meta name=”twitter:url” content =”http://www.example.com”>

The title you want to appear in the card.

<meta name=”twitter:title” content =”My Awesome Photo”>

The description, which can be up to 200 characters.

<meta name=”twitter:description” content=”This is the best video of a cat doing nothing you’ll ever see”>

An image URL.

<meta name=”twitter:image” content =”http:/www.example.com/chairman_miaow.jpg”>

There are a number of other meta tags that deal with attribution: you can see them on the official Twitter Card guide.

Make sure your markup is correct using Twitter’s Preview Tool.

If you don’t want to add the HTML yourself, there is a WordPress Twitter Cards extension that’ll make life a bit easier.

Registering with Twitter

Next, head on over to the opt-in form
and fill out the details. At the moment, the approval process can take a few weeks, after which you’ll get an email to let you know if your site has been approved.

If you are approved, you’ll be able to see enhanced tweets as you and your readers start to share your content.

Author Bio:- About Graeme Caldwell — Graeme works as an inbound marketer for Nexcess, a leading provider of Magento and WordPress hosting. Follow Nexcess on Twitter at @nexcess, Like them on Facebook and check out their tech/hosting blog, http://blog.nexcess.net/.

{ 2 comments… add one }
  • Yash@windows

    January 13, 2013, 5:45 am

    Great one, will try using twitter cards now..!!

    Reply
  • Ravi

    January 14, 2013, 3:07 pm

    Thank You Bilal. But what are the exact advantages of twitter cards? Any tips to use them wisely or precautions?

    Reply

Leave a Comment