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:
- 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.
- 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?)
- Upload your new optimized image to your web hosting server.
- 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” />
- 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…
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 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…