Increase Content Visibility with Twitter Cards

Twitter is becoming an increasingly important channel for content marketers. What started out as a popular micro-blogging platform has transformed into a legitimate source of traffic, leads, and sales. Of course, as with any marketing channel, there are tips and techniques we can use to maximize our exposure and results.

You are probably familiar with Twitter Cards whether you realize it or not. You’ve seen Tweets with a short link below them stating “View Summary” or “View Media,” right? These are called Twitter cards.

Twitter Cards - View Summary

When you click on these links, the Tweet will expand and show the user more information about the content being shared. The most common Twitter Card is the Summary Card, which displays useful information about a blog post or webpage.

Twitter Card - Summary

The Summary Card shows the original author of the content, a short summary or description of the post, and a featured image. Here is a live example in action from a tweet I recently sent out.

As you may have noticed, not all URLs shared will have a Twitter Card associated with them. So how do we make sure our URLs utilize this awesome feature from Twitter?

Step 1. Determine Which Twitter Card Is Right For Your Content

The first step to setting up Twitter Cards is to determine which Twitter Card is appropriate for the content you want to share. Twitter offers a variety of Cards.

  • Summary Card: Default card, including a title, description, thumbnail, and Twitter account attribution.
  • Summary Card with Large Image: Similar to a Summary Card, but offers 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.

Step 2. Add The Appropriate Meta Data To Your Page(s)

The second step involves actually writing some HTML. At first, it might seem daunting, but it’s actually quite simple.

Each Twitter Card requires it’s own set of meta tags. Twitter has a complete list here, and I also wrote a short post about the important meta tags for the Summary, twitter cardsPhoto and Player cards at my blog.

Basically, you need to add the appropriate meta tags and values to the head section of the HTML for every page you want the Twitter Card to be enabled for. Here is an example of the meta tags and values necessary for a Summary Card.

  • twitter:card – Set this to “summary”
  • twitter:site – The Twitter username of the owner of this card’s domain. Not Required
  • twitter:creator – If the content of this card was authored by someone, include their Twitter username here. Not required
  • twitter:url – Canonical URL of the card content. Required
  • twitter:title – The title of your content as it should appear in the card. Required
  • twitter:description – The title of your content as it should appear in the card. Required
  • twitter:image:src – A URL to the image representing the content. Not required

Here is what the meta tags might look like in HTML on your site.

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@bradsknutson">
<meta name="twitter:creator" content="@bradsknutson">
<meta name="twitter:url" content="http://bradsknutson.com">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page Description">
<meta name="twitter:image:src" content="http://bradsknutson.com/path/to/image/">

Each Twitter Card is different, and requires different meta tags. Make sure you have all the required meta tags for the Twitter Card you have chosen.

Twitter meta tags are based on Open Graph meta tags, and will use them as defaults if Twitter meta tags are not available. Below are a list of important Open Graph meta tags.

<meta property="og:url" content="http://bradsknutson.com">
<meta property="og:title" content="Example Title">
<meta property="og:description" content="Example Description">
<meta property="og:image" content="http://bradsknutson.com/path/to/image/">

Step 3. Use The Twitter Card Validator

Once your meta tags are in place, head over to Twitter’s Card Validator, click on the Validate and Apply tab, and enter the URL you set up your meta tags on. The validator will crawl the page’s source code, grab the meta tag values, and produce a preview Twitter card (make sure you use a Webkit browser).

Twitter Card Validator

The validator will tell you if your meta tags are set up properly, or if any corrections or changes need to be made. Once your page has been validated, you can request final approval for your card.

The approval process can take days, weeks, or even months. In my experience, you can expect to wait a few weeks, but I’ve also seen a turnaround time of just a day or two. The key is to be patient, Twitter won’t respond to any inquiries requesting updates on the approval process.

A Note to WordPress Sites

Myself and Wade found out that there is another trick you’ll need to get Twitter Cards set up properly on WordPress sites.

Twitter Cards sound all well and good, but who wants to add meta tags to each individual page manually? That could be a lot of work! Say hello to the time-saving genius that is the WordPress SEO by Yoast plugin.

To set up Twitter Cards site-wide, install the plugin, go to the SEO plugin settings page and click on the Social tab. Click on the Twitter tab.

WordPress SEO by Yoast - Twitter Cards

Click the checkbox next to “Add Twitter card meta data” and you’re all set! The plugin takes care of adding the meta tags to each page automatically so you don’t have to! The Yoast plugin will add the Summary card, so it’s great for blogs!

Bonus Tip: If you have a cache plugin installed, make sure you clear your cache in order for the meta tags to show up!

What About Twitter’s Lead Generation Card?

Twitter announced a few weeks ago a brand new Twitter Card, one that didn’t require on page meta tags. This genius marketing addition by Twitter is the Lead Generation Card.

Twitter Lead Generation Card

Twitter Cards allow you to run campaigns and contests while gathering useful user data from those that take you up on your offer. Here is a link to a live example so you can see for yourself! I’m not in anyway affiliated with the company that is running this campaign, so don’t sign up unless you want to.

Twitter has pretty good documentation on setting up Lead Generation Cards but the process is fairly straight forward.

  1. Log into the Twitter Analytics page.
  2. Click on the Cards tab.
  3. Click the Create new card button
  4. Enter the required information
    • Card image – At least 600×150 with a 4:1 aspect ratio
    • Short description – 50 characters or less
    • Call to action – 20 characters or less
    • Privacy policy URL
    • Card Details (Fallback) URL

Name the card, and save it. You now have a Lead Generation Card set up and ready for use! You can run paid campaigns to send a tweet with this card out and start generating leads immediately!

To prove it works, Twitter gives us this quote:

By utilizing Lead Generation Cards, @RockCreek generated over 1,700 new email contacts in less than one week.

Impressive to say the least!

So there you have it, the (mostly) complete rundown on Twitter Cards and how they can work for you. If you’re not opposed to adding a few lines of meta tags to your site, you can have all the benefits and increased visibility that come along with Twitter Cards!

Brad is a Web Developer and Inbound Marketer from St. Paul, MN. He’s a lover of WordPress, SEO, Social Media, and craft beers.

Facebook Twitter LinkedIn Google+ 

Twitter marketing

Comments

  1. Great and useful tips, i never had of Twitter Cards before and from what you said about the twitter card i will say it what trying Thanks

  2. Really solid explanation of Twitter Cards Brad. I had heard the term before, but I never really realized how they really worked.

    That said, do those View Summary links only appear on the official Twitter client? I use Tweetbot and I don’t see anything like that. And how many people actually view these Twitter cards? That would be useful to know.

    • Brad Knutson says:

      Hey Josh,

      I can honestly say that I’m not sure if Twitter Cards work in Tweetbot or any other third-party app. Generally speaking, Twitter doesn’t let third-party apps have full functionality.

      I just checked the official mobile app, and while the “View Summary” link doesn’t appear (probably for viewport real estate purposes), when you click on the Tweet to expand it, you do see the full Twitter Card.

      As far as some stats on Twitter Cards, here is some cool data on the number of sites that are using Twitter Cards: http://trends.builtwith.com/docinfo/Twitter-Cards. As far as improving CTRs, I don’t have any solid data on that, but I can tell you that since I’ve enabled Twitter Cards on my site I’ve seen more referral traffic from Twitter. It could be partly explained by more followers, but I think that both are contributing factors.

      The way I see it is that there really is no downside to Twitter Cards. They aren’t spammy, and give your followers a chance to preview your link to see if it’s something they actually want to read. I can’t tell you how many times I’ve clicked on a link in a Tweet and been taken to some spammy site that I didn’t intend on reading – sites with Twitter Cards let me preview the content so I know I’m getting what I want.

      Hope that helps!

  3. Hi Brad,

    That’s a great write up on Twitter cards but unfortunately they have me going in never ending circles trying to get them activated.

    I’ve tried setting them up numerous times and every time I hit the same problem: Invalid Card Type being displayed after entering my URL in the validate and apply field.

    I’m using WP SEO by Yoast and have entered my details, as shown in the post, for Twitter ID and checked the box to add card meta data. I also use WP Super Cache, but also tried with W3 Total Cache, and have cleared the cache but still have the same issue.

    I even tried using the WP Twitter cards plugin but still had the same issue: Invalid Card Type.

    Any ideas on what I could try next Brad?

    Barry

    • Brad Knutson says:

      Hey Barry,

      Perhaps the page you are trying to validate is missing the necessary meta tags. I just threw this URL in the validator (http://barry-wells.com/wordfence-real-time-log-attempts) and it looks set up properly – the domain is just not approved yet.

      Go to the validator, and enter that URL in the Validate and Apply tab. When you see the orange message “barry-wells.com not approved” then click on the Request Approval button.

      Hope that helps! Let me know if you’re still having trouble!
      Brad

      • Hi Brad,

        That’s really strange, because I’ve got it activated in WP SEO for the home page, so would have thought that if a post can be validated the home page would be able to be as well….

        Any how, thanks for the tip Brad, it worked a treat and I have at last made my application :)

        You’ve no idea how long I’ve been trying to achieve this or how many times I’ve tried different things to help, all without success….. Obviously :)

        Thanks Brad, you’re a star :)
        Barry

      • I just popped back to say that Twitter have approved me for summary cards already Brad :)

        Thanks for the extra help :)
        Barry

  4. This is the way from where you can achieve those all things which all you want in online marketing.

  5. Hey! Great write up. I wrote something like this too recently.

    Anyway, did you noticed any issue with Twitter Cards recently? I am multiple issues like sharing link A but link B is the one showing up on the image and description.

    Very weird and I have no idea what to do!

    • Brad Knutson says:

      Hey Reginald,

      I would double check your meta tags. It is possible to enter a different URL for either the og:url or twitter:url meta tags, and that would show up on the Summary Card as the linked URL. Same goes for the description and featured images.

      Hope this helps!
      Brad

  6. There are no words to say it is a great post for new bloggers also.thank you for this post. Twitter is one of the best and effective to promote business.The suggestion provided by you will be very helpful.I would like to thank you for sharing this post.

Trackbacks

  1. Blog Commenting and A Blogging Superstar says:

    […] headed over to read Increase Content Visibility with Twitter Cards, which is a guest post from Brad Knutson on Wade Harman’s blog, and again I followed the post […]

Speak Your Mind

*

CommentLuv badge

This blog uses premium CommentLuv which allows you to put your keywords with your name if you have had 3 approved comments. Use your real name and then @ your keywords (maximum of 3)