How To Make Rich Pins From Your Own Products [Cheat Sheet]

When Pinterest first introduced rich pins in May, PinLeague CEO, Danny Maloney, saw them as Pinterest’s first billion dollar revenue feature. This feature gives companies ability to display price, availability, their logo, show price changes and much more, all within the pin. Although only a few companies had access to these pins at first, Pinterest has since provided the coding to allow any company the chance of having rich pins on their own site.

To create rich product pins, Pinterest requires you to either use oEmbed or semantic markups (Open Graph or Schema.org). While a knowledge of HTML coding does make the task a little easier, below we’ve outlined, defined and even created a cheat sheet outlining the main points to keep in mind when adding rich product pins to your site.

oEmbed

oEmbed is Pinterest’s preferred method of generating rich pins since they only have to look at a single canonical URL to find all the information needed to produce the pin. Because of this, Pinterest can be confident that the pin will always have the right information.

An oEmbed formula will look like this:

{

“provider_name”: “PinLeague”,

“url”: “https://www.tailwindapp.com/pricing-plans”,

“title”: “Pin League Professional Analytics Suite”,

“description”: “Gain insights and take strategic action on Pinterest with PinLeague’s Professional Analytics Suite.”,

“product_id”: “PL12345”,

“price”: 99.00,

“currency_code”: “USD”,

“brand”: “PinLeague Analytics”

“availability”: “in stock”

“quantity”: “100000”

}

To set up a single rich product pin, use these required fields (color coded to match formula):

• url: The canonical URL for the product.
• title: The product name. No need to use HTML formatting here since any tags will be removed.
• price: The price of the product without any currency symbols.
• currency_code: Easily find the correct currency code from xe.com. For example, the US dollar is listed as “USD”.

While the above are the only fields technically required, it’s a good idea to also include:

• provider_name: The store name, such as Karmaloop.
• description: This is the, well, description of the product. This section also doesn’t require HTML formatting – just type away.
• brand: The brand name of the product. For example, the brand Burton can be found on Karmaloop’s website.
• product_id: the ID used on your site to identify the product.
• availability: Can be “in stock”, “preorder”, “backorder”, “out of stock”, or “discontinued”. Do not capitalize any of the values, as this field is case sensitive.
• quantity: The amount of the product left, written as an integer. When the quantity hits 0, the availability automatically changes to “out of stock”

To create a rich pin connected to a page with multiple products or offerings, the set up looks a little different:

{

“provider_name”: “PinLeague”,

“url”: “https://www.tailwindapp.com/pricing-plans”,

“products”:

[{

“title”: “PinLeague Analytics Suites”

“brand”: “PinLeague Analytics”

“product_id”: “PL12345”,

“offers”:

[{

“title”: “PinLeague Lite Analytics”

“description”: “Gain insights and take strategic action on Pinterest with PinLeague’s Lite Analytics Suite.”

“price”: 29.00

“currency_code”: “USD”

“offer_id”: “123”

“availability”: “in stock”

“quantity”: “100000”

},{

“title”: “PinLeague Professional Analytics”

“description”: “Gain insights and take strategic action on Pinterest with PinLeague’s Professional Analytics Suite.”

“price”: 99.00

“currency_code”: “USD”

“availability”: “in stock”

“quantity”: “100000”

}]

}]

}

 While many of these fields are the same (and their descriptions are found above), there are some key differences, particularly under the ‘products’ and ‘offers’ fields:

• provider_name: Name of your store.
• url (required)
• products: (required) While nothing goes directly after the colon, this field is where the product markups begin.
  • title (required)
  • description
  • brand
  • product_id
  • offers: (required) This, like the ‘products’ tag begins a new field related to offers from your domain
    • price (required)
    • currency_code (required)
    • title
    • description 
    • offer_id: The id that correlates to the offer id on your site.
    • availability
    • quantity

Open Graph, originally developed by Facebook, requires that you put information about the products in the HTML header of your site. However, this method doesn’t allow for multiple product descriptions on one page.

The Open Graph tags will look like this:

    <head>

      <meta property=“og:title” content=”PinLeague Professional Analytics Suite” />

      <meta property=“og:description” content=”Gain insights and take strategic action on Pinterest with PinLeague’s Professional Analytics Suite.” />

      <meta property=“og:type” content=”product” />

      <meta property=“og:url” content=”https://www.tailwindapp.com/pricing-plans” />

      <meta property=“og:site_name” content=”PinLeague” />

      <meta property=“og:price:amount” content=”99.00″ />

      <meta property=“og:price:currency” content=”USD” />

     <meta property=“og:brand” content=”PinLeague Analytics Suite”

      <meta property=“og:upc” content=”PL12345″ />

      <meta property=“og:availability” content=”instock” />

    …

    </head>

The meanings are similar to the oEmbed script, but there are a few quirks. One of the biggest things to remember is keeping the “meta property=” tag listed before each of the fields and “content=” before your information.

The required fields for Open Graph rich product pins are:

• og:title: Name of the product, without any HTML formatting.
• og:type: This field must say either “product” or “og:product”.
• og:price:amount or product:price:amount: Price of the product, without the currency signs.
• og:price:currency or product:price:currency: The currency code, found on xe.com.