Twitter product cards help facilitate rich product data from your website to Twitter. If a tweet is posted or retweeted with a product page URL with Twitter cards enabled, the tweet will include not only the product name, but the image, price, SKU, and a short product description to help engage more click-throughs and ultimately more sales.
What are Twitter Product Cards?
You can tell a difference between a standard tweet and a tweet with Twitter Product Cards enabled.
Here is an example of a regular tweet that you are used to seeing:
Here is an example of a tweet with twitter product cards enabled:
Twitter crawls all URLs included in a tweet and automatically recognizes pages with Twitter cards enabled. A product card must have an image so will only work for products with at least one main image set and must be at least 160 x 160 pixels or greater in size. There are some clear advantages of using product cards:
- Product image to automatically be displayed within tweet. People are visual and will be more likely to click or share a tweet with an image.
- Increase in maximum tweet size. Along with the maximum tweet size of 140 characters, the product name and description allow for more characters in your tweet.
Enabling Twitter Cards within SEO-Cart
You can easily enable Twitter cards within SEO-Cart by performing the following steps:
- Login to the SEO-Cart back office
- Navigate to Configure->Store Settings and scroll to the “Twitter Card Settings” section.
- Enable the checkbox for “Enable Twitter Cards” and enter your Twitter Username.
- Update your changes
That’s it! Twitter cards will automatically be enabled on all product pages of your website.
Validating Twitter Card HTML Meta Tag Code
Once twitter cards are enabled on your website, you should validate the code to make sure everything looks okay. Use the Twitter Card Validator to validate your twitter cards and request approval to whitelist your website with Twitter. Twitter card meta tag code also validates existing Open Graph code on your website. All SEO-Cart product pages include Open Graph data automatically and Twitter Cards will pickup on the og:title, og:url, og:description, and og:image tags. Here is an example of a Twitter Product Card code:
<meta name="twitter:card" content="product">
<meta name="twitter:site" content="@twitterusername">
<meta name="twitter:label1" content="Price">
<meta name="twitter:data1" content="$3,895.00">
<meta name="twitter:label2" content="SKU">
<meta name="twitter:data2" content="106251 x">
<meta property="og:url" content="http://www.yoursite.com/your-product.html">
<meta property="og:title" content="Your Product Name">
<meta property="og:image" content="http://www.yoursite.com/images/product-image.jpg">
<meta property="og:description" content="Your product description">
Gain Insight with Twitter Card Analytics
In early 2014, Twitter released a new tool called Twitter Card Analytics to help you understand how your Twitter Cards are performing. Gain a high level look in to URL clicks and Retweets on your website over time for your Twitter Cards. View the Twitter Analytics tutorial video to learn more:
You can visit https://analytics.twitter.com/ and login to view your Twitter Analytics data.