Publishing a blog post for most bloggers automatically include posting it on facebook, twitter, and all other networks to spread the content. Unfortunately, facebook does not always pick up on the featured image and instead shows a different image, the header image or no image at all.
How facebook choses which image to display
Facebook retrieves it information using the so called Open Graph protocol. It basically is a standarized way to add information about a page to this page. The Open Graph (og) elements tell facebook for example the titel, the URL and the thumbnail image.
This is how the meta information looks like for my last post. All the tags start is “og:” The “og:image” tag tells facebook precicely, which image to use for the thumbnail.
If the wrong image shows up, it often happened that there are multiple images set in the og:image tag and the featured image is smaller than the rest of the images. Facebook will then use the larger image. Other reasons to display a wrong picture are cashing plugins or a missing og meta tag for the image. Unfortunately, the facebook debug tool doesn’t show a specific error message. So it’s important to make sure the og tags are set right for every post.
Many SEO Plugins SEO by Yoast automatically add the og tags to your site and therefor prevent missing thumbnails. So if you use a SEO plugin, just make sure you set the featured image in there.
Setting the og tags via a plugin
If you do not have a SEO plugin, you can make sure the og meta information is still in the header. You can use this code to create a plugin who will provide the tags in the header:
//Adding the Open Graph in the Language Attributes
function add_opengraph_doctype( $output ) {
return $output . ' xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"';
}
add_filter('language_attributes', 'add_opengraph_doctype');
//Lets add Open Graph Meta Info
function insert_fb_in_head() {
global $post;
if ( !is_singular()) //if it is not a post or a page
return;
echo '<meta property="fb:admins" content="YOUR USER ID"/>';
echo '<meta property="og:title" content="' . get_the_title() . '"/>';
echo '<meta property="og:type" content="article"/>';
echo '<meta property="og:url" content="' . get_permalink() . '"/>';
echo '<meta property="og:site_name" content="Your Site NAME Goes HERE"/>';
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_fb_in_head', 5 );
This should work for all new posts.
Using facebook debug
Though for already published and shared posts, facebook cashed the information once retrieved. Luckily, they offer a debug tool. When entering the post url and pressing “debug” all the information facebook has gets visible. If the wrong image is still displayed here (which is quite likely) scroll all the way down and go to the Open Graph Object Debugger. This tool allows to make facebook “fetch new scrape information”. It will search your post again for the og tags and update its own information.
If you already posted on facebook and you don’t want to post again with the right image, you can navigate to you post, klick on the small error and select “Refresh share attachment”. This will refresh the information facebook provides for you blog post and the new image should come up now.
That trick fixes the problem 99% of the time, so make sure to keep that in mind when FB isn’t fetching your image properly.
