FaceBook grabs incorrect thumbnail image

FaceBook grabs incorrect thumbnail image

Yesterday, I received an email from our Customer:

 

Hi
I bought one of your templates, and there is an error on sharing on Facebook and Google. How can we solve it?

Thanks

Milene Maciel

I access to her website and when I click on Facebook sharing button

 

 

instead of grabbing the featured image

 

 

it grabs a wrong picture:

 

 

After a time, I finally find the solution to solve this issue.
Firstly, Go to this link  https://developers.facebook.com/tools/debug/og/object/
You will see Open Graph Object Debugger box, enter your website here and click on Fetch new scrape information:

 

 

After clicked, I got advice from Facebook:

 

The ‘og: image’ property should be explicitly provided, even if a value can be inferred from other tags.

To solve it, add the following code to your’s functions.php file:

 

public function wiloke_insert_image_src_rel_in_head()
{
   global $post;
   if ( !is_singular() ) //if it is not a post or a page
      return;
   if(has_post_thumbnail( $post->ID ))
   {
       $thumbnail_src = wp_get_attachment_image( get_post_thumbnail_id( $post->ID ), 'large' );
       echo $thumbnail_src;
    }
}

 

Please also note, Facebook warning:

 

og: image was not defined, could not be downloaded or was not big enough. Please define a chosen image using the og: image meta tag, and use an image that’s at least 200x200px and is accessible from Facebook

 

It means: Your Featured Image must be larger than 200px 200px. If it’s smaller than 200x200px, Facebook will get a random image from Based on the raw tags:

 

I hope this tutorial helps. Happy sharing and enjoy!

NEWSLETTERS

Subscribe to our email list and stay up-to-date with all our awesome releases and latest updates.
MailChimp Icon