How To Set Up Twitter Cards

  • follow us in feedly
Published May 15, 2013 by Brad Knutson
Twitter Cards

Twitter is more than just a social network. It’s a marketing platform, a viral media launching pad, and so much more. Businesses and brands are using Twitter more and more each day. Many companies use Twitter in their technical support department, their customer service department, even sales.

To make sure we are taking full advantage of Twitter it’s important to utilize Twitter Cards.

What are Twitter Cards? I’m sure you’ve seen them while scrolling through your Twitter feed. Every once in a while you’ll see a Tweet that has a small note at the bottom that says “View Summary.”

Twitter Card - View Summary

When you click these, or view the Tweet individual Tweet, you’ll see a summary of the article that is linked in the Tweet.

Twitter Card Example

It’s a great way for Twitter users to preview content before they click through to the article.

So how do we go about implementing a Twitter card?

First, let’s quickly go over the different card options. You can do more than just post a preview of an article – you can also embed images, embed videos, preview a product, even integrate a mobile app. Twitter gives you 6 choices.

Twitter Card Catalog

When you Tweet a link, Twitter scans the page and looks for a set of specific twitter metaSummary 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
<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/">

Photo Card

  • twitter:card – Set this to “photo”
  • 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. Not required
  • twitter:image:width – Define the original width of the image. Twitter may or may not adhere to your setting, but it will affect the aspect ratio of the resized image.
  • twitter:image:height – Define the original height of the image.

Player Card

  • twitter:card – Set this “player”
  • twitter:url – Canonical URL of the card content.
  • 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 that will be the poster image. Not required
  • twitter:player – The URL of the player
  • twitter:player:stream – The URL of the video to stream on the player
  • twitter:player:width – The width of the IFRAME to display the player
  • twitter:player:height – The height of the IFRAME to display the player

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/">

Once you have the proper meta tags set up on your page, head over to Twitter’s card validator and enter your URL. The validator will scan the page source code, pull in the meta tag values, and produce a preview Twitter card (make sure you use a Webkit browser).

Twitter Card Validator

When I enter one of my own URLs, Twitter confirms my meta tags are set up properly.

<meta name="twitter:card" content="summary">
<meta name="twitter:url" content="http://bradsknutson.com/blog/what-will-seo-look-like-in-5-years/">
<meta name="twitter:domain" content="">
<meta name="twitter:site" content="@Bradsknutson">
<meta name="twitter:creator" content="@Bradsknutson">
<meta name="og:title" content="What Will SEO Look Like in 5 Years? - Brad S. Knutson">
<meta name="twitter:description" content="SEO in 5 Years? 5 Experts Weigh In I recently polled a handful of industry experts to find out what they thought SEO would look like in 5 years. What factors will be the most important? What current tactics will be a thing of the past? I asked each contributor to write a short paragraph... Continue Reading →">
<meta name="twitter:image" content="http://bradsknutson.com/wp-content/uploads/2013/05/what-will-seo-look-like-in-5-years-300x168.jpg">
<meta name="twitter:app:id:iphone" content="">
<meta name="twitter:app:id:ipad" content="">
<meta name="twitter:app:id:googleplay" content="">
<meta name="twitter:app:name:iphone" content="">
<meta name="twitter:app:name:ipad" content="">
<meta name="twitter:app:name:googleplay" content="">
<meta name="twitter:app:url:iphone" content="">
<meta name="twitter:app:url:ipad" content="">
<meta name="twitter:app:url:googleplay" content="">

Note: Twitter now requires that each domain be approved by Twitter before Twitter Cards will display properly. This approval process could take several says, weeks, or even months. Be patient. Once you’re approved and have set up your meta tags properly, your Twitter Cards will begin displaying properly.

The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date

Subscribe

Topics

See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

2 thoughts on “How To Set Up Twitter Cards

  1. Wade Harman

    This is the perfect thing to get more results via Twitter. This has been needed for a long time, and Twitter is my biggest traffic driving platform for me. Now, if I could only figure this out! For some reason I’m not getting it at all! You should do a guest post about this on my site too! Thanks for helping me as much as you have, it looks like I’m a little closer to achieving it than I was but I’m still missing something.

    Reply

Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">