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.
- 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.
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)
- Summary Card: Title, description, and thumbnail.
- Summary Card with Large Image: Similar to the Summary Card, but with a prominently-featured image.
- App Card: A Card with a direct download to a mobile app.
- Player Card: A Card that can provide video/audio/media.[This has to be approved]
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:
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:
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.
Twitter Getting started guide: https://dev.twitter.com/cards/getting-started