A complete guide to Twitter Cards

Twitter Cards are a protocol that allow you to attach rich photos, videos and other interactive media to Tweets in order to drive traffic to your website. Twitter provides a large number of different cards. Moreover, Twitter Cards can be integrated with a few lines of HTML to your webpage. Users linking to your content with a Tweet will get a Card added to the Tweet visible to all their followers.

Twitter Cards are a great partner for your SEO strategy as it helps grow engagement, increase click-through rate and conversions. Twitter Cards can thus improve your content outreach on social media and develop your branding and local SEO.

Understanding the different types of Twitter Cards

There are 5 types of Twitter Cards:

Summary Card
Summary Card with large image
Player Card
App Card
Lead Generation Card

Summary Card

The Summary Card can be used for blog posts, news, product pages or any other business news. Those Cards aim to offer a content preview by displaying your title, description and a thumbnail image.
Requirements:

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

To add it to your website, you need to paste this code in your webpage HTML:

Summary Card with large image

These Cards work quite the same as the previous one except the size of the image. It allows to feature a more compelling image in full-width to better attract viewers on your website.
Requirements:

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

Add this HTML code to set up this type of Twitter Cards:

App Card

App Cards can be used to promote mobile apps on Twitter and increase installs. This Card highlights a name, a description, an icon, a rating and a price. Twitter can use your app IDs to pull some of these informations.
Requirements:

Title: sorted from app ID
Description: 200 characters
Image: app logo sorted from app ID—image should be at least 800 x 320 pixels and can be JPG, JPEG, PNG or GIF format. Image under 1MB are preferred

If your app isn’t available in the app store, Twitter won’t be able to take that information. If your app is not located in the US store, indicate in the twitter:app:country meta tag where it comes from. Also, if your link directly points to the App Store or Google Play, Twitter will automatically create an App Card.

Here is the code you should enter:

Player Card

The Player Cards have been created in order to promote streaming media like video or audio player inside your tweet. This is perfect to push Vines or podcast for instance.
Requirements:

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

Lead Generation Card

Lead Generation Cards are great to connect with potential customers. You can thus collect informations about prospects. People can expresses interest about your business without having to fill out a form or leaving their Twitter account. Usually, their name, twitter handle and email address are already entered so that they don’t need to fill them out.
Requirements:

Title: 50 characters
Call to action: 20 characters
Post-submit message (optional): 100 characters
Image: at least 800 x 200 pixels with a 4:1 aspect ratio and no more than 3MB

To nicely set up your Lead Generation Card you need to log in to your Twitter Ads account (even if the Card is free):

Log into Twitter
Click the Setting icon and select Twitter Ads from the drop-down menu
Click the Creatives tab in the top navigation menu, and select Cards
Click Create Your First Lead Generation Cards
Once it’s set up, click the Tweets tab, and then click the blue Compose Tweet button in the top right corner
Compose your Tweet and click Attach a Card to This Tweet when you’re ready
Select the Card you’d like to attach, and then send out your Tweet

[oc-redirect num=1]

How to integrate those Twitter Cards into a CMS?

If your website is working under WordPress, you might want to integrate those Twitter Cards into your system to save time. If we focus on WordPress, there are three plugins you can install:

Twitter offers a nice guide to set up your CMS with Twitter Cards, so you should definitely have a look.

Once this is well set up, you should check if it performs ok on Twitter. Connect to Twitter Card Validator and you will see if everything looks like it should be. We took the example of our last article:

How to check your Twitter Cards performances?

To go further, you might want to have a look at your Twitter Cards behavior. We have recently developed a new feature that allows you to easily check your Twitter Cards (and Open Graphs by the way) performances. You can analyze your Twitter Cards distribution and properties, get insights and access URL details. This is a great partner to your SEO strategy as it improves your social sharing outreach, click-through rate and conversions.