Fairly recently Pinterest introduced “Rich Pins” which allows for more structured content to be shared on their site. For example, on an eCommerce site, with the proper “richness” in place, when someone pins a product photo, more info will be included in the pin like store name, product price etc. There are also rich pins for movies and recipes as well.

To get this to work there are a few different implementation choices. These include oEmbed (which is preferred by Pinterest), Open Graph (which is simple and may already be in effect), and Schema.org (becoming increasingly important to provide structured data to search engines, etc). Both oEmbed and Schema.org offer the functionlity to provide data for multiple products on one page. Open Graph is ideal for single product pages and is simple to implement.

Pinterest Rich Pins

Introducing OpenGraph Tags

Open Graph tags are meta tags that are in the source code of a web page. When present, and a page is shared to a site that reads Open Graph tags, the way the page is “displayed” is controlled by the values in those tags.

For example, when setup for an article, and a URL is shared to Facebook, the Open Graph tags can inform Facebook what title, URL, image, and description to include in the “snippet.” Twitter and Google+ will resort to these tags too if Twitter Cards and Schema.org data (respectively) aren’t included in the page’s source code.

Another example is when an article contains a video. Using the proper tags, when the article is shared to Facebook, can allow the video can be played directly in the snippet on Facebook.

Implementing OpenGraph Tags for Rich Pinterest Pins

There are a few required OpenGraph tags for an e-commerce product page. Once setup, the products can be shared to Pinterest, perhaps as someone’s “wish list,” and valuable product related info can be shared along with it. And the content will be updated (for values such as “stock” for example) on Pinterest when updated in the product listing, although the “oEmbed” implementation proves to be more useful and accurate in that regard.

Essentially, Pinterest can behave as an extension to your base product catalog when providing the correct content to make the product pins more “rich.”

The following OpenGraph tags should be included in the web page for your product (just single product pages). I have included a value in one case where all products will have that same value. These will go in between the “head” tags of the HTML.


<meta property="og:site_name" content="" />
<meta property="og:type" content="product" />
<meta property="og:title" content="" />
<meta property="og:description" content="" />
<meta property="og:url" content="" />
<meta property="og:price:amount" content="" />
<meta property="og:price:currency" content="" />
<meta property="og:availability" content="" />

Others:
<meta property="og:brand" content="" />
<meta property="og:upc" content="" /> or
<meta property="og:ean" content="" /> or
<meta property="og:isbn" content="" />

pinterest rich pin validation

Once implemented, validate the page, then apply to get them approved for use on Pinterest.

Considerations for WordPress Users

A lot of the above values can be automatically included when using WordPress as the Content Management System with the proper plugins in place. It’s worth noting also that WooCommerce will include all the required Schema.org tags (except for description it seems).

Another point worth mentioning, WordPress or not, Pinterest uses the Favicon image in pins, so be sure you have one that matches your brand. A lot of times, if using WordPress, the favicon will be branded for the theme being used. Avoid that.