- 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).
- 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.
Facebook’s behavior might change in time, but right now this is the best option I could find.