4 Reasons why your Facebook Share Image & Content is Not Showing Correctly

Are you facing any issues with your Post’s Share Image & Content not showing correctly while sharing it on Facebook. Let’s see how to sort it, so images & post description shows perfectly 😉

Facebook uses Open Graph Meta tags to pull up Post’s title, description, images etc. In other words, these tags also give us the ability to modify the way it shows the posts on the Media.

So, using these tags … we can tell Facebook which Image, Title or Description should it show as a preview for the blog.

However, there are times when… things don’t go as planned while sharing your posts on Facebook.

Sometimes, Facebook crawlers pick the things from post which they shouldn’t pick or they are unable to pull the post information to show the same.

Which can cause some of the issues while Sharing.

So, in this post, I’m sharing the reasons that I found for these issues, and How To Resolve these as well.

Reasons behind Featured Image or Meta Data Not Showing Correctly on Facebook Share

There can be mainly 4 reasons for, a post’s featured image or meta data not showing Correctly or not showing at all, & below are the same :

1. Image Ratio & Size: When your featured image’s ratio is not under Facebook Crawler’s recommended ratio & size. You might see cropped versions of image in Shared post on Facebook. Or, you might see like this, which Louise Myers shares on her blog:
2. Feature Image / Metadata is already Cached : When we share a post on Facebook, it caches the Post data until we manually ask it to update the same. So, if you are getting an Older Title, Description or Image. Then, it might have been shared earlier for testing or something else.
3. Facebook Bots are unable to access the Website: This usually happens due to Security or Caching plugins which can block Crawlers from accessing Post’s data. So, In case Facebook bots either get blocked or get served with Cached Pages; You might need to sort it. I’ll explain how to below.
4. Open Graph tags (og: ) are not present on Post / Website : In this case, Facebook crawler would pick something random from page which it think is relevant to the post or might not pick anything at all. This means, we let the bot decide what it thinks about post.

Solution(s) to Facebook Sharing Issues:

Earlier we saw the possible reasons, for a Post to have wrong or no Title, Description & Image on Facebook Share. And now, we are going to Solve the same.

So, let’s jump into these.

• #1 Facebook Image Ratio & Size
• #2 Facebook Showing Old Data
• #3 Facebook Crawler / Bots are getting blocked on Website
• #4 Open Graph tags are not present on Website
  • #4.1 Updating Certain Posts / Pages on Website for Open Graph Meta Data Code

#1 Featured Image Ratio & Size:

For Facebook to show your Post’s Image(s) correctly, it should follow Facebook’s site structure.

I mean, you wouldn’t show a 1800*2000 Pixel image in 1920*1080 ratio Grid on your Website, right? If you would, you might crop the image as well like Facebook does using tools to fit the grid.

That’s is why … to help your posts & users have the best experience on Platform. Facebook has certain guidelines for Images that are shows on it.

And … here’s the basic Image Guideline for it:

Recommended Featured Image Size: 1200 x 628 pixels | Minimum width and height being: 600 pixels

Featured Image Ratio: 9:16 to 16:9, but it crops to 1.91:1 with a link

If your Featured image doesn’t follow the above criteria; It might not be shown correctly on Facebook.

I.e. Facebook might show slightly cropped version of it or might not show it at all on page. So, in case your post’s image is getting cropped while sharing. This would be the issue, you might want to tweak the image, so it is created using a certain ratio & size that follows crawler’s expectations.

Here’s the same example as above from Louise Myers’s blog:

If the Post is getting shared on different platforms. You can pick the ratio & size that is closer for all the Social channels that your Prospects are on.

Or, you can have different images based on platform which use different tags. E.g. Twitter has twitter cards, wheres Facebook & LinkedIn uses Open Graph Meta Tags.

Note:

• Once you update, the images, follow Step 2 to ask Facebook to update the Post’s Meta Data for Sharing
• You can have higher Featured Image Size, but it must follow the image ratio to be shown properly.

You can check more about various Sizes & Ratio Guidelines at https://sproutsocial.com/insights/facebook-ad-sizes/

#2 Feature Image / Metadata is already Cached : How to ask Facebook to Update Post Data

Facebook’s crawler always wants to crawl through less & less pages. The reason being, it doesn’t need to show search results in same way Google does.

Google tries to index more and more pages … updated pages to serve right results to users.

However, Facebook being a Social Network. It focuses on what people are sharing on its platform; it couldn’t care less about other things on Web.

So, it’s crawler is kind of slightly lazier than Google’s 😉

As of now, Facebook’s crawler is programmed to cache the Page/ Post data when post is shared for the first time on Facebook.

It’s like capturing a screenshot of Page’s meta data … and it keeps it the same way. Unless … we ask it to update it.

Which sometimes causes issue for Content creators.

When we share a post on Facebook, and update the Featured Image or meta data at a later stage. Then, unlike Google, it doesn’t Auto update the details.

Thus, we ask it to update the details manually using it’s Facebook Debugger Tool.

This is also the first step to resolving any of Facebook sharing related issues. If it is related to Featured Image, then you usually start with checking ratio & size.

Then, if it doesn’t resolve the issue; or if the issue is related to meta data then this becomes the First Step.

Here’s how to do it:

1. Visit Facebook Open Graph Debug tool at : https://developers.facebook.com/tools/debug/
   
2. Type the page / blogpost URL in box and Click on Debug. This will show url preview as it would show on sharing the URL.
3. Click the Scrape Again button in Time Scrapped Column

This should clear the Facebook cached metadata for post/page, and should show the updated preview.

If above thing doesn’t sort the issue, there might be 2 cases …

• Either there are no Open Graph meta tags on page to pull the appropriate data
• Or Facebook bots are getting blocked on Website

So, let’s see how to sort the later one first.

#3 Facebook Bots Getting Blocked on Website:

It generally happens because of Caching or Security Plugins on Website. This one happened with me as well. I installed W3 Total Cache, which kind of serves the cached pages to bots, as if was not specified properly.

So, I had to add following lines in Page Caching Settings for it:

facebookexternalhit
FacebookExternalHit/1.1
FacebookExternalHit/1.0

Here’s how you can do the similar thing for W3 Total Cache:

1. Visit /wp-admin
2. Click on Performance >> Page Cache
3. Look for Rejected User Agents and update the code (which I mentioned above)
4. Click on Save
5. Clear Cache and Debug one of the URLs using Facebook Debugger Tool

This could also be due to various other plugins too, but the concept would remain the same, if there is Sucuri, or Mod Security installed.

You can ask respective support channel to make sure Facebook Bots are not getting Blocked or two are not scrapping Cached pages on site.

#4 Open Graph Meta Tags are Not Present on Website

This could be one of the reasons of your post data, not getting shared properly on Facebook. If there are no Open graph meta tags on Page, then Facebook might pick random data from Page for Image.

You can read more about open graph tags here or you can also check this medium post as well for knowing how to use Open Graph Meta Tags

So, now here’s how to check if these are on Website or not:

1. Visit any page on website
2. Right Click on page & Click View Source
3. Check if there are any og: tags on page ( Ctrl + F to open find window & Command + F on a Mac; then search with og: )

If you find the og:tags then it is not the case. Then it might be caching or Crawler getting blocked issue. If not, then you can use plugins like Yoast on WordPress, or you can find appropriate plugins based on platform you are using.

#4.1 Updating Certain Posts / Pages for Open Graph Tags

When you need to update certain element of meta data using code e.g. image on a certain page. You can update the code directly on page / blog post as well.

No matter which platform or tool you are using. Simply add the Open Graph tags in head section, and it will get sorted.

Some of the example lines are as follows, you can simply Copy, Edit & Paste if you want.

<meta property="og:title" content="Title of the Page" />
<meta property="og:description" content="Page Description" />
<meta property="og:url" content="https://mohandhanwani.com/facebook-share-image-not-showing/" />
<meta property="og:site_name" content="Mohan Dhanwani" />
<meta property="og:image" content="https://domain.com/wp-content/uploads/image_name.png" />
<meta property="og:image:width" content="1920" />
<meta property="og:image:height" content="1080" />

For quick information on all the tags, you can check following two links:

1. Open Graph Protocol Website at : https://ogp.me/ (List of all the Open Graph tags that are available)
2. Medium Post at https://medium.com/@nishantasthana/what-are-facebook-open-graph-og-tags-and-how-to-use-them-on-your-website-d35fa70fb14f (Basic way of adding the code on site)

Hopefully, above solutions will resolve the issue for you. If it doesn’t. Feel free to let me know in comments, and I’ll help you sorting the same.