Why don’t your images show up on Facebook?

How to implement Open Graph for social sharing optimization.

Scrolling through Facebook, you come across two different shared posts. One is formatted with a crisp thumbnail image, an eye catching title, and a clear and concise description detailing exactly what waits you within the post. The other post contains no image, a long title that cuts off before finishing, and no description.

Which would you click?
 
The two posts can differ like this is because of their Open Graph structure. 
 
Open Graph helps turn a webpage into a rich object in a social graph, simply meaning that it allows a certain degree of control over your content is shared on other platforms, such as Facebook. 
 
A correctly structured Open Graph protocol makes it much easier for social platforms (Facebook, Reddit, etc. ) to crawl your website and present it in a consistent and attractive format. So how does it work?
 
A minimal open graph setup requires these 4 tags:

  • og:title
  • og:type
  • og:url
  • og:image

To start with, implement these Open Graph Tags into the <head> section of your website’s HTML code:

<meta property="og:title" content="The Dancing Bananas" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.oursky.com/dancing-bananas" />
<meta property="og:image" content="http://www.oursky.com/dancing-bananas.png" />

This is a minimal open graph setup. Marketers can further optimize Open Graph for advanced SEO purposes.

Facebook with Open Graph

Facebook is one of the leading platforms strongly encouraging the use of Open Graph. If you share a link without specified OG tags, Facebook can only guess about the title, description and preview image to be displayed. Why would you leave your content display to chance after spending so much effort fine tuning it?
 
But let’s say you have an image and Facebook grabs it. Not all link preview formats are equal on Facebook. Take a look a the images below. Which would you click on?

FORM 1 — IMAGE GRID ON LEFT

FORM2 — TOP COVER IMAGE

If research is any indication, you are likely to click on the second option over the first. The differences may seem small at first glance, but larger cover images can significantly affect the conversion rate of your shared post. 
 
Why are these two posts presented so differently?
 
Answer: It’s all about how Facebook interprets your og:image property.

Any old picture won’t do. Know your OG image dimensions too.

If the dimensions of your image are smaller than 600 x 315 px, it will still display as a vertical image (FORM 1 example above). In addition to simply being smaller and less eye-catching than the second form, this option also has a tendency to only display part of your image. This is particularly problematic if you are sharing a link with important information on the featured image, since the information will be cropped out.
 
To ensure a more complete and appealing display (FORM 2) you should consider making an og:image with 1200 x 630px. These dimensions are ideal for higher resolution and Retina display devices like the iPad and MacBook Pro.
 
While Facebook is smart enough to crawl other images in your shared page if the page does not specify a default og:image, if you're going to take the time and effort to create a stellar piece of content, you may as well choose the first impression you want viewers to have? OG tags allow you to do that.
 
For those still a little confused, Facebook provides more in-depth information about image size and other best practices.

A Few Tools to Optimize Open Graph

Facebook Sharing Debugger

If you want to see how your shared posts currently stand in terms of their open graph properties, you can test out how Facebook interprets them by using Facebook Sharing Debugger.

Newsfeed Image Generator

I’ve simplified this whole process by creating a designated tool called Newsfeed Image Generator. You don’t have to worry about inputting code or specific dimensions. Just select an image, resize or reposition it however you like, give it a catchy title and description, and your image is perfectly optimized and ready to share on Facebook.

Pablo by Buffer

Shortly after I developed my Newsfeed Image Generator, Buffer created Pablo, a tool to resize and optimize images for social sharing (resized to major social networking sites, namely Twitter, Facebook, Instagram, and Pinterest).

A screen grab of Pablo by Buffer

Hope you’ve enjoyed reading it! If you have any Open Graph suggestions of your own, throw ’em down below! I would love to hear them, and I imagine a lot of other people would, too.

😻 At Oursky we’re all about helping brands and entrepreneurs make their ideas happen. Get in touch if you’re looking for a partner to help build your next digital product.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.