Open Graph In Magento Product View – Elementary
There are several extensions in Magento Connect that offer social sharing buttons.
More often than not, however, they do not cover the issue of <head> tags necessary for proper, rich or commercial sharing.
There are several meta statements the page must contain for smooth or commercial sharing in Facebook, Finterest and Google+.
Open Graph meta statements – or why Facebook doesn’t recognize the image of my item
The Open Graph system was developed by Facebook, but other social networks also make use of it, most notably Pinterest.
It uses special meta statements (with pairs of property-content) to facilitate the transfer of the specific data required by FB for proper sharing.
There are special property values for the data required by FB, each beginning with “og:” (og=Open Graph), when the minimum requirement is for 3 properties:
While the above can be inferred from other tags in the page, FB encourage developers to explicitly provide this information using the above properties.
Also, an essential for most sharing activities involve images is the property:
This elementary tutorial would focus on those 4 properties. For extra advanced information, pls see our Advanced Open Graph Meta Statements tutorial.
The Code for Magento
Following is a elementary code that should be added to the <head> section of your layout (for example 2columns-left.phtml) in order to add the appropriate meta statements to the product view page. Alternatively, you could add the code in admin: Configuration->General->Design->Html Head->Miscellaneous Scripts.
A code with additional meta statements can be found in our Advanced Open Graph Meta Statements tutorial.
<?php if (Mage::registry('current_product')) : ?> <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:image" content="<?php echo Mage::helper('catalog/image')->init(Mage::registry('current_product'), 'image')->resize(200,200);?>" /> <meta property="og:description" content="<?php echo Mage::registry('current_product')->getShortDescription()?>" /> <?php endif;?>
Things to consider:
I choose to designate the product name as the title of the shared item, as the title of the page may include additions – for example, a prefix or a suffix that were defined in Configuration->General->Design->Html Head->Title Prefix/Title Suffix.
FB minimum requirement for image size is 200X200px. Thus, best practice is to upload bigger images through product image tab in admin. This is also most important for Pinterest, who encourages sharing big images. In the code above, you can change the resize parameters as required, but to no less then 200,200. Also, the parameters do not have to be same. You can use 2 different parameters, e.g. 200,282.
A page can contain several
og:image meta statements – for different images. The above code only declare one, but you can add other statements as required.
So Why FB Doesn’t Recognize The Right Image?
A. Because it was not declared in an
og:image meta statement.
B. Even if the image was declared – it may be too small – and in that case, FB may use other bigger images instead.
Why Should I Declare It If The Page Already Contains The Meta Description Statement?
Indeed FB can deduce the description from the meta description statement. However, it is preferable to also include the
og:description meta statement in the page, as the meta description statement text has to be short, up to 150-160 characters (Magento truncate the meta description after 255 characters), while the
og:description has no such limitation.
In the above code I have used Magento product short description, and not the product meta description, for the
og:description meta statement.
PLS MAKE SURE not to include quotes in this short description, as it would break up the code. Use
" tags or
" numeric entity tags instead.
Facebook: Open Graph Object Debugger
For validating FB required meta statements and other requirements you can be assisted with the very useful Debugger.
This debugger lists all the tags existing, the tags that can be assumed from other tags (e.g. meta description) and the missing or faulty tags.
That is all for now. For a code with additional meta statements and further information of advanced Facebook and Pinterest sharing, pls see our Advanced Open Graph Meta Statements tutorial.