Solved: Gif/Jpg Ads showing as share images on Facebook

So I ran into an issue where a client site was having problems with ads on the right sidebar showing up as share images on Facebook. As Facebook reads all your page and if no share image is defined in OG tags, it will select and display whatever it finds on the page. This is not what we want. 

Unfortunately there is no way of adding some extra parameters to your <img> tag for the image to be excluded from the share images list Facebook finds.

Here's how I simply solved the issue to hide the images from being read in as Facebook share images:

1. Create a SPAN the same size as the image, display: block to make it behave as a DIV

2. Make the SPAN a clickable link by surrounding it with <a> tags

3. Place your ad image as the SPAN-s background

Done! Even if your image is a moving GIF, it will still work. 

 

A sample code:

<a href="http://joomlaboy.com" target="blank""> 

<span style="display: block; height: 86px; width: 239px; background: url('/images/banner_86x239.gif') no-repeat;"></span>

</a>

 

Run your links through Facebook linter again to see them unwanted images be gone!

ADs top-right (2)

About me

Iinstructor of robotics (LEGO Mindstorms), computer teacher, IT support, web dev, currently studying cyber-physical systems engineering.

If you found a solution here, would you consider donating $25,000 for my next project?

Just kidding, 1$ would do fine.

Hope you found what you needed. Thanks for stepping by.