The Product Card is a great way to represent retail items on Twitter, and to drive sales. This Card type is designed to showcase your products via an image, a description, and allow you to highlight two other key details about your product.
These fields are strings and can be used to show the price, list availability, list sizes, etc. This will require adding some new markup tags to your pages, which we will cover below.
Note: The product card requires an image of size 160 x 160 or greater. It prefers a square image but we can crop/resize oddly shaped images to fit as long as both dimensions are greater than or equal to 160 pixels.
| Web | Mobile |
|---|---|
 |
 |
Drive downloads
In addition to displaying your content in a more engaging way, the Product Card can also drive downloads of your mobile applications. For more information, see App Installs and Deep-Linking.
Define the product card with these properties:
| 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 |
Here’s example markup for a product card:
<meta name="twitter:card" content="product">
<meta name="twitter:site" content="@twitter">
<meta name="twitter:creator" content="@twitter">
<meta name="twitter:title" content="Logo Mug">
<meta name="twitter:description" content="The perfect pick-me-up. Enjoy your favorite blend with this coffee mug featuring the Twitter logo. Make every work day good to the last drop.">
<meta name="twitter:image" content="https://twitter.siglercompanies.com/graphics/00000001/mug-new.jpg">
<meta name="twitter:data1" content="$3">
<meta name="twitter:label1" content="Price">
<meta name="twitter:data2" content="Black">
<meta name="twitter:label2" content="Color">
<!-- additional footer tags available (See the App Installs and Deep Linking document to learn more) -->
More information on the ability to deep-link from this Card is located here.
Next step: test your integration with our Validator Tool!