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.
- og:url: Unlike with oEmbed, the canonical URL for your product is not required, but I would highly advise that you include it in your header.
- og:site_name: The name of your store, which Pinterest also strongly advises you include.
- og:description: The description of your product, without any HTML tags.
- og:brand: The brand name of the product.
- og:upc or og:ean or og:isbn: The unique identifier for the product within your site.
- og:availability or product:availability: Can be, “in stock” or “instock”, “preorder”, “backorder”, “out of stock” or “discontinued”.
Schema.org
Schema.org markups are the third and final markup you can use when creating rich product pins. One of the pluses of using Schema.org markup is that they are supported by Google and other search engines, so it could help your Pinterset SEO value. However, this markup is more complex than just using Open Graph header markups because the tags must be in the HTML body.
Schema.org body tags will look like this:
<meta property=”og:site_name” content=”PinLeague” />
<div itemtype=”https://schema.org/Product”>
<meta itemprop=“name” content=”PinLeague Professional Analytics Suite” />
<meta itemprop=“brand” content=”PinLeague Analytics” />
<meta itemprop=“productId” content=”PL12345″ />
<meta itemprop=“url” content=”https://www.tailwindapp.com/pricing-plans” />
<span itemprop=“description”>Gain insights and take strategic action on Pinterest with PinLeague’s Professional Analytics Suite”. </span>
</div>
<div itemprop=”offers” itemtype=”https://schema.org/Offer”>
<span itemprop=“price”>99.00</span>
<meta itemprop=“name” content=”Free 14 day trial” />
<meta itemprop=“description” content=”Try PinLeague’s Professional Analytics FREE for 14 days!” />
<meta itemprop=“sku” content=”345″ />
<meta itemprop=“priceCurrency” content=”USD” />
<meta itemprop=“availability” itemtype=”https://schema.org/ItemAvailability”
content=”https://schema.org/InStock” />
</div>
If you notice, the first field actually is written in Open Graph form (og:site_name). The reason for this is due to the fact Schema.org markups do not offer a site name field.
There are only two required fields for Schema.org product markups, after stating the item type:
- url: Canonical url for the product on your site.
- name: Name of the product, without any HTML tags.
- description: Description of the product, without any HTML tags.
- brand: Brand name of the product.
- productId: The unique identifier for the product on your website.
- name: Name of the offer, without HTML tags.
- description: Description of the offer, without HTML tags.
- sku: The unique identifier for the offer on your site.
- price: Price of the offer without any currency signs.
- priceCurrency: Currency code, once again found at www.xe.com/iso4217.php.
- availability: Can be listed as, “https://schema.org/InStock” or “InStock”, “https://schema.org/OnlineOnly” or “OnlineOnly”, “https://schema.org/InStoreOnly” or “InStoreOnly”, “https://schema.org/OutOfStock” or “OutOfStock”, “https://schema.org/PreOrder” or “PreOrder”, and “https://schema.org/Discontinued” or “Discontinued”.
Validate your Pins
Before sending your rich pins off to be approved by Pinterest, you must first validate them. To do so go to developers.pinterest.com/rich_pins/validator and enter the URL for your product. After validation, you are then ready apply and take advantage of all rich pins have to offer!
This post was originally featured on PinLeague blog as How To Make Rich Pins For Your Own Products.
![<strong>AI Social Media Content Marketing: The Definitive Guide [2023 Edition]</strong>](https://www.tailwindapp.com/wp-content/uploads/2023/05/AI-Social-Media-Content-Marketing-The-Definitive-Guide-4.jpg)
41 Comments
[…] [Cheat Sheet] How To Make Rich Pins From Your Own Products […]
[…] Learn how to make rich pins from your own products using oEmbed or semantic markups – cheat sheet included! […]
[…] released a useful infographic showing you how to add the relevant html to each […]
How long should it take for your pins to be approved by Pinterest after you apply?
Hi Melissa,
Nice post on Pinterest rich pins.
One question for you…
For Schema.org Tags and Open Graph Tags it’s clear that you add your code to either the HTML body or the head section of the page. Where is the oEmbed code actually inserted (the code between the { })?
David
… [Trackback]
[…] Read More Infos here: blog.tailwindapp.com/make-rich-pins/trackback […]
[…] [Cheat Sheet] How To Make Rich Pins From Your Own Products (tailwindapp.com) […]
[…] [Cheat Sheet] How To Make Rich Pins From Your Own Products (tailwindapp.com) […]
[…] I strongly suggest that if you’re into Pinterest to start understanding more about schemas and Opengraph as rich pins are not going […]
[…] released a useful infographic showing you how to add the relevant html to each […]
You forgot to say how you add any of this to your site. Oops! There’s no point providing all that oEmbed code etc. without saying what to do with it.
@ Ralph- The detailed “How” may vary depending on how your site is built and the volume of content you’re promoting. It could be as simple as copying/pasting these tags into the section of your pages. If you use a 3rd party CMS, you may need certain access rights or to directly edit certain files. If you promote many products, your developers many need to build a dynamic insertion mechanism for the code. My suggestion would be to pass this information onto your development team and they should be able to implement it quickly.
Thanks Daniel. My gripe is really that each post, and the docs themselves, give examples of oembed code, but don’t give any practical examples of how to use it. I appreciate that different environments and systems will present different needs, but at least a basic example—such as on a static page—would give us a fighting chance. In my case, i *am* the development team, and it’s a bit embarrassing not to be able to get any kind of a handle on how oembed works—either from blog posts or from the oembed site itself. Very frustrating. 🙁
What happens after you validate and Apply for rich pins. I’ve done all of this and still nothing is showing?
You’ll be added to a queue for review by folks at Pinterest. Once your site has been reviewed and approved, you’ll receive a confirmation email from them. I’m sure wait times will vary, but recently I’ve been told by a some Tailwind members that it took ~7-14 days for their application to be reviewed and approved.
[…] 22. DO add rich product pins to your site. While adding rich pins to your site might sound like a daunting task, it’s really not. All it takes is a basic knowledge of oEmbed, Open Graph or Schema.org markups and our handy cheat sheet. […]
[…] out this great infographic from Melissa Megginson on the Tailwind blog with easy instructions for creating your own rich pins […]
[…] App tiene un cheat sheet sobre pines enriquecidos de productos que te puede […]
[…] DO add rich product pins to your site. While adding rich pins to your site might sound like a daunting task, it’s really not. All it takes is a basic knowledge of oEmbed, Open Graph or Schema.org markups and our handy cheat sheet. […]
[…] Rich pins for products are technically available to anyone in the world as long as you follow the proper coding needed and get your rich pins validated. […]
Thanks for a great post Melissa! I’m just wondering something about using the oEmbed method: What do you mean by the ‘product id’ and how do I get it? I have an Amazon affiliate site so would the product id be the product’s ASIN on Amazon’s site?
[…] Turn your products into Rich Pins with our handy dandy Rich Pin Cheat Sheet. […]
[…] there are several different types of Rich Pins, such as product Rich Pins, recipe Rich Pins, and Rich Pins for apps, but one of the most prevalent types of Rich Pin are […]
[…] Rich pins for products are technically available to anyone in the world as long as you follow the proper coding needed and get your rich pins validated. […]
[…] kind provides more detail than your typical pin and let’s brands get across relevant information. Product pins help brands display price and availability on a pin. Movie pins provide information on the actors […]
[…] To take advantage of these valuable assets, check out our cheat sheets on how to make article rich Pins and how to make product rich Pins. […]
[…] there are several different types of Rich Pins, such as product Rich Pins, recipe Rich Pins, and Rich Pins for apps, but one of the most prevalent types of Rich Pin are […]
[…] include Recipe Pins that provide the recipe on the Pin, Place Pins that showcase the location, and Product Pins which make it easier for Pinners to buy […]
[…] Rich pins for products are technically available to anyone in the world as long as you follow the proper coding needed and get your rich pins validated. […]
[…] You’ll keep all your boards and followers. This unlocks the ability to use Pinterest analytics, rich pins, link your account to your website and run […]
[…] kind provides more detail than your typical pin and let’s brands get across relevant information. Product pins help brands display price and availability on a pin. Movie pins provide information on the actors […]
[…] Turn your products into Rich Pins with our handy dandy Rich Pin Cheat Sheet. […]
[…] farklı Zengin Pin türü olsa da, örneğin: ürün Zengin PinleriTarif Uygulamalar için Zengin Pinler ve Zengin Pinler, ancak en yaygın Zengin Pin türlerinden […]
[…] Ürünler için zengin pinler gereken uygun kodlamayı takip ettiğiniz ve zengin pinler doğrulandı. […]
[…] Transform the merchandise right into Abundant Pins with your convenient dandy Rich Pin Cheat Sheet. […]
[…] discover numerous various kinds of Abundant Pins, akin to product Rich Pins, dish Abundant Pins, and also Abundant Pins for programs, however probably one of the most […]
[…] offer Dish Pins that supply the dish on Pin, Area Pins that exhibit the placement, and also Product Pins which create it less complicated for Pinners to acquire […]
[…] Rich pins for products tend to be technically out there to any individual inside the globe as lengthy whilst comply with the correct coding required and also receive the rich pins validated. […]
[…] To capitalize on these helpful possessions, examine our very own rip off pieces in how to make article rich Pins as well as how to make product rich Pins. […]
[…] you can find numerous several types of Abundant Pins, akin to product Rich Pins, dish Abundant Pins, and also Abundant Pins for applications, however one of the more prevalent […]
[…] Rich pins for products tend to be technically obtainable to anybody inside globe as lengthy while you comply with the correct coding required as well as receive the rich pins validated. […]