01 Dec 2020

The Image on Sharing my Facebook Post to WordPress Looks Weird

0 Comment

Facebook incorrectly croppedHave you ever spent some time writing an article on your blog, carefully selected an image and then share the link to your article on Facebook only to find that the image on the Facebook post was cropped or came out strange In the feed?

This is happened to me many times, and for a long time I just put up with it. I figured it was just a quirk of Facebook. You know, the image gets cropped in weird places, or comes up with something altogether different than the one that I have my post. Sometimes the Facebook post wound up with the image from the homepage, sometimes from an entirely different page, and sometimes it wouldn’t use an image of all.

It was very annoying because the image is an essential part of attracting people to my article  or story.

Image Size

As it turns out, Facebook wants images to be a certain size: a that is a multiple of  1,200 pixels wide by 630 pixels high. Facebook also prefers larger images at 300DPI.

Anything smaller is going to be  enlarged to fit, and if the dimensions don’t come out correct, Facebook will crop  whatever it thinks is appropriate.

If the image is larger, Facebook will shrink it down, and then crop off anything that doesn’t fit.Example incorrect sizing for Facebook Post image

For example,  let’s say you had an image that was 1,300 by 630 pixels. Facebook would crop off 50 pixels from each side.  On the other hand, if you had an image that was 1,300 by  700 pixels, Facebook would shrink that image down, then crop off anything that Remained and didn’t fit.

A shared WordPress post cropped incorrectly by FacebookThe first image, to the right, is the incorrect size, and the top and bottom of the image will be cropped. . The second image is sized correctly and will show perfectly when a page is posted to Facebook.

 

What image to use for your Facebook Post?

Another factor is that the first time that Facebook looks at your page it attempts to figure out which image to use  for any posts.

If you install the plug-in Yoast SEO plug-in (which is free) or something similar, you have the ability to specify exactly which image  you want Facebook to use for posts.  It’s a good idea to take advantage of that for there is no longer any ambiguity. Note that Yoast SEO also allows you to specify a title and description for the post, and this is also recommended because otherwise Facebook will try to figure out what to use on its own, and that’s not always exactly right.

If that image is not specified, Facebook will search to the page until it finds one  that it thinks is suitable, and I haven’t found any pattern yet that it uses to determine which to use.

Image Cache

The first time Facebook scans your page,  and figures out which image to use, it stores it  somewhere  so that it doesn’t have to look later. This generally isn’t a problem, unless, of course, you  make some changes to the page such as using a different image.In this case, When you attempt to post the page to Facebook,  it will use the wrong image.

In that case, go to this page:

https://developers.facebook.com/tools/debug/Facebook Debugger to Fix image problems

And put in the link to your page to force Facebook to load the new page into it’s cache (it’s own private copy.) If that doesn’t work, press the button “scrape again” – I’ve had to press it as many as six times to get it right.

The example to the right (click on the image for an expanded version) shows the debugger used to get a page which shows the correct image.

Doing all of these things ensures the images for yours blog posts are correct when posted to Facebook.

 

[top]
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x