 |
| Example of a “Large Image Summary Card” for an HTML document featuring Meeks Creek Falls, a waterfall in California's Desolation Wilderness |
On Twitter users tweet short text—microposts.
You want to enhance your tweet with an image? Post it along with your tweet (see Posting photos or GIFs on Twitter).
You want to enhance your tweet with an URL of an exciting web page plus an illustrating image? Use Twitter Cards.
Frequently, I design an image page (photo page): a web page (HTML document) that contains an image annotated with some informative text. I like to include such pages in Twitter posts by presenting the targeted image with descriptive text—microannotation. This stirs up reader's curiosity and invites them to click through. To achieve this, I employ Twitter's “Large Image Summary Card” technology (see Summary Card with Large Image).
Here, I'll demonstrate how it works (how it worked for me, anyway). Follow these straightforward steps:
1. Add specific HTML meta tags to your web page.
2. Run the URL of the page through Twitter's card validator tool.
3. Tweet the URL
As an example page, I am using my Meeks Creek Falls picture and page. I inserted the following metadata lines into the head section of the respective HTML document:
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:site" content="@TravelingAhead" />
<meta name="twitter:creator" content="@TravelingAhead" />
<meta name="twitter:title" content="Meeks Creek Falls" />
<meta name="twitter:description" content="White water tumbling, splashing and spraying downcreek between naturally sculptured rocks" />
<meta name="twitter:image" content="http://www.axeleratio.com/pic/waterfall/meekscreek/img/Meeks_Creek_Falls.jpg">
<meta name="twitter:image:alt" content="Meeks Creek Falls next to Tahoe-Yosemite Trail">
Then, the document was tested with the Card validator at https://cards-dev.twitter.com/validator. After pressing the Preview Card button, I got the following preview display including an info log indicating successful card mark-up:
I submitted the following message with link and hashtags via @TravelingAhead:
#TYT Refresh yourself on a Tahoe-Yosemite Trail outing http://www.axeleratio.com/pic/waterfall/meekscreek/meeks_creek_falls.htm #MeeksCreekFalls #DesolationWilderness #Waterfall
The tweet showed up in the feed (https://twitter.com/TravelingAhead/status/869294403973660672) as shown at the top of this post.
Keywords: microblogging, microdata, meta tags, image collecting, annotated image.
