Open Graph Meta Statements – Advanced

Open Graph Meta Statements – Advanced

For basic information about Open Graph meta statements, pls refer to Adding Open Graph Meta Statements To Magento Product View Page – Elementary

Pinterest: validating tags for rich pins

Rich pins on Pinterest are essential to store owners, as they let you not only pin the picture of the product but also designate some important extra information like the product’s price, availability and origin (store), among others.

There are several ways communicating with Pinterest to create rich pins. Pinterest recommends using oEmbed API as it proves more flexible, but they also gives useful and elaborated explanation of how to achieve pretty much the same with Facebook Open Graph meta statements or tags. Pinterest rich pins specification is very detailed, but here I will concentrate on the mandatory tags and their implementation on Magento platform.

According to the Pinterest’s rich pins specfication, the mandatory Pinterest Open Graph tags are:

og:type
og:title
product:price:amount*
product:price:currency

We have already add the og:title for Facebook, so no need to explain that again. Also, the other tags added before (og:image, og:url and og:description) are useful for Pinterest too.

Step 1: Defining The Pin’s Type
The first step is to designate the type of your pin. As of now Pinterst supports 5 type of pins: product, recipe, movie, article and place. As we are adding tags to product page, we should clearly defines the type as Product:

<meta property="og:type" content="product" /> 

Step 2: Designating The Price Amount And Currency
Pls Note: if your product’s price is 0.00, no rich pin would be created when you press the pin it button.

Although Pinterest recommends using the tag product:price:amount, it wasn’t working for me. After some testing I’ve gotten satisfying results with the tag og:price:amount. I used the product page’ getFinalPrice() function for designating price amount, but also use the round function to display only 2 decimal places.

Also, instead of product:price:currency, you can use og:price:currency.

If the product is on sale, the tag og:price:standard_amount can be used to designates the non-sales price.

<meta property="og:price:amount" content="<?php echo round(Mage::registry('current_product')->getFinalPrice(), 2)?>" />
<meta property="product:price:currency" content="<?php echo Mage::app()->getBaseCurrencyCode();?>" />

Step 3: Add Site Name And Product’s Availability
Although not designated as mandatory by Pinterest in the rich pins’ specification, the following 2 tags are required by the Rich Pin Validator and are extremely important for proper display of your product rich pin:

og:site_name
og:availability

For og:site_name, designate the name of your site. This would preferably be a full name of the site and not a URL, as this was designated by another tag.

The og:availability has several possible values: “in stock” (or “instock”), “preorder”, “backorder” (or “pending”; will be back in stock soon), “out of stock” (or “oos”; may be back in stock some time), “discontinued”. As all my Products are downloadable products, I choose to just put the value “instock”. Magento supports only 2 of the above possible values: “In Stock” and “Out of Stock”, so a variable can be used to send the current availability, but as I understands it, this would not be automatically updated when the availability on the store would be changed.

<meta property="og:site_name" content="Treasure.co.il" /> 
<meta property="og:availability" content="instock" />

Step 4: Validating Your Rich Pins
After adding all the mandatory and the optional Open Graph tags of your choice (the specification lists many more optional tags), you should validate your tags in the Rich Pins validator.

I’ve tried to use this validator in different browsers and OSs, and still always encounter the same erratic behaviour, as the validator stacked on a greyed-background page with a loader icon or returned no results. To bypass this, just reload the page (F5) while in the loader icon phase.

Check the result and fix your tags accordingly.

Final Code

 <?php if (Mage::registry('current_product')) : ?>
 <meta property="og:type" content="product" /> 
<meta property="og:image" content="<?php echo Mage::helper('catalog/image')->init(Mage::registry('current_product'), 'image')->resize(200,282);?>" />
<meta property="og:url" content="<?php echo Mage::registry('current_product')->getProductUrl()?>" /> 
<meta property="og:title" content="<?php echo Mage::registry('current_product')->getName()?>" /> 
<meta property="og:description" content="<?php echo Mage::registry('current_product')->getShortDescription()?>" /> 
<meta property="og:price:amount" content="<?php echo round(Mage::registry('current_product')->getFinalPrice(), 2)?>" /> 
<meta property="product:price:currency" content="<?php echo Mage::app()->getBaseCurrencyCode();?>" />
<meta property="og:site_name" content="Treasure.co.il" /> 
<meta property="og:availability" content="instock" />
<meta property="fb:admins" content="<your user numeric id>"/>
<meta property="fb:app_id" content="<your apps id>"/>
<?php endif;?> 
0 Comments
Share Post
No Comments

Sorry, the comment form is closed at this time.