Recently, Twitter rolled out with a type of social rich snippets they are calling Twitter Cards and likewise, Pinterest announced the integration of Pinterest Rich Pins. These two developments make it possible to add additional information and media experiences to your social messages on these two platforms. Contingent on the type of card or rich pin you implement, you have the ability to attach price, product information, availability, larger images and/or video content to your messages. WHOA! That’s right, I’m saying that you’re no longer limited to 140 characters on Twitter and now you have greater ability to use Pinterest as an effective revenue stream.
Let us take a deeper look into the various options for these two new, and exciting social developments.
Intro to Twitter Cards
In the words of Twitter “Twitter cards make it possible for you to attach media experiences to Tweets that link to your content. Simply add a few lines of HTML to your webpages, and users who Tweet links to your content will have a “card” added to the Tweet that’s visible to all of their followers.”
There are six (really seven) types of cards, which we’ll break down.
- Summary Card: This is the default card type. This card includes a title, a description, and thumbnail image within the card (that’s right, no image link)
- Large Image Summary Card: Same as the Summary Card but with a larger featured image
- Photo Card: Gives you the ability to display a photo within your tweet
- Gallery Card: A card aimed at highlighting a collection of photos
- App Card: Provides a profile of an application (not yet available)
- Player Card: A card designed to feature a video/audio player
- Product Card: Displays a product image and includes information such as price
Once you decide which twitter card is best for your website or blog, you’ll need to add a series of meta data into your HTML, in the <head> section of your page. The series of tags will differ by card type but let’s look at the Summary Card as it’s the default card and most widely used. The text denoted in bold, is the content that will be edited from page to page (or post to post).
- Twitter:card – This specifies the card that you want Twitter to generate. No edits will need to be made post to post for this tag.
<meta name=”twitter:card” content=”summary”>
- Twitter:site – This is the Twitter username (or Twitter handle) of the owner of the cards domain, this is an optional tag. No edits will need to be made page to page for this tag.
<meta name=”twitter:site” content=” @SwellPath “>
- Twitter:title – This is the title of the of your content as it should appear on the card. This will change page to page and should be the main subject or title of the page.
<meta name=”twitter:title” content=”Twitter Cards are so easy!”>
- Twitter:description – This is the description of the content you’re promoting, limited to 200 characters. This will change from page to page and should be a short, but descriptive, summary of the page subject.
<meta name=”twitter:description” content=”Twitter Cards are so easy to implement and add various media experienced to your tweets! Kitty says give your social communication a boost with Twitter Cards.”>
- Twitter:creator – If someone specific authored the page content, enter their user name (twitter handle) here. This is an optional tag and is most applicable for something like a guest blog post entry where someone other than the owner of twitter:site tag (noted above) created the content.
<meta name=”twitter:creator” content=”@GuestPostWriter“>
- Twitter:image:src – A URL for the image you’d like to be displayed on Twitter to represent the content. This will change and should be a notable image included on the specific page.
<meta name=”twitter:image” content=”http://actnowtraining.files.wordpress.com/2012/02/cat.jpg“>
Here’s a preview of what this card would look like!
Once you’ve placed the code in the source of the page, you’ll want to select the “Validate & Apply” tab from the Twitter Card Validator page. Here, you will enter the URL of the page and select “Go!” This will allow you to test the page you marked up and fix any issues that many arise. If everything looks good, you will then apply to be in the program and Twitter will send you an email informing you that you’ve been accepted into the program.
Now that you know how to implement Twitter Cards, let’s talk about the value.
Twitter notes that “Tweets with media receive 3 to 4 times more engagement than those without media.” Beyond engagement, Twitter Cards are awesome for increasing your visual real estate within the Twitter feed. Without Twitter Cards, you get 71 vertical pixels for a typical Tweet. Adding a card gives you 154 extra vertical pixels! That’s a 117% increase in vertical real estate in a a Twitter feed. Talk about standing out from the crowd. It should also be noted that Twitter Cards follow the URL and not the person/brand who originally tweeted the URL. That being said, anyone who shares the page or retweets a link to that page, the card will be displayed.
Have Yoast SEO Plugin for WordPress? With the Yoast SEO plugin for WordPress, it’s even easier to add Twitter Cards to your pages (I feel like the math teacher who made learn the hard way first!) Simply go to your SEO plugin and select “Social”. Then go to the bottom of that page and select the box that says “Add Twitter card meta data” and insert your Twitter Username in the area below. Save your settings and you’re golden. If you do go this route, please note that you will still need to be validate and apply for the program.
Intro to Pinterest Rich Pins
An even newer social development is Pinterest’s roll out of Pinterest Rich Pins. It should be noted that rich pins are designed for Pinterest business pages and not personal pages. Although, Pinterest notes that “If you’re an establishes brand, small business, non-profit, blogger or Publication, you can join Pinterest as a business.”
So why are these an excellent next step for e-commerce sites? They provide more actionable information such as price and availability right in the Pinterest interface. Like Twitter Cards, there are a few different types of cards available to users:
Product Pins: Include real time pricing information, availability and where to buy
Recipe Pins: Include ingredients, cooking times, and serving information
Movie Pins: These include rating, cast members, and reviews to help pinners learn more about new movies
Like Twitter Cards, you’ll need to add some HTML meta tags to your site. Below are the steps which we’ll walk through in more detail:
- Decide what kind of rich pin (product, recipe or movie) you want to apply for
- Add the meta tags to your site
- Validate your rich pins and apply to get them on Pinterest
There are a few methods for implementing rich pins. We’ll use the product rich pin as an example. With this pin type, there are two implementation methods: OEmbed and Semantic Markup (including Schema.org and Facebook Open Graph). We’ll walk through implementing Semantic Markup through Facebook Open Graph markup, as I find the tags to be easier to work with and cleaner. Plus, if you already have Open Graph tags applied to your site, there are only two additional lines of meta tags (price and currency) needed.
Below we’ll look at the Open Graph meta tags needed in activate the Product Rich Pin. The tags noted in bold are those that would change from product to product.
- OG:Title- This is the title of your pin, in this case the name of your product
<meta property=”og:title” content=”Homemade Lavender Scented Candle” />
- OG:Description: The product description
<meta property=”og:description” content=”Our candles are made from organic bee’s wax and feature the scents of nature. Our Lavender sent is derived naturally and fills the room with the relaxing and calming scent of fresh lavender. ” />
- Og:type – This is the type of rich pin, either product, recipe, or movie
<meta property=”og:type” content=”product” />
- Og:url- This is the URL of the promoted product
<meta property=”og:url” content=”http://www.AllNaturalCandels.com/candles/lavender” />
- Og:site_name – Name of your website or store (e.g Etsy, Target, Whole Foods)
<meta property=”og:site_name” content=”All Natural Candels” />
- Og:price:amount – The selling price of your product, please note that no currency signs are needed
<meta property=”og:price:amount” content=”25.00” />
- Og:price:currency: Currency code. Place USD for the US dollar
<meta property=”og:price:currency” content=”USD” />
- Og:availablity – Here you would place the product availability. Options include: “in stock” (or “instock”), “preorder”, “backorder” (will be back in stock soon), “out of stock” (may be back in stock some time), and “discontinued” (Pinterest specifies that “discontinued items won’t be a part of a daily scrape and marking them will decrease the load on your servers”).
<meta property=”og:availability” content=”instock” />
It should be noted that the “price:amount” and the “price:currency” tags are required. The “availability” tag is optional. If you are already using Facebook Open Graph Markup then only the last three lines (“price:amount”, the “price: currency” and the “availability” tags) will need to be added in order to implement Rich Pins.
If you’re a retail store that sells many brand names you can add the og:brand tag (<meta property=”og:brand” content=”Levi’s” />) specifying the brand name of the product being sold.
If you have the ability to implement Schema.org markup, I would go this route for two reasons: 1. It’s the semantic markup supported by Google and other search engines and 2. it supports multiple products and offers on the page. Note that you have to modify the HTML body, not just the header when using Schema.org markup.
Below is the basic set of tags for the product pin when using Schema.org markup:
<meta property="og:site_name" content="Name of the Website" /> <div itemscope itemtype="http://schema.org/Product"> <meta itemprop="name" content="Product being Promoted" /> <meta itemprop="url" content="http://myshop.com/products/this-is-a-cool-product" /> <span itemprop="description">This is a description of my cool product. I can include product specs and other descriptive information here</span> <div itemprop="offers" itemscope itemtype="http://schema.org/Offer"> <span itemprop="price">$35.00</span> <meta itemprop="priceCurrency" content="USD" /> <meta itemprop="availability" itemtype="http://schema.org/ItemAvailability" content="http://schema.org/InStock" /> </div>
Once these meta tags have been customized for each product and added into the HTML, you will have to validate your rich pins. Once validated, select the “Apply Now” link, reenter the your URL and select “HTML Tags” as the data format. Select “Apply Now” to apply to the Rich Pins program.
Pinterest will then review your application and email an approval letter.
The Importance of Rich Snippets in Social
The concept of community outreach through social media is stil fairly new and the various platforms are ever evolving. The more that’s discovered about how people engage with the social site, the more the developers can adapt the interface and features to create more value to users. This is also good for brands and e-commerce sites since these features improve the way they interact and share with their customers. Not only do these updated features provide more information and a greater visual elements, they are an indication of what’s to come. As semantic markup and the knowledge graph concept evolves and expands, I beleive we’ll see an even greater element, a more personal element of social media, develop.