Facebook Open Graph : Display Images [Solved]

Sharing a Link on Facebook is a treat. It enables authors to offer a better visual experience to their readers and followers. As you type in the hyperlink or the URL, the familiar three animated vertical lines appear and your link materialises in the form of a picture and some other information, usually the first few lines of description and a title. To get a better effect, Facebook has advised pictures of a resolution of 120 x 630, at least 600 x 315, anything smaller will show up, but will be a smaller picture. Check out the two examples below. I had to pick up the example from the Facebook Help page as I have not yet been able to achieve the bigger picture effect.

Generally don’t have the problem with Google Plus.

To accomplish this, Facebook uses the open graph tags contained in the code of your site to crawl and acquire the required information. It looks for title, site name, URL, description, image and a few other things. And whatever it doesn’t find, it picks up some defaults, again depending on who is giving it this information.

Now for the general authors and publishers, there are two common options namely, WordPress plugin Jetpack (Publicize module) and the official Facebook plugin. Honestly, these plugins do a very good job of filling up the open graph tags for you. If not these two, you are left with what the pros do; design your own code, for Facebook to read it correctly. Not the available option for most of us, including me. But there are two situations where you are faced with a real problem. First if your posts don’t have any images. Second, if you enter the URL of a website.

This is what Jetpack has inserted in the main page of this website http://soonev.com

< !– Jetpack Open Graph Tags –>
< meta property=”og:type” content=”website” />
< meta property=”og:title” content=”soonev” />
< meta property=”og:description” content=”SOmething ON EVerything” />
< meta property=”og:url” content=”http://soonev.com/” />
< meta property=”og:site_name” content=”soonev” />
< meta property=”og:image” content=”http://wordpress.com/i/blank.jpg” />
< meta name=”twitter:site” content=”@BlogSoonev” />

For image, Jetpack is pointing towards a blank.jpg to show empty space in Facebook. The offending code has been highlighted in Red. This is how it looks if posted on Facebook.

 

The explanation offered by Jeremy Herve, is convincing and is reproduced below to ensure verbosity.

When you enable Jetpack’s sharing or Publicize module, Jetpack automatically adds Open Graph meta tags to your site.
Among these tags, there is an image meta tag that is used by Facebook and Google+ to build post previews when you post on one of the social networks.
Jetpack creates an image meta tag by browsing each one of your posts, and looking for images that are big enough to match Facebook’s requirements (at least 200x200px). If Jetpack finds a slideshow, a gallery, or a single image inserted into the post that matches these requirements, the image is added as an image meta tag.
On your home page, however, you haven’t inserted any image. The images that may appear there have actually been inserted into posts, and not to the home page. Since Jetpack cannot find any image, it returns a default blank image.
If you’d like to add a custom Open Graph image to replace the blank default on your home page, you can use the code in this tutorial:
http://jetpack.me/2013/07/12/add-a-default-image-open-graph-tag-on-home-page/

 

Inserting codes or modifying html gives many of us scares. Plus if you update your theme, all those changes are gone. Plus, it can’t be an elegant solution in my books. In this age of plugins, do we need to modify code?

Now began the hunt for elegant solution. Most of the solutions involve inserting some code or the other.

Some have suggested a brute force approach, by inserting this link in your code.
<  link rel=”image_src” href=”http://soonev.com/wp-content/uploads/2014/09/logo.jpg”>

Some have met with success, for others this solution failed. For some, it started showing this image for all the posts.

Installing the Facebook Official plugin is of no help. Infact, in both these plugins, there is no place where you can actually configure these settings and we are left at the mercy of the plugins and whatever value it takes in for us.

The Elegant solution is offered by the plugin WordPress SEO by Yoast.

This option is found under the Social Settings, and this popup is visible as a part of the tour. Not only it helps you out with the default Home Page image, but also allows you to set a fail-safe image if your posts contain no images.

The URL is also scrapped properly and the required fields are shown good.

 

There are two tools offered by Facebook to check if things are in order.

First one gives the link results as they will appear in your Facebook post.

https://www.facebook.com/sharer/sharer.php

The second one is a detailed analysis of what your website is tagged with by open graph

https://developers.facebook.com/tools/debug/

Is there a more elegant solution. Do share in comments.