Fix- Articles Linked on Facebook Don’t Display Thumbnails / Images

Facebook Lint Tool

A link was posted in a Facebook Discussion that is useful for finding out where Facebook is having trouble crawling your website:

Facebook Lint Tool

Go to the link above and on that page enter the URL of the page you are having issues with. The FB Lint Tool is useful in two ways:

  • Shows any crawl erros that may occur when Facebook crawls over your page
  • Updates your page in Facebook’s cache so that any images or paths added after the original cache will be updated

Make sure that your image shows up when you enter your web address into the Linter. If your image does not show up or the problem persists try using some of the other suggestions below.

After you run your page through the linter, try sharing the link again as many people have reported that running their page through the linter fixes their problem. If your problem persists, continue reading.

Try This Plugin Before Following Other Suggestions Below!

Some of my readers have been experiencing a problem where when people “like” their post the wrong thumbnail is displayed. This is different than the original problem, however, I’ve found a plugin that solves both issues.

If you use WordPress, install the Add Facebook Share Thumbnail + Meta Plugin then Facebook will automatically take the featured image for the page.

So, install the plugin, make sure your featured images are set and your thumbnail problem should be fixed!

If you’re not using WordPress try reading below for alternate suggestions. There is also some valuable information in the comments section of this post.

This issue has been affecting Facebook users for quite sometime now and it seems that it may be because of multiple different reasons. This post contains some solutions that have worked for some people. If you have found a solution please let me know in the comments so we can rid everyone of this ridiculous problem!

Important: Image Naming / Location

First of all, Facebook does not like .png files so if you’re saving your images in that format and experiencing this issue, try changing your images to .jpg or .gif format.

Secondly, based on some recent troubleshooting I’ve done with one of my readers, Jon, I’ve realized that one of the main issues with images not displaying on Facebook is the file path that they are located at. Facebook does not like spaces in the name of an image or in the name of a folder that an image is in. Facebook also doesn’t like when there is extra “stuff” added to the end of an image URL such as image dimensions or something similar.

For example, if the file path of your image is currently:

http://www.yourdomain.com/new images/picture of me.jpg

Facebook will not be able to find that image above because both the image name, “picture of me.jpg” and the file path to the image “http://yourdomain.com/new images…” have spaces in them.

To make sure that Facebook can find your images you need to edit the name of the image and the names of the folders that the image is in to take out all spaces so the entire file path would look something like this:

http://www.yourdomain.com/new-images/picture-of-me.jpg

How can I tell If Facebook can’t find my images because of the way they are named?

The easiest way to see if this is reason your images are not appearing in Facebook is to right-click on the image you would like to be displayed and select “copy image URL”. Paste that URL anywhere and take a look at it. If the VERY LAST part of the URL has a .jpg, .gif or any valid image extension, then some of the solutions below may be of more help to you because your images are uploaded and name correctly.

If there is extra “stuff” at the end of your image URL such as height and width data, question marks or anything at all, then that is most likely the reason that Facebook cannot find your image. Either you’re using an automatic image resizing plugin or the process that you are going through to upload your images includes automatic image naming and file path specification.

Unfortunately Facebook likes images that are named correctly using basic image naming techniques. For example, here is the URL to the image at the top of this page:

http://ansonalex.com/wp-content/uploads/2011/01/facebook-thumbnails2.jpg

Notice there isn’t anything added to the end of it. It is a simple, normal .jpg image.


If you’re using WordPress.com I have noticed that if an uploaded image is very large and would break the theme if remained that size, wordpress resizes the image automatically and adds “?w=300&h=300″ or something similar to the end. To avoid this problem make sure that when you upload images they have already been cropped to the final size that you would like them to be! That should help those of you who are experiencing this problem because of WordPress automatically resizing your pictures.

Finding a way to accomplish this when uploading your images will solve the problem most of you are having.

This should solve the problem for a lot of you and you may need to run your page through the Facebook Linter (explained above) to update Facebook’s cached version of your page. If this does not solve your problem keep reading below for some more possible solutions.

Image Directory

When you upload your images make sure you are uploading them to the main image directory for your website. Also, make sure that you are providing meta data for your images (alt tag, description, etc.).

Facebook may be having trouble gathering data about the images on your page. If you have access to edit the code of your page then you should explicitly code where your images are located by doing the following:

Put the following three lines of code in your page’s header- change the values so they are relevant to your site.

<meta name="title" content="Title of Article Here" />
<meta name="description" content="Description of article here" />
<link rel="image_src" type="image/jpeg" href="http://www.yourdomain.com/image/path.jpg"/>

Make sure you change the image path to the full address of the image location on your website.
Now when Facebook scans your page to find thumbnails, it will pick up the address of your image right from the page header.

Image Format and Meta Data

Make sure that you’re not using .png files- Facebook doesn’t work very well with them.

Last Resort- Workaround

When you go to add a link to Facebook remove the “http://www.” from the beginning of the link URL and remove the “/” from the end of the URL.

For Example, If the URL is:

http://ansonalex.com/lifestyle/quit-the-habit/

When you go to link to the url in Facebook you should only enter:

ansonalex.com/lifestyle/quit-the-habit

This solution/workaround worked for me right when I first began experiencing the problem.

If you find any other solutions please share them in the comments section!

Anson Alexander

About Anson Alexander

Anson has been publishing to AnsonAlex.com since early 2011 and has recently opened an AnsonAlex.com headquarters office to focus on the brand full time.

Anson specializes in providing software and technology tutorials in both print and video format. With hundreds of tutorials published on AnsonAlex.com, Anson has also authored and recorded 7+ courses for Lynda.com as well as other media companies.

Anson has a degree in International Business and Information Systems from the University of Tampa and also enjoys enjoys traveling and gaming.

Please send business inquires to [email protected]

Also connect with Anson on Google+.

Weekly Email Updates

Archive


AnsonAlex.com 2011-2015 All Rights Reserved. [Fix- Articles Linked on Facebook Don’t Display Thumbnails / Images]