A few people have contacted me over the last few weeks having realised that occasionally, some of their posts that they have written on their WordPress blog are not previewing correctly on Facebook after they reference the URL of their newly created page. Either another image is being picked up in the status update rather than the featured image, the preview excerpt is showing Visual Composer code instead of the actual post text, or often – there is no image showing whatsoever.
The solution for this issue is simple, you just need to download a plugin called “Open Graph for Facebook, Google+ and Twitter Card Tags” – which ensures that all your blog posts insert hidden “Open Graph” tags which the social networks use to pluck out the relevant content. This includes the blog title, the blog link, the except, post image, the site name, the author name, the post type – and much more besides. Without using this plugin, after Facebook swiftly realises your website does not have the tags in place, it will try to auto-detect the fields – one of which includes selecting the first image in the blog post as the preview image rather than selecting the “Featured Image”.
Once you have downloaded the plugin, you will find that in the Settings section, you will have a plethora of options available to you for all of the social networks it supports (Facebook, Twitter, Google), as well as the ability to set a global “fallback” image that will be displayed should the featured image not be available.
However, it should be noted that NONE of the options need to be configured in order to get your Facebook previews appearing correctly, you simply need to install, and that’s it! Infact, it is the first of three simple steps which will ensure that your link previews work correctly..
Open Graph for Facebook, Google+ and Twitter Card Tags should be installed
Ensure your blog post has a Featured Image
Ensure your blog post contains an introductory paragraph in the Excerpt field
If this does not work for you… you should visit the Facebook Sharing Debugger, where you can paste in your URL, and click Scrape again.
Once you have done this, you should be able to re-share your URL on Facebook, and it will show the correct image for you. If this does not work for you, chances are that Facebook is merely caching the previous “share” that you tried when writing your update, therefore you should visit the Facebook Sharing Debugger, where you can paste in your URL, and click Scrape again.
As soon as you click Scrape Again you should find your link will show correctly, and this now will be reflected when you post a status update by showing all the correct information that you need! If for any reason the image still doesn’t show correctly, you are advised to scroll to the very bottom of your blog that you have written, and, as well as double-checking the Featured Image of the post is the one you want to be showing, you should also select it in the dedicated panel at the bottom of the page entitled “Open Graph for Facebook, Google+ and Twitter Card Tags”.
If you’re using a theme that uses Visual Composer – you may also find that when sharing your pages, the description will show the code rather than an excerpt of your page. If this happens, open the Settings section for the Open Graph plugin that you have installed, click on the Facebook tab, and ensure the checkbox which says “Include Description” – is ticked.
I am fanatical about providing useful web experiences, via bespoke websites which engage, inform and entertain. I have been making websites since a young age, and am a keen supporter of AFC Bournemouth.