Complete Guide to Twitter Cards

Twitter Cards provide an effective, efficient way to create optimised multimedia tweets. In this guide, we explain what Twitter Cards are and how marketers can use them. We’ll also cover the different types of Twitter Cards, and tell you a little about how Cards can be used in Twitter ads.

What are Twitter Cards?

Twitter Cards is a feature that lets Twitter users optimise how content is presented in tweets. The user adds some special code to their content outside of Twitter (e.g. a page on the user’s website), and that content will then display in an optimised format when shared on Twitter.

You can also create Twitter Cards within the Twitter interface and save them to make use of in Tweets. To do this go to your Ads Interface.

Simply select Create card and you can create any one of four different card types to use in your Tweets. Creating and editing your cards within Twitter is really easy. You just upload the visual asset you want to use and give it a title and a URl to link the card to. Remember to add the appropriate analytics UTM tracking codes if you are pointing the card to one of your own web pages. In the example below we did just that and then shortened the tracking using a Bit.ly link.

 

Editing Twitter Cards

Top Tip: The card name isn’t pubic facing. It’s just something you see in your Accounts Card interface. Choose a name that will help you to identify what the visual asset inside the card is. This is particularly important if you are creating multiple variations of video assets, for testing out, as they can often look similar when thumbnailed.

At present, Twitter Cards has presentation options for video, audio, apps and links to webpages with a thumbnail or large image. If you create cards directly within Twitter then the choices are a bit more streamlined. You can choose from Image / Video website cards or Image / Video and App cards.

A key reason to use Twitter Cards is to drive engagement with your tweets. According to Twitter Business, promoted tweets with cards have 43% higher engagement rates than regular tweets with links. The Cards are also a good way to communicate a relatively large amount of information within a tweet, via a combination of rich media and copy. This was an especially important benefit when Twitter Cards launched, as tweets were limited to 140 characters at that time.

Twitter for Business users get a different experience of Twitter Cards. We’ll briefly introduce this Cards variant in the section of this guide titled ‘Using Twitter Cards in adverts’.

What are the different types of Twitter Cards?

There are four types of Twitter Cards, each offering a different composition of content:

• Summary Card: title, description, thumbnail.
• Summary Card with Large Image: as above, but with a featured image instead of a thumbnail.
• App Card: direct download link to a mobile app.
• Player Card: displays rich media formats including video and audio
  
  

All the Card types are suitable for delivery to users on mobile, desktop and any device type in-between.

The range of Twitter Cards has changed from time-to-time. For example, there was once a Lead Generation Card option. We advise occasionally checking developer.twitter.com/en to find out about new options as they become available.

Let’s look at each Card type in detail:

Summary Card

Key specs:

• Title: up to two lines in app view; up to one line in web view
• Description: up to three lines (not displayed in app view)
• Image: from 144 x 144px to 4096 x 4096px; aspect ratio 1:1; file size up to 5MB; file type JPG, PNG or GIF

This is the perfect Card to use if you want to attract click-throughs using copy as the main hook.

Summary Cards contain just a title, a description and a thumbnail image. The image is automatically cropped square and rendered relatively small, acting as more of an accompaniment to the copy than a click-driver in its own right. Summary Cards are often used to promote blog articles, ebooks and product pages.

Speaking from our personal experience only, this Card seems to have fallen out of favour lately. Most users seem to prefer the more visually engaging Summary Card with Large Image, which we’ll talk about next.

Technical detail from Twitter

Summary Card with Large Image

Key specs:

• Title: up to two lines in app view; up to one line in web view
• Description: up to three lines (not displayed in app view)
• Image: 300 x 157 px to 4096 x 4096 px; aspect ratio 2:1; file size up to 5MB; file type JPG, PNG or WEBP

Summary Cards with Large Image attract click-throughs with an attractive, image-led format that also incorporates plenty of space for a title and description. The large, landscape images used with these Cards can often be the same as the featured image of the linked article or web page, so there’s not much added effort required from the marketer’s perspective.

Here’s how a Summary Card with Large Image looks on Twitter:

 

Smartphones do the jobs of a LOT of different devices--calculators, cameras, etc. But this hasn't led to environmental gains https://t.co/26Ksf110Ve

— Angela Lashbrook (@lemonsand) July 15, 2020

 

To get the most out of this Summary Cards with Large Images, you’ll need to ensure your images are as sharp as possible while obeying the 5MB file size limit. We recommend using the free browser-based image compressor Squoosh. This will help you reduce the file size of your images without excessively lowering their quality.

As well as having high technical quality, the images used with this type of Card should appeal to the brand’s target audience. Marketers should use their understanding of their brand’s audience to pick the sorts of images that attract click-throughs from their target customers.

Technical detail from Twitter

App Card

Key specs:

• Title: pulled in from app ID
• Description: up to 200 characters
• Image: app logo pulled in from app ID. At least 800 x 320 px, in JPG, JPEG, PNG or GIF format

This specialised Twitter Cards type could come in very handy for brands with an app to promote. It’s totally useless to anyone else, since the only purpose of the Card is facilitating app downloads. Here’s an example on an App Card tweet:

 

 

The content for an App Card is pulled in from the Apple iTunes and Google Play app stores, so you’ll need to ensure the image, title and description are correctly listed in those places before you add the code to create a Card.

Technical detail from Twitter

Player Card

Key specs:

• Title
• Description: up to 200 characters
• Video: H.264, Baseline Profile (BP), level 3.0, video dimensions up to 640 x 480 pixels at 30 frames per second (fps)
• Audio: AAC, Low Complexity profile
• Image: this is used as a fallback in case the user’s platform does not support iFrames or inline players. The image should be in the same dimensions as the player, with at least 68,600 pixels; file size up to 5MB; file type JPG, PNG or WEBP

The Video Card type is trickier to use than the other Twitter Cards, but it can be highly rewarding for brands with high quality audio or video assets. It can be used to post a variety of media directly into Twitter users’ feeds, including podcast snippets, musical recordings, vlogs and video ads.

Here’s an example of a tweet in a Player Card format:

 

 

The steps to create a video Card vary depending on the format of content featured. You’ll need to read Twitter’s technical information before you attempt to use this relatively advanced Card type.

How to use Twitter Cards

To a large extent, Twitter Cards are not implemented within the Twitter user interface. Instead, users have to create them by adding code to the content they want to include in a card.

First, the user adds some Twitter Cards code to the metadata of a web page they want to link to. Once this is done, Twitter will recognise the Twitter Cards code whenever the web page is loaded into a tweet. All the user needs to do is add the link to a tweet as usual, and the tweet should be published in the relevant Twitter Cards format.

Adding Twitter Cards via a CMS plugin

If your website is built around a popular content management system (CMS) such as WordPress or Joomla, you should be able to create Twitter Cards by installing a plugin that can add the required code to an article or page with just a few clicks. Using a CMS plugin takes the need for hand-coding out of the process of implementing Cards, which will surely come as a relief to some.

Twitter Cards plugins for popular CMS include:

• JM Twitter Cards (WordPress)
• Twitter Cards Meta (WordPress)
• Tweet Cards (Joomla)

If your website uses a bespoke CMS and you plan on using Twitter Cards heavily, you might consider asking your developers about the feasibility of developing a plugin-like functionality to add to your CMS. With all that said, some users may prefer manually adding Twitter Cards code into the metadata of their content

However you choose to implement Twitter Cards, you should always run the URL of each page you optimise with Cards code through Twitter’s Card validator. This will show you a preview of the Card, which makes it easy to spot any errors which may have occurred.

Using Twitter Cards in adverts

When Twitter Cards are used in promoted tweets, the whole process of using the Cards works differently.

Within the Twitter for Business interface, users will find options to create, view and edit cards under Creatives > Cards from the top-down menu.

 

 

In this variant of Twitter Cards, the Cards act as a permanent media asset, with each Card saved on the Twitter for Business platform and available for repeat use. Although these Cards are created and stored in Twitter’s platform for advertisers, the cards can be used in both promoted and organic tweets. If you would like more detail on Twitter Cards for advertisers visit Twitter for Business.

At Target Internet we have had great fun creating variations of the same Tweet, mixing up different text copy with different visual assets to find out which message and visual asset performs best. For this you can make good use of twitter cards and compare their results with standard images or uploaded video. You can add different tweets and visual assets to an ad campaign and only run it as a promoted tweet so you can discover which combination of visuals and messaging gets the highest engagement.

Doing this we have been able to identify creative combinations which drive up to ten times as much engagement as out original message. Make sure each variation your create gets around 1000+ impressions before you decide on the winning combination. Once you find the winning message combination you can share this organically with your main Twitter follower audience.

 

Twitter Cards strategy and tips

As you experiment with the different types of Twitter Cards, you’ll likely find that certain cards are particularly well-suited to targeting a certain marketing conversion.

Both types of Summary Cards are ideal for attracting click-throughs to content; Play Cards are well-suited to boosting Twitter-native engagement with multimedia content; and as you’d expect, App Cards are great for driving app downloads.

You can keep track of how your Cards are performing using Twitter’s native analytics. This will help you see whether Cards are achieving better conversion rates than regular tweets, and which Card types are getting the best results.

Twitter Cards are a great tool to experiment with. However, there are a few ‘don’ts’ to bear in mind when using cards. First, use hashtags and tags sparingly in tweets made with Twitter Cards. These components give users another place to click-through from the card, which may reduce the click-through rate to your target destination.

And secondly, you should avoid using GIFs in Twitter Cards. Technically GIFs are an allowed image format in all types of Twitter Cards. However, where animated GIFs are used, only the first frame is shown in the Card.

But above all, enjoy playing around with Twitter Cards. They’re a fun feature with proven power to boost engagement on Twitter. Play your Cards right, and you could significantly increase the value of your Twitter marketing.