A hassle-free guide to rich pins and Twitter Cards

Twitter and Pinterest offers great opportunities for businesses, and today we will look at two features, marketers and small business owners can put to good use. We created for you a full guide to the Rich Pins and Twitter Cards and tried to concentrate on the most useful options for e-commerce – Product Pins and Twitter Products Cards.

Twitter Cards

What are Twitter Cards?

A Twitter Card is rich content attached to a tweet to show additional information for the link shared. It can contain titles, descriptions, thumbnails, a Twitter account attribution, a featured image or a collection of four pics, product information, and more, depending on the Twitter Card type.

To give you the general idea, it looks like this:

By the way, you can choose whether to include rich media when embedding a tweet. Here’s how it’ll look like without rich media: Twitter Product Cards: embed tweet without rich media.

There are 10 different types of Twitter Cards available, but on of the most valuable type for e-commerce is the Twitter Product Card. It shows more details on your product so users can see them without even leaving the tweet page. Like this: Macy's Twitter Product Card

Why do you need Twitter Cards?

1. If you compare the two variants above, you’ll see that the tweet with rich media is more likely to drive more attention, clicks, traffic or engagement. In this case we see not only a title, but also a short description, and a featured picture, and that makes your tweet stand out and receive more attention. It works just like snippets in Google SERP, which bring way more clicks for your links.

2. What is more, Twitter Cards give you more space when 140 characters is not enough.

3. Twitter cards are also displayed on the mobile version, which is a big deal, as 85% of time Twitter users spent on Twitter happened on a mobile device.
 Twitter Product Cards on mobile       Twitter Product Cards on mobile

 How do Twitter Cards work?

1st Step. All of this magic is based on the meta tags, so, first of all you need to add them to your website. The full description how to create meta tags you can find on Twitter’s documentation, it’s quite nice, indeed. The code for a Summary card type will look like this:
<meta name=“twitter:card” content=“summary”>
<meta name=“twitter:creator” content=“@amastyteam”>
<meta name=“twitter:title” content=“Magento 2 Generate and Import Coupons extension>
<meta name=“twitter:description” content=Reduce time spent on coupon management by generating and importing an unlimited number of promo codes in a couple of clicks.>
<meta name=“twitter:image” content=”https://amasty.com/magento_2_generate_and_import_coupons/img/12584245342″>

Basically, the process is rather simple. You add several lines of code to your content so Twitter knows what to show in the rich media section. You can add these lines manually or use an app or extension depending on a platform your site uses.

For Magento websites, use Magento Google Rich Snippets to add the required markup.

2nd Step. After you’re sure the markup is done, you’ll need several steps to verify your website (see below), and all your products shared on Twitter will have a Twitter Card.  To enable twitter cards go to Twitter Cards validator. Enter your product URL and click Preview Card. Enter your product URL and click Preview Card.  Twitter Product Cards: Twitter Card ValidatorYou’ll see a preview of your card. Then click Request Approval and fill in the quick information on your website. There are some reported cases when you’ll have to wait for several days for your Twitter Cards to be approved, but often they are approved within a couple of minutes or hours.  Twitter Product Cards: Twitter card approval
 Twitter Product Cards: Twitter card approval 2After that you’ll receive a message that your card is now working, mentioning the type of card that has been activated.  Twitter Product Cards: Twitter card notificationYou’re done! Now if anybody shares your product link on Twitter, a twitter product card will show up.

Tips on using Twitter Product Cards

1. Please notice that if you attach a picture to the tweet manually, it will be displayed instead of a possible Card. Here’s the example, although Macy’s is using Twitter Product Cards. It happens because Cards from pic.twitter.com and vine.com have preference over alternate domains.

2. Accounts can pin a tweet to the top of their timeline, which auto-expands the tweet and displays the Card. This is possible on web only.
 tweet with twitter product card

3. In some circumstances, users may want to tweet multiple URLs. URLs are processed in order of appearance in the tweet, first to last.

Twitter Cards and Open Graph

Here’s an explanation from Twitter itself, and it can’t be more precise, so we’re just quoting it:

You’ll notice that Twitter card tags look similar to Open Graph tags, and that’s because they are based on the same conventions as the Open Graph protocol. If you’re already using Open Graph protocol to describe data on your page, it’s easy to generate a Twitter card without duplicating your tags and data. When the Twitter card processor looks for tags on your page, it first checks for the Twitter property, and if not present, falls back to the supported Open Graph property. This allows for both to be defined on the page independently, and minimizes the amount of duplicate markup required to describe your content and experience.

Twitter Cards analytics

Twitter wants us to use Twitter Cards even more and provides users with a convenient dashboard that shows impact of using this tool. It includes the number of tweets and impressions, change over time, performance of various card types, and more. To get to your analytics, navigate from your Twitter account to Ads > Analytics > Twitter Cards. See the details

analytics dashboard (topic: Twitter Product Cards)

Rich Pins

What are Rich Pins?

Rich Pins work the same as Twitter Cards and rich snippets on Google, showing additional information according to the type of the pin. We will focus on the most valuable Rich Pin type – Product Pins. Here’s how it looks like (hey, look at the product pin, not the price!):
topic: product pins - rich pin example

Product Pins let you show the price, stock status and product description on Pins from your website. Pinterest is only adding product Rich Pins from sites where you can purchase those products. This means that you must be able to directly buy the product from your website, not from another site.

Why do you need Product Pins?

1. They show real-time information on your product. Say, if the price changes, you don’t need to update it – it’ll stay relevant on all existing pins.

2. They drive real traffic and sales, proved by stats.

3. Pinners also get notifications when product Pins they’ve added drop in price. I mean, yay!

4. Using Rich Pins is a ranking factor for Pinterest, so this tool will increase your visibility for Pinterest search.

How to enable Rich Pins

1. You’ll have to place special meta tags on your page. You can do it manually or use an extension for your platform. Again, welcome to use Magento Google Rich Snippets to easily place Pinterest meta tags on your Magento store pages.

2. To use Rich Pins, you need to have a business account on Pinterest. Don’t worry if your account is personal, because you can easily switch to a business one in just a few clicks, to do that, follow this link.

3. Go to Rich Pins validator and add one of the links with Pinterest markup, check how it looks like as a Rich Pin. Also, the dashboard will tell you the type of a Rich Pin it recognizes and if the parameters are passed correctly.

4. If you’re satisfied with the previous steps, click Apply Now. When your rich pins are ready, you’ll receive an email. Some people complain that the message won’t come or come too late, but you can always go and check whether your Rich Pins are working.

Tips on using Product Pins

1. It’s a good idea to place a Pinterest sharing button on product pages. People love creating wishlists and gift lists on Pinterest, so make it easier for them! The button shouldn’t be very large and bright so it doesn’t draw attention from choosing and buying, but it should be available in case the customer wants to use it. Here’s a good example from Shopbop:
Product pins: Shopbop Pinterest

2. Encourage people to share! Create Pinterest group boards, conduct contests, build a community of pinners around your brand.

3. Make sure you have beautiful vertical images people can pin. Studies have shown that vertical images perform better than horizontal ones.

4. Use more than one product image people can pin, so they choose the pic they love more.
Now, what’s your experience of using Twitter Cards and Rich Pins? We would love to hear your stories in comments.

Magento Google Rich Snippets - for teitter product cards and not only

To implement Product Cards and Rich Pins, use Magento Google Rich Snippets on your e-store.

Also, improve your website appearance in organic search. Use easily adjustable rich snippets for highlighting any site information you need.
Significantly increase your visibility with microdata and draw highly targeted traffic to your online store.
button