How to hide Facebook thumbnail images from a web site?

facebookI recently had this issue on a web site I manage (data is a bit skewed, for simplifcation):

  • Big web site.
  • Three images in the article – A, B, C.
  • Three banners in the sidebar – X, Y, Z.
  • When I tested how Facebook saw the images I was sending, it was correct, Facebook saw I was sending A, B, C.
  • When the article was posted on Facebook, the images Facebook was getting were A, B, X. Huh?

How to solve this?

Tip: If you put a link on Facebook, it will “cache” the images he finds the first time, and reset the cache only after a while. So, if I want to share an article on Facebook, and don’t like something from what Facebook grabs, even if change the article, the images will be taken from the cache. If you want to immediately reset what Facebook “sees” as images from your web site, go to the link above and paste the desired URL, it will delete all previous cache.

The problem: I was sending A, B, C with the standard og:image code. Despite this, Facebook had a mind of his own, and tried to find more images.

This was the old code for X, Y, Z, images:

<a href=”http://en.wikipedia.org/wiki/Nicolae_Steinhardt” title=”Our Wikipedia Page – Nicolae Steinhardt” target=”_blank” ><img src=”http://upload.wikimedia.org/wikipedia/en/thumb/9/99/Question_book-new.svg/50px-Question_book-new.svg.png”></a>

And this was the new code:

<a href=”http://en.wikipedia.org/wiki/Nicolae_Steinhardt” title=”Our Wikipedia Page – Nicolae Steinhardt” target=”_blank” style=”background-image: url(‘http://upload.wikimedia.org/wikipedia/en/thumb/9/99/Question_book-new.svg/50px-Question_book-new.svg.png’); height: 40px; width: 50px; display: block;” ></a>

You will see that the images display the same, but the code is different.


Now, Facebook only gets images A, B, C from the web site (written in old code, with img), and completely ignores X, Y, Z (written with new code, style background).

Notes:

  • With “img src” code, the width & height are optional (see above, the image displays OK without them; you may choose not to use them), but with style background, they are not (if you don’t use them, there are problems).
  • Sometimes, it’s necessary to add “text-indent:-9999px;” for style, and also put a link between <a> and </a>. Any text, but it’s best to use the title used for the link (it won’t be shown, though.

(partial source for this message)

Facebook’s behavior might change in time, but right now this is the best option I could find.


Note: Also see the Yahoo! Group on which I present similar issues:IMRo. To join, email imro-subscribe@yahoogroups.com and reply to the confirmation email.

I am a Freelancer. My expertise is in SEO (Search Engine Optimization) / UX (user experience) / WordPress. Co-founder of lumeaseoppc.ro (series of events on SEO & PPC) and cetd.ro (Book on branding for MDs). On a personal level, I like self-development - events, sports, healthy living, volunteering, reading. I live in London, and lots of things live in me.

2 Comments

  • Phillip Katete

    10 September 2013 - 19:16

    This may indeed be a workaround, however, have you tried setting the open graph image meta as a way to “force” feed facebook the images that you want to appear? Here’s a link from Open Graph: http://ogp.me/
    NOTE: You can have several images bearing the og:image meta (and of differing mime types), and the image specified in these meta’s need not be part of the web-page content.

  • Olivian Breda

    10 September 2013 - 20:03

    Hi, Phillip, no, I haven’t tried that. Thanks for the idea.

Leave a comment

Your email address will not be published.