Today I will tackle a subject which lately gave headaches. I don’t know how many of you guys have faced this issue, but lately, I was struggling with it. I usually create new posts on my website and then I share them on social media, but for some unknown reason(s), the post image was not displayed on Facebook. After a good deal of research, I find out the solution. Let’s see together how to fix Facebook website thumbnail when sharing a post.
You will be surprised, as I was, to hear that many users are facing this issue and if you read this article most probably you are one of them.
Why Is The Thumbnail Image Not Displayed On Facebook?
There are many reasons which prevent Facebook to display the thumbnail image correctly. The first reason is heaving to many images set in the og:images tag. Sometimes, the post’s featured image is smaller than the rest of the images from the post.
Facebook uses Open Graph tags (og), and if you use WordPress, you probably have an SEO plugin activated. You may ask what’s the Open Graph to do with an SEO plugin? I’m glad you asked. The SEO plugins will add the Open Graph tags to your website to prevent thumbnail issues.
I use Yoast SEO and All in One SEO plugins, BUT not both of them on the same website. So, long short story, your website needs Open Graph.
What Is Open Graph?
Open Graph is a protocol introduced by Facebook that permits the integration between Facebook and a website which will allow them to become graph objects like other Facebook objects. Open Graph will add some tags in your web pages which will give Facebook enough information to display the tags correctly.
To check if your website has Open Graph follow the steps:
– open an article or the website home page
– right click anywhere and select ‘View/Show Page Source’
– check the meta tags in the tag or use CTRL-F on Windows or CMD-F on Mac to search for ‘og’ tags
The og tags should be displayed in your website code like this:
As I told you, if you have installed Yoast SEO or All in One SEO plugins, they will add the Open Graph tags automatically to your website. In the above print screen, you can observe that I use All in One SEO plugin. If you do not use an SEO plugin, you have some solutions to do it.
1. Add Open Graph from your WordPress theme
I know that some WordPress themes have a built-in Open Graph feature, so check the theme’s features.
2. Add the Open Graph using All in One SEO plugin
An SEO plugin is a must in any WordPress theme. To enable the Open Graph in All in One SEO, you have first to active the Social Media feature from the Feature Manager option of the plugin. To check if the Social Media feature is activated, you should see ‘Social Meta‘ option under the plugin. When selecting the Social Meta, the Homepage and Image settings are the ones necessary for Open Graph.
If you use the Yoast SEO plugin, select the Social Yoast SEO and press the Facebook tab. By choosing the ‘Enabled‘ button, the Open Graph for Facebook is added to your website.
3. Add Open Graph installing a plugin
If you search on the available plugins, there are some plugins to consider:
– Open Graph for Facebook, Google+ and Twitter card tags
– WP Open Graph
– OG
Manually Upload The Thumbnail Image
When you share a post on your Facebook account and the thumbnail is not displayed but a gray icon, the first solution is to add the image by uploading it.
OK, why the gray icon, in the first instance? Because in your SEO plugin, the default og:image is https://[Your_Website_Name]/wp-content/plugins/[SEO_plugin]/images/default-user-image.png, which is a gray icon like the one below. I gave you the URL format example from All in One SEO.
When you create a new post on Facebook with your new article, it will look like this:
To manually add an image, just click on the “+” sign. The uploaded image is stored in your page, on the photos section. Later, you can delete the image, but Facebook will continue to display the image. After manually adding the image, the Facebook post should look like this:
Set A Thumbnail Image For Facebook
The second approach is to set up a thumbnail image for Facebook. In your WordPress post, scroll down to your SEO plugin settings. I use All in One SEO, and you have to select the ‘Social Settings’ tab. Here, define the title and description of the post which are Open Graph properties.
To display the post’s featured image, select one Open Graph image from the image section and the default image will be overwritten by the selected one.
If you use the Yoast SEO plugin, open a post and scroll down to Yoast SEO settings and select the ‘Social’ tab. Select the ‘Upload Image’ button to upload a thumbnail image for Facebook.
I have tried both methods, but sometimes the thumbnail image was not displayed. There is another solution to this.
Facebook Debug Tool
The Facebook debugging tool is the easiest way to check the Open Graph issues. Access the Facebook debugger and paste your link. It will return the potential errors and suggestions for OG tags.
Now the image thumbnail should be displayed like in my post.
The debugger tool has two functionalities, one is about potential errors and OG suggestions and second functionality is that it clears the Facebook cache. Sometimes, the thumbnail image is still not displayed, but click the ‘Scrape Again‘ button (ones or twice), and your image will be displayed.
Some warnings are displayed, like ‘Missing properties’, but you can ignore it. When you get the response code 200 or 206, you are good to go.
What happens with old Facebook posts where the featured image is not displayed? In these cases, you can use Batch Invalidator option from the Facebook Debugger. Add a list of your URLs to invalidate the cache entries, maximum 50 URLs allowed. If you add more than 50, they will be ignored.
Facebook Tags
Now we will take a look at Facebook tags and let’s see how we can optimize them.
og:image
This an important tag for you when it’s about internet marketing. As I showed you earlier, select one Open Graph image from the image section and the default image will be overwritten by the selected one.
If you don’t set an image, Facebook will display the default gray image or in some cases nothing. There is an important note here; if you don’t use WordPress or any other content management system, you have to manually the og:image for all pages.
The minimum size of og:image is 600px wide by 315px high, however, the og:image resolution for Facebook is at least 1200px wide by 630px high.
In my example the og:image resolution is 1024px wide by 576px high.
og:title
This tag is for defining your content title. It’s similar with the title meta title code, and if you didn’t specify the og:title, Facebook would use the meta title tag.
As you can see in the above print screen, this tag will be displayed in bold, so find an eye-catching one, like the meta title tag you used for your article. Open Graph allows a maximum of 95 characters for og:title tag compared with 60 characters for the meta title tag.
In our example, the og: title looks like this:
og:description
In your article, you use a meta description tag, the og:description tag is similar. If you don’t specify og:description, the meta description tag will be used instead.
For every page there only 4 required metadata:
- og:title – the object title as it should appear
- og:type – the object type; in my example the used type is ‘article’. Depends on the object type, additional properties may be required
- og:image – an image which should represent the object
- og:URL – the canonical URL of the object
Conclusion
When you share on Facebook one article, you expect to be just right, but sometimes the image thumbnail is not displayed when sharing a post. You can fix this problem in a couple of ways manually upload a thumbnail image in Facebook, set a thumbnail image for Facebook in your content management system, like WordPress and use the Facebook debugger tool.
It’s important to check if your website has Open Graph which is a protocol introduced by Facebook that permits the integration between Facebook and a website. You can do this by enabling Open Graph to your theme or adding the Open Graph using an SEO plugin like Yoast SEO or All in One SEO or installing Open Graph with a plugin.
The tags described here are not the only ones available in Open Graph, check the other available tags.
By optimizing these tags you increase your chances in terms of views and clicks. If you want to learn to drive more traffic to your blog and to learn how to build a solid online business, check my #1 Recommendation. Everything I know I learned from Wealthy Affiliate and with a good strategy and dedication you can achieve online success.
