Here’s Pinterest’s code for the various types of Rich Pins:
Article
Open Graph
<head>
<meta property="og:type" content="article" />
<meta property="og:title" content="Exploring Kyoto's Sagano Bamboo Forest - CNN.com" />
<meta property="og:description" content="A constant inclusion on lists of "forests to see before you die," here's how to see the real thing." />
<meta property="og:url" content="http://www.cnn.com/2014/08/11/travel/sagano-bamboo-forest/" />
<meta property="og:site_name" content="CNN.com" />
<meta property="article:published_time" content="2014-08-12T00:01:56+00:00" />
<meta property="article:author" content="CNN Karla Cripps" />
</head>
Schema.org
<meta property="og:site_name" content="Example Site" />
<div itemscope itemtype="http://schema.org/Article">
<meta itemprop="url" content="http://www.cnn.com/2014/08/11/travel/sagano-bamboo-forest/" />
<span itemprop="name" content="Exploring Kyoto's Sagano Bamboo Forest - CNN.com" />
by <span itemprop="author" content="CNN Karla Cripps" />
<img itemprop="image" src="http://www.example.com/2013/article_image.png" alt="
Kyoto Forest" />
<span itemprop="description">A constant inclusion on lists of forests to see before you die, here's how to see the real thing.</span>
<div itemprop="relatedItem" itemscope itemtype="http://schema.org/Article">
<a itemprop="url" href="http://www.example.com/2013/09/older_article.html">
</div>
<div itemprop="realatedItem" itemscope itemtype="http://schema.org/Article">
<a itemprop="url" href="http://www.example.com/2013/08/different_article.html">
</div>
<span itemprop="datePublished" content="2014-08-12T00:01:56+00:00"></span>
</div>
Movie
Schema.org
<meta property="og:site_name" content="MyMovieSite.com" />
<div itemscope itemtype="http://schema.org/Movie">
<meta itemprop="url" content="http://mymoviesite.com/taxidriver_1976.html" />
<h1 itemprop="name">The Hobbit: The Battle of the Five Armies (2014)</h1>
<span itemprop="description">Bilbo and Company are forced to engage in a war against an array of combatants and keep the Lonely Mountain from falling into the hands of a rising darkness.</span>
Rating:
<span itemprop="contentRating" itemtype="http://schema.org/contentRating">PG-13</span>
Director:
<div itemprop="director" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">Peter Jackson</span>
</div>
Stars:
<div itemprop="actor" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">Ian McKellen</span>,
</div>
<div itemprop="actor" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">Martin Freeman</span>,
</div>
<div itemprop="actor" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">Richard Armitage</span>
</div>
<div itemprop="aggregateRating" itemscope itemtype="
http://schema.org/AggregateRating">
<span itemprop="ratingValue">7.5</span>/<span itemprop="
bestRating">10</span>
</div>
</div>
Place
Open Graph
<head>
<meta property="og:type" content="place" />
<meta property="og:title" content="Kerala Houseboats" />
<meta property="og:description" content="Houseboats in Kerala, India."/>
<meta property="og:url" content="http://thenletitbe.tumblr.com/post/57150677399" />
<meta property="kerala:location:latitude" content="8.5074" />
<meta property="kerala:location:longitude" content="76.9730" />
<meta property="india:locality" content="Alleppey" />
<meta property="og:site_name" content="Tumblr" />
</head>
Schema.org
<div itemscope itemtype="http://schema.org/Place">
<meta itemprop="url" content="http://www.example.com/places/yerba_buena.html" />
<span itemprop="name" >Yerba Buena Gardens.</span>
<span itemprop="description" content="Yerba Buena Gardens Public Park." />
<meta itemprop="image" content="http://www.example.com/image/1.jpg" />
<meta itemprop="image" content="http://www.example.com/image/2.jpg" />
<meta itemprop="image" content="http://www.example.com/image/3.jpg" />
Located at:
<div itemprop="geo" itemscope itemtype="http://schema.org/GeoCoordinates">
<span itemprop="latitude">37.7840</span>,
<span itemprop="longitude">-122.4020</span>
</div>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">750 Howard St</span>,
<span itemprop="addressLocality">San Francisco</span>,
<span itemprop="addressRegion">CA</span>
<span itemprop="postalCode">94103</span>
</div>
<div itemprop="aggregateRating" itemscope itemtype="
http://schema.org/AggregateRating">
<span itemprop="bestRating" content="5" />
<span itemprop="ratingValue" content="4.3" />
</div>
</div>
Product
Open Graph
<head>
<meta property="og:type" content="product" />
<meta property="og:title" content="Technology Will Save Us Gamer DIY Kit" />
<meta property="og:description" content="One of the permanent installations in the collection of Humble Masterpieces at the Museum of Modern Art in New York, this DIY gamer kit from London-based company Technology Will Save Us is equal parts gadget and design classic. " />
<meta property="og:url" content="http://www.urbanoutfitters.com/urban/catalog/productdetail.jsp?id=37075900"/>
<meta property="og:site_name" content="Urban Outfitters" />
<meta property="og:price:amount" content="98.00" />
<meta property="og:price:currency" content="USD" />
<meta property="og:availability" content="instock" />
</head>
Schema.org
<meta property="og:site_name" content="FAMSF Store" />
<div itemscope itemtype="http://schema.org/Product">
<meta itemprop="name" content="de Young Copper Bookmark" />
<meta itemprop="url" content="http://shop.famsf.org/do/product/BK5160" />
<meta itemprop="image" content="http://shop.famsf.org/images/111111.jpg" />
<meta itemprop="image" content="http://shop.famsf.org/images/222222.jpg" />
<span itemprop="description">Our signature bookmark derived from the de Young's
unique architecture and copper exterior. Measures 5 3/4'' x 1 1/4''. FAMSF
Exclusive.</span>
<div itemprop="color" itemscope itemtype="http://schema.org/ProductColor">
<span itemprop="name">Aqua</span>
<meta itemprop="map" content="blue" />
<meta itemprop="image" content="http://cdn-i3.farfetch.com/B.jpg" />
</div>
<div itemprop="color" itemscope itemtype="http://schema.org/ProductColor">
<span itemprop="name">Rose</span>
<meta itemprop="map" content="red" />
<meta itemprop="image" content="http://cdn-i3.farfetch.com/B.jpg" />
</div>
<a itemprop="relatedItem" href="
http://shop.famsf.org/do/product/444444"></a>
<a itemprop="relatedItem" href="
http://shop.famsf.org/do/product/222222"></a>
<a itemprop="relatedItem" href="
http://shop.famsf.org/do/product/333333"></a>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<span itemprop="price">$15.00</span>
<meta itemprop="priceCurrency" content="USD" />
<meta itemprop="availability" itemtype="http://schema.org/ItemAvailability"
content="http://schema.org/InStock" />
</div>
</div>
Recipe
Open Graph
<meta property="og:site_name" content="letthebakingbeginblog.com" />
<div itemscope itemtype="http://schema.org/Recipe">
<h1 itemprop="name">15 Minute Easy Margherita Flatbread Pizza</h1>
<meta itemprop="url" content="http://myrecipesite.com/pineapple.html" />
<span itemprop="totalTime">15 mins</span>
<span itemprop="recipeYield">Serves 2</span>
Ingredients:
<span itemprop="ingredients">1 Naan bread</span>,
<span itemprop="ingredients">3 pieces fresh mozzarella</span>,
<span itemprop="ingredients">1 1/2 tbsp olive oil</span>,
<span itemprop="ingredients">1 1/2 tbsp balsamic vinegar</span>,
<span itemprop="ingredients">5 basil leaves</span>
<span itemprop="ingredients">3 cloves garlic</span>
<span itemprop="ingredients">1 tomato</span>
</div>
Schema.org
<meta property="og:site_name" content="letthebakingbeginblog.com" />
<article class="h-recipe">
<h1 class="p-name">15 Minute Easy Margherita Flatbread Pizza</h1>
<img class="u-photo" src="<photo-source">
<h3>Ingredients</h3>
<ul>
<li class="p-ingredient">1 Naan bread</li>
<li class="p-ingredient">3 pieces fresh mozzarella</li>
<li class="p-ingredient">1 1/2 tbsp olive oil</li>
<li class="p-ingredient">1 1/2 tbsp balsamic vinegar</li>
<li class="p-ingredient">5 basil leaves</li>
<li class="p-ingredient">3 cloves garlic</li>
<li class="p-ingredient">1 tomato</li>
</ul>
<p>Takes <time class="dt-duration" datetime="1H">15 min</time>,
serves <data class="p-yield" value="4">2</data>.</p>
<h3>Instructions</h3>
<ol class="e-instructions">
<li>Press fresh garic and mix with oil.</li>
<li>Brush the flatbread with half the oil mixture. Place in preheated oven for 5 minutes.</li>
<li>Arange sliced mozzarella and tomato on flatbread. Place back in oven until cheese is melted and bubbly.</li>
<li>Sprinkle with chopped basil.</li>
</ol>
</article>
Open Graph and Schema.org are two complimentary formats for adding meta data into your content. You can use both, understanding that Schema.org is a more Google oriented approach and Open Graph is Facebook’s homemade, social media oriented format.
The second step: applying for Rich Pins
You need to make sure Pinterest reads your meta data correctly and can convert it into Rich Pins. The only way to do that is to use their validator to validate the URL of a page you would like to make a Pinterest Rich Pin of.
If the validator gives you a positive response, you are done!
And the best news is that you only need to validate one page in order to apply for Pinterest Rich Pins on your entire domain!
One thought on “How to create Pinterest Rich Pins from your website content”
Comments are closed.