Twitter cards allow marketers to improve how their product pages look when tweeted. You may have already seen these enlarges tweets in your own twitter feed? Here’s how to get them for your own pages. They currently offer five types:
In particular if you are selling from your pages the product card option is an excellent way to enhance how you are presented on Twitter. Better presentation supported with extra information will help drive sales. The card will look like (examples from twitter developer pages):
| Web | Mobile |
|---|---|
 |  |
So much better than the basic 140 characters! To get these good looking cards you will need to fill out the following details:
| Card Property | Description | Required |
|---|---|---|
| twitter:card | Must be set to a value of “product” | Yes |
| twitter:title | The title of your content as it should appear in the card. You may specify an empty string if you wish no title to render. | Yes |
| twitter:description | A description of the content in a maximum of 200 characters. | Yes |
| twitter:image | A URL to the image representing the content. | Yes |
| twitter:image:width | Providing width in px helps us more accurately preserve the the aspect ratio of the image when resizing. | No |
| twitter:image:height | Providing height in px helps us more accurately preserve the the aspect ratio of the image when resizing. | No |
| twitter:data1 | This field expects a string, and you can specify values for labels such as price, items in stock, sizes, etc. | Yes |
| twitter:label1 | This field also expects a string, and allows you to specify the types of data you want to offer (price, country, etc.). | Yes |
| twitter:data2 | This field expects a string, and you can specify values for labels such as price, items in stock, sizes, etc. | Yes |
| twitter:label2 | This field also expects a string, and allows you to specify the types of data you want to offer (price, country, etc.). | Yes |
You can use this Card Validator page provided by Twitter to generate the code needed for these fields. Complete the form then cut and paste into your page header between the <head> and </head> tags. NB Some basic HTML knowledge needed for this basic implementation.
Having fine tuned your code to get the right presentation for your page add the it to your header. Next test it by clicking the “Validate URL’s” tab. Twitter will then fetch your page and display your Product card. You will need to repeat the process to remove any errors.
Once you are happy submit your URL. Unfortunately this is not an automatic process and you do need to get approval. You will then need to wait for the approval email from the Twitter team.
Worth the wait.