Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

How to Avoid No Thumbnail Issue While Sharing Post on Facebook

Last updated on by
Follow WPBeginner on YouTube
How to Avoid No Thumbnail Issue While Sharing Post on Facebook

Have you ever tried clicking on a Facebook Share link from a blog post just to end up with either no thumbnail, or very unrelated thumbnail showing up? This is exactly what happened to one of our client’s site. For them, we simply wrote a manual code and placed into their header.php, but while surfing through twitter we came across a better solution. In this article, we will show you how to avoid no thumbnail or unrelated thumbnail issue while sharing posts on facebook.

One of the reason why you get no thumbnail, or unrelated thumbnail is because facebook’s script is not smart enough. On each page load, it searches for all image tags and display the ones that it finds useful. Sometimes the script times out without even loading the right image. To get around this issue, facebook recommends developers to tell the script exactly which image to pick by adding a meta tag in the header. The meta tag looks something like this:

<meta property="og:image" content="http://example.com/image.jpg"/>

This works perfectly when you are running a static site, but for a dynamic platform like WordPress, we need to tweak the code a little bit to make it work. We are going to use the WordPress Post Thumbnail (aka featured image) and tell facebook script to pick that as the main image. If for some reason you did not attach a featured image to a post, then we will tell facebook to pick a default image that we have pre-selected.

You need to open your theme’s functions.php file and paste the following code within the php tags:

function 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 )) { //the post does not have featured image, use a default image
		$default_image="http://example.com/image.jpg"; //replace this with a default image on your server or an image in your media library
		echo '<meta property="og:image" content="' . $default_image . '"/>';
	}
	else{
		$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
		echo '<meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '"/>';
	}
	echo "
";
}
add_action( 'wp_head', 'insert_image_src_rel_in_head', 5 );

This code will add a meta tag only on single post pages with the thumbnail url in the meta tag. We have specified a default image “http://www.example.com/image.jpg”, so make sure you change that URL in the code for your image.

For those users who do not want to mess with the codes, there is a plugin for you to use called Add image_src Meta Tag

This function will solve your no thumbnail issue with facebook sharing.

Source: Staenz Web Solutions


Editorial Staff at WPBeginner is a team of WordPress lovers led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »
  • Ruth Cataldo

    How do I find the php tags? I have located theme’s functions.php file but where are the tags?? I don’t want to paste it in the wrong part!
    Thanks

  • Brendan Lee

    Hey guys, great easy to understand article, thanks.

    Unluckily this did not work for me. A little background: I first noticed the problem on this post of mine: http://www.brenontheroad.com/way-cagbalete-island/

    That is my first and only post since migrating my site to a new host, and is still the only post that is having this problem.

    All my posts that were published before the migration still generate thumbnails fine.

    As a test, I went back and uploaded a new featured image for one of my old posts: http://www.brenontheroad.com/happy-chinese-new-year/

    As soon as I did that, it stopped working for this post as well. Even after I changed the featured image back to the original, it still doesn’t work.

    Any ideas? Been losing my mind over this!

    Thanks so much
    Bren

  • Misa Mladenovic

    Just doesnt work for me. FB picks up random banner and crops it ugly :(

  • Abidemi

    Hey i tried the code but my entire page turned white and now I can’t log in. Any solution?? Plus other solutions other than using the code? Thank you

  • Ali

    Wonderful!
    I’ve been having this problem for months now and had no idea how or why, I’m so glad I searched your site for the answer!
    I am going to try this tonight…(thank you!!) I only hope I can make it work (I will do the plugin because I dont know where to find functions.php?)
    Ali

    • http://www.wpbeginner.com/ WPBeginner Support

      You can create your own Site-Specific plugin if you can’t find functions.php file.

  • Sandy

    This was EXACTLY what I was looking for! Worked perfectly! Thanks for sharing!