How To Override Image Preview for Facebook Links and How To Force Refresh Facebook’s Cache

One of the coolest features when posting a link to Facebook is the image preview and meta tag description that automatically pops up alongside the link. Not only are these details important in reassuring your audience that a post isn’t spam, but they also serve as great teaser which increases the click through rate on posted links.

But what happens when Facebook’s link sharing preview doesn’t work exactly as expected? Major frustration for any web developer.

Here are two common problems I used to experience and easy tricks to fix ‘em (if you have access to a website’s source code):

Problem #1: “Facebook isn’t pulling any images from my website, but clearly there’s at least ONE photo on the page.” Or, “Facebook is only detecting weird images on my page, not the one I want it to.”

Solution #2: Facebook won’t detect photos embedded as background div images via CSS, but it will detect graphics inserted the regular <img src=”xxxx”> tag. If you don’t have any “normal” images, or if those aren’t the ones you want showing up as the thumbnail preview, override the automatic settings and manually choose an image preview for Facebook following these easy steps:

  1. Chose a graphic you want to use as the new preview. Good examples would be the logo or a screenshot of the webpage. Really, anything will work as long as it is relevant to the link and will look good at a small size.
  2. If your image is too large, use an image editing program to shrink the width down to about 250px. (It’ll never appear larger than that, so why waste server space and compromise load time?)
  3. Upload your new optimized image to your web hosting server.
  4. Insert this code in the <head> tag of the page you’ll be referencing:  <link rel=”image_src” href=”http://full_url_of_the_hosted_image” />
  5. Voila! Facebook will now detect the image preview that YOU want, not the one it automatically finds for you.

Oh, wait… you tested your link in Facebook and it’s still showing up as the old preview? Read on to super frustrating problem #2…

Problem #2: “Facebook keeps showing the old image preview / page title / meta description, even though I just updated it.”

Solution #2: Facebook has very overzealous cache which seems to last foooooreeeeeever when you’re trying to test a link! Force clear Facebook’s cache to show updated content by using their “URL Linter” tool: http://developers.facebook.com/tools/lint/

(OK, so really this is a general tool to help you debug your URLs as they relate to using the “like” button. But an awesome side effect is it forces Facebook to reindex your website which will find your new content! Read more about the URL Linter on Facebook’s Developer Blog.)

I hope you’ve found these two tips useful in dealing with Facebook’s (sometimes frustrating) image preview option when posting links. It’s nice to know there’s a way to override the automatic settings, huh? :)

P.S. While you’re on Facebook, why don’t you check out our fan page? We’d love for you to “like” us: http://www.facebook.com/kiwicreativeoh

- – - – - – - – - – - – -

Jen Lombardi is the head honcho and creative genius at Kiwi Creative, a suburban Cleveland marketing and branding studio helping small- and medium-sized companies grow their business through innovative and effective communications. With experience in graphic design, web programming, content development, social media and online strategy, Kiwi Creative offers all the expertise of a full-service agency with an affordable price tag.

Follow us on Facebook (http://www.facebook.com/kiwicreativeoh) or Twitter (http://www.twitter.com/kiwicreativeoh)

 

3 Comments by on August 7, 2011
filed in Coding Craziness
tagged , , , , , , , , ,
« Previous post
Next post »

3 ResponsesLeave one →

  1. TC

     /  November 2, 2011

    Thank you, thank you, thank you, thank you for that link to the FB “URL Linter” tool. My site had been compromised with a mess of spam, and it was showing up in FB link thumbnails. I’ve cleaned up the mess (I hope) but FB’s link thumbnails were still telling people to buy drugs. Ran this tool, refreshed the cache, and hey! Now I’m not terrified that my site will forever be associated with garbage spam on Facebook. Thank you.

  2. Alexander Jerome z

     /  December 20, 2011

    Still it

  3. Kaylee Barnes z

     /  December 25, 2011

    I believe quite privileged to own used your webpages and look forward to really more fabulous minutes reading here.

Leave a Reply