How To Set Up Twitter Cards

http://bradsknutson.com/blog/how-to-set-up-twitter-cards/

Published May 15, 2013 by Brad Knutson

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.”

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

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.

When you Tweet a link, Twitter scans the page and looks for a set of specific twitter meta

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

<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).

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.