Quickly Add Open Graph tags to Magento

A client of mine recently shared the site report for her site from Silktide with me and it showed a few things needed improving, particularly the Open Graph integration. Her site is a new Magento store, built on Magento Community Edition 1.7.02 and whilst I’d added share buttons to the product pages via the ShareThis widget I hadn’t added in any Open Graph tags to optimize the sharing process. The Silktide report spurred me in to action and I thought I’d share my code to quickly add the OG tags to your magento pages.

First you’ll need to edit your theme’s head file at “app/design/frontend/YOURTHEME/default/template/page/html/head.phtml” and add the following lines of code:


<meta property="og:site_name" content="<?php echo Mage::app()->getStore()->getGroup()->getName(); ?>" />
<meta property="og:description" content="<?php echo strip_tags(htmlspecialchars($this->getDescription())) ?>" />
 
<?php if (!in_array(Mage::app()->getFrontController()->getAction()->getFullActionName(), array('cms_index_noRoute', 'cms_index_defaultNoRoute'))) {
    $currentUrl = Mage::helper('core/url')->getCurrentUrl();
}?> 
<meta property="og:url" content="<?php echo $currentUrl ?>" />
 
<?php if (Mage::registry('current_product')) : ?>
<?php if (Mage::registry('current_product')->getMetaTitle() == "") {
  $ogTitle = Mage::registry('current_product')->getName();
} else {
  $ogTitle = Mage::registry('current_product')->getMetaTitle();
}
?> <meta property="og:title" content="<?php echo $ogTitle ?>" />  

<meta property="og:image" content="<?php echo Mage::helper('catalog/image')->init(Mage::registry('current_product'), 'small_image')->resize(200,200);?>" />
<?php endif;?> 

This code is mainly aimed at product pages and sharing them on Facebook so it renders the product’s title, description and a thumbnail image of the product, resized to the recommended size of 200 pixels square. Any HTML in the description is stripped out leaving the plain text. The code also adds the current store view’s name (you may need to edit this in Configuration > Manage Stores) and the URL of the current page. Finally the code checks if the product has a Meta Title set and if not it displays the name of the product instead. Upload the altered file, clear your Magento cache and away you go. You can check your integration with the Facebook debugger tool.

UPDATE
The code below checks if we’re on a product or category page and pulls the relevant image and sets the correct og:title for the category or product page.


<?php if (Mage::registry('current_category')) : ?>
<?php $ogTitle = Mage::registry('current_category')->getName();?>
<?php
$_category  = Mage::registry('current_category');
$cur_category = Mage::getModel('catalog/category')->load($_category->getId());
$imageUrl = $cur_category->getImageUrl();
?>
<meta property="og:image" content="<?php echo $imageUrl;?>" />
<?php endif;?>
<?php if (Mage::registry('current_product')) : ?>
<meta property="og:image" content="<?php echo Mage::helper('catalog/image')->init(Mage::registry('current_product'), 'small_image')->resize(200,200);?>" />
<?php endif;?>
<meta property="og:title" content="<?php echo $ogTitle ?>" />

I still haven’t found a way to get all the product images but it will be necessary to loop throught the product image array and write out an og:image tag for each image.

5 thoughts on “Quickly Add Open Graph tags to Magento”

Leave a Reply