We’ve all been there… that magical moment when your product starts getting shared in social media, only to be frustrated because the automatically-generated link preview looks like a badly-cropped piece of pixel vomit in everyone’s news feed. WTF?
The reason for that disappointing link preview in the Facebook news feed lies in your Open Graph meta tags, or more likely, the lack thereof. Open Graph tags are not included in the default Magento theme, nor are they included in most third-party Magento themes, but with a few custom attributes and a little bit of effort you can craft killer custom Open Graph tags for your products that will make your link preview stand out in everyone’s news feed.
Step 1: Get your fb:admins code
The fb:admins meta tag will connect your domain to your Facebook account and allow Facebook to recognize you as an administrator of this domain. It’s useful if you intend to use any of Facebook’s social tools on your site and can allow you to view Facebook Insights about user interaction on your domain. To get your code, visit facebook.com/insights, scroll down to the “Domain Insights” section, and click the “Add Your Domain” button. This will create a pop-up window that looks like this:
For now, you can leave the Domain field blank, but make sure that your personal account is selected in the “Link With” drop-down. Then you select the entire fb:admins meta tag that is generated for you. Yours will include your own unique ID number in the content section. Copy it to the clipboard.
Step 2: Add your fb:admins code to head.phtml
With your fb:admins code copied to the clipboard, fire up your FTP client of choice and navigate to the head.phtml template file. The base version of this file is found in /app/design/frontend/base/default/template/page/html/head.phtml but your theme may include its own version. Edit the head.phtml file with the text editor of your choice and paste the fb:admins meta tag in there with the other existing meta tags:
Save your head.phtml file, and it’s time to create some custom attributes.
Step 3: Create Magento attributes for Open Graph tags
Log in to your Magento store admin and navigate to Catalog > Attributes > Manage Attributes. You’re going to create three new attributes which we will use to define the values of your Open Graph Title, Image, and Description meta tags. You can name your attributes whatever you want, but this is what I’ve done:
- Add attribute code og_title as a Text Field
- Add attribute code og_image as a Text Field
- Add attribute code og_description as a Text Area
Save each attribute and when you’ve created all three, add them to your attribute set(s). Again, you can put them wherever you want, but I added them to the Meta Information folder within my attribute sets.
Step 4: Add product vales to your Open Graph attributes
Now that you’ve added the attributes to your attribute set(s), edit one of your products to add values to the new (and currently empty!) Open Graph attributes.
The og_title attribute should be the title of the page as you want it to appear in the link preview. Generally keep it short and sweet, but it can expand to two lines. If you’re feeling lazy, just copy/paste the title of your product.
The og_image field should contain the full URL where your image resides. You can store your images on the same server as your Magento instance, or you can store them anywhere on the web with a static URL. Personally, I created a directory titled og within the media directory of my Magento file system and that’s where I upload all my Open Graph images:
When you are preparing your images for the Open Graph, you’ll want to keep in mind the various dimensions and devices on which the image will be viewed. If you default to the largest, highest-resolution image possible, it will allow Facebook to present the best possible image on the most devices. I generally default to 940×492. For a fantastic and up-to-date overview of all Facebook image dimensions, check out Jon Loomer’s Master Guide: All Facebook Image Dimensions and Ad Specs.
The og_description field should be a short teaser of the content users will find if they follow the link. I’ve seen varying results in terms of the number of characters Facebook will allow in this space. Aim for around 200 characters and you should avoid having your content truncated.
Step 5: Add some Custom Layout Update XML
Now that your product has some values in the Open Graph attribute fields, click into the Design tab of your product edit page, and paste the following code into the Custom Layout Update text area:
<reference name="head"> <block type="page/html" name="og_tags" template="page/html/opengraph.phtml"/> </reference>
We’re getting a little ahead of ourselves in this step because the template file referenced in that snippet does not exist yet. I just figured it’s easier to add this XML snippet at this point since we’re already editing the product. Save your product, and now it’s time to…
Step 6: Create the opengraph.phtml file
Using your text editor of choice, create a new file named opengraph.phtml and paste in the following code:
<?php $_prodID = Mage::registry('current_product')->getId(); $_product = Mage::getModel('catalog/product')->load($_prodID ); ?> <meta property="og:title" content="<?php echo $_product->getog_title() ?>" /> <meta property="og:type" content="product" /> <meta property="og:image" content="<?php echo $_product->getog_image() ?>" /> <meta property="og:url" content="<?php echo Mage::registry('product')->getProductUrl(); ?>" /> <meta property="og:description" content="<?php echo $_product->getog_description() ?>" /> <meta property="og:site_name" content="<?php echo Mage::app()->getStore()->getName(); ?>" />
Save the file and then upload it to /app/design/frontend/YOUR-PACKAGE/YOUR-THEME/template/page/html/opengraph.phtml. In addition to pulling in the attribute values for og_title, og_image, and og_description, this will also pull in the URL of your product detail page and the name of your website. These additional pieces of information are required for the Open Graph meta tags.
This template file, in combination with the Custom Layout Update XML snippet used in the previous step, will add your open graph tags to the <head> section of the product detail page on your website.
Make sure everything was properly saved, refresh your Magento cache, and get ready to test.
Step 7: Test your URL with Facebook’s Open Graph Object Debugger
Not sure you’ve done everything right? The lovely people at Facebook have provided the Open Graph Object Debugger so you can test your URL to see how it will appear when shared on Facebook.
Paste in your URL and click the “Fetch New Scrape Information” button. The first time you do this, you may be given an error message or you may see results with very incomplete information. Hit the “Fetch New Scrape Information” button a second time, and you should see a full page of results detailing what the Facebook scraper sees when it visits your URL.
If Facebook still can’t see anything on your page, go back and check that each of the above steps were completed correctly, and then try flushing your Magento cache.
Step 8: Scale it up!
The great thing about building out your Open Graph tags in this way is that it’s completely scalable using your product .csv files and the native Magento import/export process. Now (in addition to creating images) you only have to update three attribute fields in your product .csv files and add the XML snippet to the custom_layout_update column. Super easy.
And that’s all, folks! I hope this was a helpful tutorial, please drop me a line in the comments if you encounter any problems working this out on your own instance of Magento.