How to tune your Web design for Facebook images

In your Face(book)

More than ever before, Facebook images matter. The explosion of mobile devices, coupled with the ever-changing Facebook newsfeed algorithm, has put imagery in the front and center of communication. However, even gorgeously designed sites sometimes show broken links or display poor (or irrelevant) thumbnail images when they are shared in Facebook. What gives?

There are three things that commonly cause issues is displaying images from shared links in Facebook: incorrect image sizes, incorrectly set OpenGraph (“OG”) tags, and old images stored in Facebook’s image cache.

Posting Images on Facebook

Size matters

Embedding images that don’t conform to the minimal sizes recommended by Facebook is a common problem. Similarly, images that have irregular dimensions in either height or width are culprits in causing site shares to look ugly in Facebook. Thankfully, there are guides out there that can help. Facebook itself publishes a guide that lays out what image sizes are expected for various types of posts across both desktop and mobile shares (scroll down to No. 4 there), as well as a set of guidelines for Facebook ad image sizes.

In addition, Jon Loomer has created a series of excellent infographics that outline the various Facebook image sizes for different use cases. This is a great place to start in understanding what image sizes are most relevant for Facebook shares.

For example, this image should look great in Facebook since it is 1,200 pixels by 627 pixels, which is their recommended size.

Image Sizing

Specify Open Graph tags

Facebook will usually try to make a best guess as to which image (or images) to use as the share image and thumbnail for any shares that occur through the Facebook platform. Sometimes it’s the largest image on the page. Sometimes it’s the one at the highest resolution. Other times it’s the first image that Facebook sees as it’s scanning your site. Frankly, it seems a little random.

To combat Facebook’s capriciousness, you can explicitly specify which image you want to use by way of Facebook’s Open Graph (or “OG”) tags. In particular, you can use the og:image tag to designate the exact image to use when people share a link to your page on Facebook.

By leveraging the og:image tag, you can specify a URL that points to the exact image you want to use. Of course, since you are pointing at an image that is at the perfect aspect ratio, it should look gorgeous in Facebook.

Pro tip: When using OG tags, you don’t need to actually point at an image that’s embedded in that particular page of the site. As long as it’s a valid URL that points to a valid image, Facebook should pull it in without question. Please use this knowledge wisely.

Clear the cache

Sometimes you (or someone else) share a link to a page before you’ve finished building it out or before you set up the Open Graph tags for it. In these cases, it’s quite common for Facebook to share an incorrect or outdated image. It’s a pain.

Here’s a trick that fixes it:

  • Go to the Facebook developer site here.
  • Put in the URL of the page on your site that’s pulling in the incorrect image.

Presto! Facebook will dump the cache with the old image in it, and refresh it with the image specified with your Open Graph tag. Nifty, eh?

So, your turn. Are there particular things you’ve done to make your Facebook shares more stellar? Or are there plugins or extensions for WordPress® (i.e. WordPress SEO by Yoast, All-In-One SEO), Joomla!® or Drupal™ you’ve used that help in getting your Facebook share imagery to look the way you want?

Christopher Carfi
A veteran of both startups and the enterprise, Chris has a deep track record in developing customer community and evangelist programs for brands such as Adobe, H&R Block and Aruba Networks while holding executive positions at Ant’s Eye View and Edelman Digital, and he was co-founder and CEO at Cerado. He currently lives in the Bay Area with his family.