Nav Trigger

Controlling Your Site’s Facebook Thumbnail

I recently launched the website for a new business I am starting up. My wife, wanting to help promote this new venture, right away posted the link to Facebook. When I looked at her post on my news feed here is what I saw:

Screen Shot 2014-10-09 at 4.09.47 PM

After weeks of painstakingly working on the site to get it ready to go, I was just a little frustrated with Facebook. I would soon learn that my frustration was just beginning. Fixing the issue become a game of trial-and-error. I am still not 100% happy with the results, but it is much better.

The core issue for me was that I wanted to control exactly what Facebook would share when someone shared a link to my website. Sure, Facebook will make an attempt at scraping the link that was shared to build the thumbnail, but what if I wanted to tell Facebook what to display? Open Graph seemed to be the way to go.

Lucky for me I had some previous experience with Open Graph. It did not take me long to assemble the meta tags I needed to include on my website for Facebook.  Here is what I ended up using:

<!— Facebook Open Graph Meta Data –>
<meta property=”og:type” content=”website”/>
<meta property=”og:title” content=”FilterSnap-Air Filter Subscription” />
<meta property=”og:url” content=”http://filtersnap.com/” />
<meta property=”og:image” content=”http://filtersnap.com/images/fb-open-graph-2.png”/>
<meta property=”og:image:type” content=”image/png”>
<meta property=”og:description” content=”FilterSnap simplifies the task of replacing your home’s air filters. Simply tell us what filters you need, and how often you would like to replace them. We will ship you the exact filters you need, when it is time to replace them.” />

Based on Facebook’s content sharing best practices I created a 1200 x 630 pixel image for the image I wanted used when the link was shared.  Here is the first image I attempted to use (image scaled down to fit here):

FB Open Graph Image

This worked fine when Facebook displayed the full image, but it looked really bad when it was scaled down (for instance on the mobile app).  Here is what happened when it was scaled down:

Screen Shot 2014-10-09 at 11.24.36 AM

For some reason I cannot totally explain, Facebook is screwing the image up for smaller screens. I am guessing that they are scaling the image down keeping the 1:1.91 aspect ratio in-tact, and when they reach the height they need, centering the image in the space.  As you can see, this caused issues for my image.

My next bright idea was to supply Facebook with two images. One to be used when a giant image could be displayed, and one to be used when a smaller image was needed.  My hope was that Facebook would use the best image available for the screen size when building the thumbnail.  Nope.  This just created an option for the user to pick which image they wanted to use, and did not solve the problem.

In a last ditch effort I decided to try only giving Facebook a smaller image with a 1:1 aspect ratio.  I chose 200 x 200 for my test.  Here is the image I used:

FB Open Graph Image 2

When I did this, the image suddenly worked everywhere. The only downside I found was that my website, when shared, will never have the giant billboard-sized image, it will always look like this:

Screen Shot 2014-10-09 at 4.53.16 PM

I am OK with this limitation though since I am able to control the look now.  There is still an issue where the image is blurring a little bit, but that is an issue for another day.