Enhance Your Twitter Posts with Twitter Cards

Promote your content with Twitter Cards
Most people use Twitter, as one part of a social media strategy to drive qualified traffic to their website, but Twitter posts are limited to 140 characters, and sometimes you need more space to get your message across.



A Website Card makes it easy to bring Twitter’s engaged audience to your site. In fact, data shows that using a Website Card drives 43% more engagement (per Twitter internal data, 2014).


You can promote content using specialized meta tags called Twitter Cards, that allow more than the 140 character limit, plus you can attach photos or videos to your Tweets. These tags create summary snippets that prompt Twitter users to click on a link to your content when they’re tweeted out.



Why Use Twitter Cards?

Twitter Cards provide a preview of your content, so viewers know the link won’t take them to a spam website or a link that’s not of any interest to them. Statistics show people are more apt to click links that include a Twitter Card, as opposed to a plain post that doesn’t contain a Twitter Card. Plus, any users who Tweet links to your content will have a “card” added to the tweet that’s visible to all of their followers, which equals great exposure for you and your content.


Choose Which Twitter Card to Use

Summary Card: 
Title, description, thumbnail, and Twitter account attribution.
Use for web content, blog posts, news articles, product pages and business descriptions. Gives people a preview of content before clicking through to featured content on a website.

Title: 70 characters
Description: 200 Characters
Image: At least 120×120 pixels and no more than 1MB

example:





Summary Card with Large Image:
 
Similar to a Summary Card, but with a prominently featured image.
Same as the Summary Card, difference being the size of the image. This card features a larger, full-width image, while the Summary card displays a thumbnail image.

Title: 70 characters
Description: 200 characters
Image: At least 280 x 150 pixels and no more than 1MB

example:
Summary Card with Large Image, Twitter


App Card: 
A Card to detail a mobile app with direct download.
Allows for a name, description and icon and highlights price and rating. This Card has been designed to allow for a name, description and icon as well as to highlight rating and price. App has to be publicly available in an app store, so Twitter can pull its information and image.

Title: Pulled from app ID
Description: 200 characters
Image: App logo pulled from app ID—image should be at least 800 x 320 pixels and can be JPG, JPEG, PNG or GIF format

example:

App Card, Twitter


Player Card:
 
A Card to provide video/audio/media.
Supports streaming media and places a live video or audio player inside your Tweet. If you’re a business that produces video/audio content such as Vines or a podcast, this would be the card you’d want to use.

Player Cards must be first approved by Twitter
read the full card implementation procedure here.
 
    Description: 200 characters
    Image: Displayed in place of the player on platforms that don’t support iframes or inline players. Same dimensions as your player; no more than 1MB
    Video: H.264, baseline profile, level 3.0, up to 640 x 480 pixels at 30fps.
    Audio: AAC, Low Complexity Profile

To learn more about each card, visit Twitter Developers.




How to Get Started

In most cases the process will take 15 minutes or less to set up a Twitter Card.
Here are the 5 main steps:

-    Choose the card type you want use.
-    Add the meta tags to your web page.
-    Run your URL through the validator tool to test. If you’re working with a Player Card, request approval for whitelisting. All other Cards don’t require whitelisting.
-    After testing in the validator or obtaining approval of your Player Card, Tweet the URL and see the Card appear below your tweet in the details view.
-    Use Twitter Card analytics to measure your results.



How to Implement a Twitter Card on a Webpage

Once you’ve decided which Twitter Card to use, and which content you want to promote from your website … make sure you know the URL of the webpage you’re promoting. You’ll need to add the appropriate meta tag code to the html of the webpage you’ll be tweeting about.

Enter the Twitter Card Meta Tag Code between theandin your webpage source code.


Summary Card Meta Code:
Following each = symbol, be sure to enter your specific information.







Summary Card with Large Image Meta Code:

Images should be 280px in width, and at least 150px in height.
Following each = symbol, be sure to enter your specific information.








Code Placement Example:

Twitter Card Meta Code Placement Example

App Card Meta Code:
Following each = symbol, be sure to enter your specific information.








Read additional details specific to iPhone, iPad and Google Play.



Creating Twitter Cards for Individual Pages and Posts in WordPress

You can add Twitter Cards site-wide or on specific pages or posts by using one of these plugins: JM Twitter Cards, Per Page Add to Head, Head & Footer Code, WordPress SEO by Yoast  or Jetpack

FYI:
Tumblr has Twitter Card meta tags enabled by default and “smart suggests” the Card based on your post type.

Blogger platform doesn’t support plugins, so code is manually added to your site template.


To learn more on how to integrate onto your website platform read the Twitter Card CMS Integration.



Validate Your Twitter Card

You need to run each URL you’ve placed Twitter Card meta tags on through the Twitter Card Validator first, before your Tweet appears in your timeline. If there’s an issue with your code, it will show up here – you can fix any errors, and then run again.

Twitter Card Validator

When your URL is accepted and validated, the screen will show the results and say you’ve been whitelisted:

Example of when your URL is accepted and validated, Twitter Cards

Beneath the “Card Preview” you’ll also see green text stating “Page fetched successfully”:

Page Fetched Successfully, after validation

 

 

Here’s a full screen view, displaying a successful validation:

Successful Validation, Twitter card submission


Tweet Your Twitter Card

Do your Twitter post using the same URL you set your Twitter Card up with. Here’s an example of a tweet using a Twitter card. Note the “View summary”.

You want to make your preview text interesting to encourage people to click on the “View summary” which will expand and display your Twitter Card.

Example Tweet using a Twitter card


Here is the same Tweet expanded, after the “View summary” was clicked:

Tweet Expanded after the View Summary clicked




Twitter Card Analytics

If you want to see how your Twitter Cards are doing – statistically – the analytics will give you relevant insight into how your media-rich tweets are being shared on Twitter with metrics such as Retweets, URL Clicks, and App install attempts, stats will reveal top performing cards, click-through rates, and more.


If you’d like assistance with Twitter Card implementation and management on your website, send an email to Support.


 


 

 



   Return to Marketing Tutorials