Have you ever been frustrated when trying to share web content from your website on Facebook, only to find that Facebook won’t show the right image with that content? There are reasons for this – some of which you can fix.
The magic phrase to be aware of here is “open graph”. The Open Graph Protocol is a method of tagging web pages so that social networks can understand their key components. Facebook, Google Plus and other networks need to be able to pull content from a page when someone tries to share that page. The Open Graph Protocol calls for a series of meta tags that make this easy.
A simple example would be the meta title of a web page, where the Open Graph property would look like this in the source of the page: <meta property=”og:title” content=”Title of your web page or article” />. This tag will be used by Facebook or Google Plus when someone tries to share the page. The image below is an example of the sharing process.
If your web pages don’t use Open Graph meta tags, there’s not much to worry about, because Facebook et al are pretty good at using the default meta tags for title and description. This becomes a problem, however, when it comes to the image.
Optimising the image for social sharing
Facebook likes to see an “og:image” tag in the source, attached to the image that you decide is the most important on the page. This tag would look like this: <meta property=”og:image” content=”http://address-of-image.jpg” />
Without that, Facebook will look through the available images in your page and show any it decides are suitable. The one it chooses as the default may be the one you don’t want to appear (like your navigation images) rather than the first image in an article.
Look for Open Graph plugins
The problem here is that it isn’t practical to manually create an “og:image” tag in your pages for every article you write. You need a way of doing it automatically, or not at all. As a worst case scenario, you could use a default image, such as your logo, but that’s not conducive to making content shareable by others once they see it on Facebook.
If you use WordPress to run your website, look for an Open Graph plugin. The Joomla CMS also has plugins available, such as Easy Open Graph. Some content management systems have been proactively supporting Open Graph. Magento, for example, offers support for Facebook features such as the “Want” and “Own” buttons.
When it comes to the image, Facebook will only render it if the image is at least 200 pixels wide at least 200 pixels high. Make sure, if you are using the “og:image” tag on your site to point to the main image in your blog post, that the image is at least that size.
What if you ignore Open Graph altogether?
Most websites share pretty well on social sites, but you may see differences. For example, sharing something on Google Plus may not bring up the content you want (and Google Plus doesn’t let you edit the content before you share it), whereas Facebook (which does let you edit the title and description) may look fine. Or vice versa.
If you want to see what Facebook says about the quality of your content in relation to the Open Graph settings, test any web page in the Facebook debugging tool.
http://developers.facebook.com/tools/debug
