By using Twitter Cards, Tweets linking back to your site no longer contain just text and an optional image or two.

They allow you to create a ‘rich media’ experience for readers. That means additional visual, audio and textual content, with the ability to play video and audio from directly within the timeline.

These enriched Tweets can help them stand out from the pack, build your authority and credibility, and encourage deeper engagement including click-throughs from followers.

In addition, you can use Twitter Cards to capture new leads from directly within the Twitter timeline, and encourage users to visit your website with a special call to action button. Plus, when you choose to promote Tweets that use such cards via Twitter Ads, you can reach whole new audiences.

Presuming you are using a blog to publish the majority of your content and drive the rest of your marketing – as recommended in the “Be Everywhere” Online Marketing Blueprint – implementing Twitter Cards for your business is straightforward and only takes a few minutes. This post shows you how.

Types of Twitter Cards

There are different card types depending on whether you are setting up basic Twitter Cards on an ongoing basis by adding some simple information to your website, or creating more advanced one-off cards through Twitter’s advertising functionality.

In case you’ve heard or read about Twitter Cards elsewhere, note that certain types of card are deprecated as of July 3, 2015:

• Photo Card and Gallery Card – will both default instead to the Summary Card with Large Image
• Product Card – will default to the Summary Card

Basic Twitter Cards

By adding some special information to your website – a once-only job – you can take advantage of certain types of Twitter Card that will be automatically used on an ongoing basis whenever content from your website is shared on Twitter. I’ll show you exactly how to do this below.

For the vast majority of people, the choice of which type of card to use for this is simple. It will be the Summary Card, or the same but with a large image. That’s it.

We’ll touch briefly on a couple of other card options, but they are only relevant if you develop mobile apps or provide a media streaming service. Probably not the majority of people.

Summary Card

Assuming there is a link in your Tweet, the Summary Card provides a preview of content to the reader before they click through. If there’s an image on the page, a thumbnail will be provided.

As you can see, the image used in the preview is small, and you may consider it lacks the punch a larger image could provide. Fortunately, there is an alternative …

Summary Card with Large Image

This is largely the same as the Summary Card above, but of course with a larger image (and, to compensate, less text). Here’s an example:

So, which one to choose, little or large?

There’s no right answer. It’s all about testing different approaches for your own audience.

But, if you’re using a Featured Image with each blog post as recommended in the blueprint, and repeating your headline within that image (see our own Featured Image above), it makes sense to take maximum advantage of that and go with the Large Image card.

App Card

Only relevant if you’re a developer of mobile apps, can help drive installs of the app, providing for name, description, icon and you can also bring in attributes such as rating and pricing information.

Player Card

Allows videos and audio to be used within timeline, only relevant if you’re providing audio and/or video streaming services.

You’ll see these used when linking to say YouTube for video:

YouTube and other video streaming services like Vimeo use Twitter’s Player Cards to enable video content to be displayed and played directly in the timeline

Or, for audio, a service such as SoundCloud:

Audio streaming services like SoundCloud can use Twitter Player Cards to display audio content within Twitter’s timeline

Advanced Card Types

Further card types are available via Twitter’s advertising functionality. These are cards you create directly on Twitter (rather than created for you automatically, as in the Basic Card Types above), and that you can then attach to any Tweet.

And yes, these are all available for you to use for free.

As with the basic cards, there are again mainly two types of these advanced cards that will be of interest to most business owners.  These are the Lead Generation and Website cards.

The other two are only relevant if you’re a mobile app developer, so of little interest to most people and will be touched on only briefly here.

If you want to scale things up, as with any Tweet, Tweets using these cards can be promoted to whole new audiences on Twitter. That makes these cards particularly powerful.

Lead Generation

Twitter’s Lead Generation Card allow you to make an offer to followers who can then easily express their interest in your offer by leaving you their name, @username and email address.

Opting in is just a click of a button away. Because the reader’s details are already available within Twitter, there’s no form to fill in. Their information is sent to you as soon as they click the button provided.

You can choose to either download your new leads from your Twitter Ads account. Or (and I’m all for automating tasks wherever possible!) you can specify for the information to be sent programmatically to your email marketing software for example.

With the latter of course, with the lead immediately and automatically added into your email marketing database, you can follow up with them as soon as they subscribe.

Website

The Website Card invites followers to visit your website. The card provides a quick summary, a link to your site, and an appropriate call to action button.

Different calls to action are available. For example, here’s an example of Adobe using the Enroll now option:

Basic App

This is largely a paid version of the free App Card (see above), to push your app in front of people other than your own audience.

Image App

The Image App Card is the same as the Basic App Card above, but with an optional image you can upload as well to increase engagement.

How To Add Twitter Cards

Basic Twitter Cards

WordPress Blogs

Presuming you’re blogging on the WordPress platform, starting to use Twitter cards is as easy as installing and using a WordPress plugin.

Here are a couple of options.

WordPress SEO by Yoast

Yoast’s SEO plugin gives you everything you need, and is an essential plugin you should have installed on your blog anyway to maximize your search engine visibility.

Once installed, go to SEO > Social via your blog’s dashboard menu:

On the Accounts tab, ensure your Twitter username is set:

Add your Twitter handle to the plugin’s settings

Switch over to the Twitter tab, select the Add Twitter card meta data option, and choose the default card type to use:

If in doubt, just leave as the Summary option, but if you’re using Featured Images with your blog posts (recommended in the blueprint because of all the additional marketing power it gives you) then select the Summary with large image option for a bigger visual punch.

JM Twitter Cards

For finer control of Twitter Cards, such as the ability to customize the Twitter Card you use per post as well as a useful Twitter Card preview function, consider installing the JM Twitter Cards plugin.

WordPress.com

If your blog runs on WordPress.com, rather than your own installation of a WordPress-powered blog, then you’ll find your blog is automatically enabled for Twitter Cards.

WordPress.com automatically sets the required Twitter Card meta data, and picks the most appropriate card to use based on the post.

Blogger, BlogSpot, Tumblr

For blogs running on Blogger, BlogSpot, Tumblr and similar, the only way to install Twitter Cards is to edit the code of your site directly, as outlined below.

If you’re not comfortable with this, you’ll need to find a developer who can help you. For example, try Fiverr, freelancer or upwork (formerly oDesk) to find someone who can help, or you may have a developer friend (it’s only a quick job!).

But seriously… if your main blog is on WordPress.com, Blogger or Tumblr, please consider moving to your own site where you fully control the content! It’s far more difficult to build up authority and credibility for content on your blog – which you need to do to build online visibility for your business and ‘Be Everywhere’ – when you’re on a shared platform.

You can still use Tumblr to support your main blog though, as another channel through which to distribute your content… click here for more info on using Tumblr for your business.

Manually Adding Twitter Cards

This option is of course not as straightforward as using a WordPress plugin, but is easy enough if you are familiar with editing the HTML of your website.

It involves simply adding meta tags to the header of your website’s HTML code.

For example, the meta tags for this particular post are as follows:

The twitter:description and twitter:title tags will differ for each page, and nearly always the twitter:image:src tag as well. The other tags will generally be global for all the pages on your site.

Here’s a quick breakdown of what each one relates to:

Creating Advanced Twitter Cards

The advanced Twitter Cards – for example, their Lead Generation and Website Cards – can be created from within Twitter Ads. You can then attach a card to any Tweet (and promote it too if you wish).

To reach their advertising functionality, simply select Twitter Ads from the menu as shown:

Then select Cards from the Creatives menu:

You’ll see the different card options to select from, along with a button to create the card in question:

Creating the card itself is straightforward.

For the Lead Generation Card, you provide a short description, an image, and a call to action (i.e. the text to use on the button that readers will click to leave you their details).

You also need to provide a link to your privacy policy (so readers can view this before agreeing to pass their details), and a link to a web page readers can go to to learn more about your offer.

The Website Card is simpler, with just an image, link to your website, headline, and appropriate call to action from the drop-down provided.

Possible call to action options for Twitter’s Website Card

For both cards, the image is crucial and is a key part of how successful the card will be for you in terms of the response you get.

The image should communicate the offer to Twitter users, in other words, the benefits for them in taking action. It should be at least 600px wide with a minimum 4:1 (width:height) aspect ratio.

How To Use Advanced Twitter Cards

In terms of how to use these cards, you simply attach them to a Tweet when creating it via your Twitter Ads account.

So, click the blue Tweet icon top right (inside Twitter Ads) to create a Tweet. Then click the cards icon to select a card you’ve created and attach it to your Tweet.

Promoting Twitter Cards

You can promote any of your Tweets by creating a campaign within Twitter Ads. This allows you to push your Tweets – and your marketing message – in front of new audiences on Twitter, way beyond your own followers, and help grow your business further and faster.

For marketing purposes, the Lead Generation and Website Cards are certainly well worth testing, and playing around with as necessary until you get a positive return. Once you’ve got it working, scale it up, and you have a whole new channel of traffic, leads and sales for your business.

Finally…

Remember, you can download a free cheat sheet containing all the tags you need for implementing Twitter Cards on your site ready to copy and paste. You’ll also find details of Open Graph tags to help you build visibility on other social networks. Download a FREE copy now (simple 2-page PDF).