Practical Ecommerce

How to Set Up a Twitter Card for Your Ecommerce Site

With a bit of data, online retailers can improve the way products are shared on Twitter, defining a specific image and description to be displayed and improving tracking with Twitter Card Analytics.

Online retailers want shoppers to share products on social media. When a visitor tweets about a product, she is essentially endorsing that product, sharing the product with her friends and family. That sort of sharing can lead to sales.

How Twitter Cards Work

When someone posts a tweet that contains a URL, Twitter fetches the page content and looks for specific metadata fields. When those fields are present, Twitter will display a “card” rather than just a link when the tweet is expanded in the timeline or when the tweet is viewed directly.

This is a Twitter Card for a Threadless t-shirt. Notice the large image with the description below replaces a simple link in the tweet.

This is a Twitter Card for a Threadless t-shirt. Notice the large image with the description below replaces a simple link in the tweet.

Ultimately, the person tweeting can still impact or override how the tweet will appear, but including the Twitter Card metadata will provide a baseline of sorts so that your products are most often presented with an image and product description that your site defines.

Each piece of metadata is a key-value pair. This sort of arrangement will be familiar to web developers — the “key” is a unique data identifier and the “value” is the data itself or a pointer to the data. Also, Twitter Card metadata can typically be added programmatically in an ecommerce platform’s theme or template files.

In the example code below, the key is “twitter:card” and the value is “summary.”

<meta name="twitter:card" content="summary" />

Add Twitter Card Metadata to Product Pages

Metadata is placed in the head section of an HTML document. For Twitter Cards to work, there are a few required metadata fields.

The first field identifies the card type. Twitter previously offered a “product” card specifically for ecommerce, but Twitter deprecated it in 2015. This left online retailers with two card types for product detail pages: the “summary” card and the “summary with large image” card.

The summary card will display an image with an inline description.

<meta name="twitter:card" content="summary" />
This is a summary Twitter Card from Beardbrand's website, notice the image and description are inline.

This is a summary Twitter Card from Beardbrand’s website, notice the image and description are inline.

The summary with large image uses a larger image with a description below it.

<meta name="twitter:card" content="summary_large_image" />
This is a summary with large image Twitter Card for a t-shirt from Design By Humans. The product image, a t-shirt design in this case, is the center of attention.

This is a summary with large image Twitter Card for a t-shirt from Design By Humans. The product image, a t-shirt design in this case, is the center of attention.

The site metadata field tells Twitter the handle for the website. For example, the metadata below comes from the Beardbrand.com and points to Beardbrand’s Twitter handle.

<meta name="twitter:site" content="@beardbrand"/>

The description meta tag passes a description for Twitter to display on the card. Try to keep this description relatively short.

<meta 
    name="twitter:description" 
    content="Black Marble beard oil is a collaboration..."/>

It is worth mentioning that Twitter bases its card meta fields on Facebook’s Open Graph. So for a few tags, including description, you can use the Facebook Open Graph tag instead. This way, you do not have to create almost identical meta tags for the two platforms. Bottom line, if you have an Open Graph description meta field, use it for your Twitter card too.

<meta 
    property="og:description" 
    content="Black Marble beard oil is a collaboration..." />

Similarly, you can provide Twitter with a product name for the Twitter Card with either a “twitter:title” or an “og:title” meta field. Here are the two examples.

<meta 
    name="twitter:title" 
    content="Black Marble Beard Oil - LIMITED EDITION" />
<meta 
    property="og:title" 
    content="Black Marble Beard Oil - LIMITED EDITION" />

When you pass Twitter the image URL, you may again choose to use Twitter’s card-specific field or Facebook’s Open Graph field.

<meta 
    name="twitter:image" 
    content="https://cdn.shopify.com/s/files/...">
<meta 
    property="og:image" 
    content="http://cdn.shopify.com/s/files/...">

Twitter allows you to set the image’s alt property, “twitter:image:alt.”

Test and Launch Your Product’s Twitter Card

Once you have the Twitter Card metadata included on your site, test it using the Twitter Card Validator. This simple tool will give you an idea of how your card will look. If the Twitter Card fails, use the troubleshooting page to help resolve the problem.

If you are happy with how the Twitter Card works in the validator, try tweeting the URL on your own Twitter account.

Twitter Cards appear on Twitter Analytics. You can therefore track how your product pages are shared on Twitter.

Finally, it can take a few days for Twitter to begin honoring your Twitter Card. If the Card is not working as expected in, say, a week, return to the validator and troubleshooting pages.

 

Armando Roggio

Armando Roggio

Bio   •   RSS Feed


email-news-env

Sign up for our email newsletter

Comments ( 2 )

  1. Carlos Rivera September 15, 2016 Reply

    I enjoyed this tutorial. Thank you!

    • Armando Roggio September 16, 2016 Reply

      Thanks Carlos.