Why don’t my blog photos show up on Facebook when someone Likes a post?

..and other amazing  facebook mysteries…. REVEALED!

It’s amazing to me how often you’ll get a bad image when you try to link to a particular blog post or website page on facebook, even from major sites.

I’ve been researching the ins and outs of this for the last few websites I worked on–both setting up the facebook Like button, and also testing what happens when a user links to a page–, and so I thought I’d share some of my findings, in the hopes of helping others.  Please feel free to add to or correct anything, in the comments.

Facebook uses something called Open Graph protocol to get all the information to display. And if there are multiple images to pull on a page, many times it will just pick the last one (which might be your twitter icon, or something else totally random) Not the actual image you were wanting to display next to the link on facebook. The same process happens when you are Linking to a page from facebook, or when you click a facebook Like button on the page.

To test what facebook will read off your page, you can paste the url for your overall site, or a specific webpage, here:  Facebook URL Linter.  It’s a more reliable way to test your link than just by posting on your facebook, as facebook will cache things.

For more about this, with examples, see: How to get the right images when Liking on Facebook

How to get the right image to show up when a page is linked or Liked in Facebook:

There are a few different options, depending on what type of site you have, and your level of technical expertise.

Simple Answer (specifically for WP bloggers):

If you’re a WordPress blogger:

  • Try this plugin:  FetenWeb image_src Metatag.
    I’ve used this one on a few sites, and it will pull the featured image (if you’re using that functionality) or the image attached to the post for facebook links.  You can also set a default image.  It’s simple, and seems to work quite well.

If you have a basic wordpress blog, that may be all you need.

Sort of Advanced answer – Setting Open Graph in your header:

As I said before, facebook reads the Open Graph tags on a page.  If it can’t find them, it tries to figure them out from the other information on the page.  To test what facebook will read off your page, you can paste the url for your overall site, or a specific webpage, here:  Facebook URL Linter.

So if what you see in the Linter is not what you want the user to see, you can set the Open Graph tags by adding them to the head section of your website.

To start off, Facebook has a tool here (“Step 2“) that will generate basic OG tags for your site.  (if you’re logged on to facebook when you use it, it will pull in the right Admin ID for you).

You’ll need to paste your tags in the <head> section of your website.  (In WordPress, that would be in header.php, before the end of the head section (before the </head> tag)

Note that you may not want to set all the open graph tags – you may want some of them to be generated based on the page content.

Note the difference between “article” and “website” for the og:type property.  For blogs you should use ‘article’ not ‘website’.  From the Open Graph site: Use article for any URL that represents transient content – such as a news article, blog post, photo, video, etc. Do not use website for this purpose. website and blog are designed to represent an entire site, an og:type tag with types website or blog should usually only appear on the root of a domain.

Since the big thing we are talking about here is images, if you want a standard image to appear on any page linked from your site, like your logo for example, you’ll need to set it in the image tags.  Create a jpg file of your image (a square image works best for facebook), and (for simplicity’s sake) store it in the main directory for your site (the www directory, generally).  {If you’re on WordPress, this would be the directory where your wp-admin and wp-content directories are located.}

Then we set the og:image tag to that file:

There are more tags you can set (list here: Open Graph) too.

Advanced Answer: using conditional tags

So, for many sites you may want to have different open graph tags appear depending on what page you’re on.

Take for example a website which includes a home page, multiple content pages, and also an integrated blog.

For my home page, I may want to set the description, rather than have it generated based on the page content.  And on my content pages, I may want to show just my logo, or I might want facebook to pull an image from the page.  On blog pages, I probably want to show the image attached to a post.  So I need different rules:

Here is an example from company website, with integrated blogs, developed in WordPress.  I use something like this in conjunction with the Fetenweb plugin above to get the appropriate results.

The first section is for the home page, where I’m setting specific text I want to appear as the description.  The second part is for single (blog) pages, so if someone links to the article on facebook it pulls up the article specific information.  The third is pretty much like the first, it just doesn’t set the description (and if I removed the image tag, it wouldn’t set the image.)

You can see the effects:
Here is my results for linking to the homepage: https://graph.facebook.com/?id=https://dabbledstudios.com/
Here is my results for linking to a blog post: https://graph.facebook.com/?id=https://www.dabbledstudios.com/a-fun-and-retro-kids-salon-website

Hope this helps!