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

WRITTEN BY

Jen Lombardi Head Honcho & Creative Genius :: Kiwi Creative

Kiwi Creative is a small marketing and design studio located in the lovely ‘burbs of Cleveland, Ohio. We help small businesses and marketing departments within larger organizations with cool projects that involve graphic design and illustration, website development, online advertising and social media strategy. Oh, and we’re a pretty awesome group to work with, if we do say so ourselves…
  • CONNECT WITH ME

Written By Jen Lombardi, Head Honcho & Creative Genius

Kiwi Creative is a small marketing and design studio located in the lovely 'burbs of Cleveland, Ohio. We help small businesses and marketing departments within larger organizations with cool projects that involve graphic design and illustration, website development, online advertising and social media strategy. Oh, and we're a pretty awesome group to work with, if we do say so ourselves…

Leave a comment

5 Comments

  1. 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. I believe quite privileged to own used your webpages and look forward to really more fabulous minutes reading here.

  3. THANK YOU so much for the solution to problem #2!!! I have been so frustrated with this and it solved the problem immediately.

  4. Thank you so much for solution #2… that has been bugging me for ages and I just searched for a solution today when Facebook insisted on showing old content after a template refresh on our site. Glad to have found your page on this problem!

Leave a Reply