How to use Twitter Cards

Twitter cards is the mechanism to have content from a webpage or video appear in a rich way within a tweet.
If you add some twitter specific metadata tags to a webpage – with things such as a description, and image, video or a download of a mobile app, you get a richer tweet for your twitter followers.

You are still putting the same URL onto Twitter – but Twitter will read the metadata tags and produce a better experience within the tweet.

Summary steps:

  • Create the content on your site
  • Decide on which of the 4 card types that you want (your content will help decide this)
  • Add the appropriate metadata tags to the webpage
  • Test that the tags are working correctly with the Twitter Card Validator.
  • Schedule or send the tweet remembering to include the URL.

Details:

a) Create the content for your site.

You arelready know the message that you are trying to communicate to the audience that you are trying to build. The guidance at the moment is that it has to be relevant and engaging for people. This means visually appealing – so pictures and of course video are necessary. This is the difficult step, but necessary and unique to your content. We’ll assume that it is created already.

b) Decide on which of the 4 card types that you want (your content will help decide this)

For most regular webpages it is likely that the Summary Card or the Summary Card with Large Image are appropriate – and easy to send out. The Player Card – in particular because it has to be approved, is one that will take a little more planning.

I have made some simple templates available on GitHub:

Summary Card is here

c)  Add the appropriate metadata tags to the webpage


This is the Sample Code for a Summary Card
meta name="twitter:card" content="summary" - Indicates the Card Type

meta name="twiter:site" content="@flicker" - The attribution for the card

meta name="twitter:title" content="Small Island Developing States Photo Submission" -- A concise title for the related content

meta name="twitter:description" content="View the album on Flickr." -- A concise summary for the content. Will be 3 lines in the web, and not seen on iOS/Android

meta name="twitter:image" content="https://farm6.staticflickr.com/5510/14338202952_93595258ff_z.jpg" -- A URL for the content on the page (Should not be generic at all)


meta name="twitter:image:alt" content="Description in less than 420 characters for visually impaired users"

d) Test that the tags are working

The Twitter Card Validator. can be used to test that the tags are added correctly and it also shows what the tweet will look like (at least what the Card element of it will look like).

The Log window on the validator will show something like the following if it works:
INFO:  Page fetched successfully
INFO:  16 metatags were found
INFO:  twitter:card = summary_large_image tag found
INFO:  Card loaded successfully

If the URL is incorrect the message will appear something like:

INFO:  Page fetched successfully
WARN:  No metatags found

This can be somewhat confusing as the URL is incorrect and the message indicated that the page was successfully fetched. So – check the URL if you get any warnings on the log.

If the URL is correct, but you have an error then this is a possible output:

INFO:  Page fetched successfully
INFO:  15 metatags were found
INFO:  twitter:card = summary tag found
ERROR: Possibly invalid value (if specified) (twitter:description)
ERROR: Possibly invalid value (if specified) (twitter:text:description)
ERROR: Possibly invalid value (if specified) (og:description)
In this particular instance there were Open Graph “og” tags rather than Twitter tags present in the metadata which resulted in this output from validating the page http://www.bbc.com.

Note: It can be used to test some scheduled URL’s from a system like Blogger, where you preview the page, and then take the full preview URL and use that in the validator.

e) Schedule or send the tweet

The key here is to compose the tweet – remembering to include the URL.

References:

Twitter Getting started guide: https://dev.twitter.com/cards/getting-started

Advertisements
This entry was posted in Marketing, Twitter, Uncategorized and tagged , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s