How Do I Make My Blog Look Good on Facebook?

This is a frequent question from clients, and one I thought easiest to address in a long-overdue blog post. This post is intended for past or future clients, as it assumes website features that are standard with the WordPress sites I build for clients – namely, the Divi Theme by Elegant Themes, and the Yoast SEO plugin. Both of these excellent tools do far, far more than I am going to cover here, as this article will discuss only how their use can make your blog posts look good when shared on Facebook or Twitter.

What Not to Do

Let’s say you want to share a post and have your logo show up in the Facebook or Twitter picture window. To demonstrate this, I’ve created an amazing logo:

image that says my really amazing logo

This image happens to be 1200 pixels by 200 pixels, and WordPress does a good job of sizing it correctly when placed right smack in the middle of the article.  Uglier things happen, however, when I set this as my Featured Image.

What is a Featured Image?

The Divi Theme (and many others) allow the user to set a “Featured Image,” which – in many cases – the theme will use when sharing the blog post on other parts of the site or on social media. There’s one at the top of this post you’re reading, in fact. This can be accessed at the bottom right of your post composing screen, and looks like this:

screenshot of featured image box in back of wordpress

I recommend, for my clients, that they use a featured image set to 1200 pixels by 800 pixels (a ratio of 3 x 2, for those keeping track.) This will still show nicely on bigger screens, while not putting a big drag on the time it takes the server to load the image.

If we put our 1200 x 200 logo in the featured image area, however, we get…

screenshot showing incorrect sizing of featured image

Oops!

Incorrect sizing does NOT look good in the featured image area of your blog post, as shown above.

Secondly, it doesn’t work on Facebook, where one of several things might happen when you share the link to your post :

screenshot showing facebook's image sharing defaultSometimes, Facebook will decide that your image is sized so far outside of their guidelines that it will revert back to the default image set for your entire site, as seen above. Sometimes, it will show no image at all.

screenshot showing bad image cropping on Facebook

Worse, it may use the featured image, but crop it is a really strange way that looks terrible (seen above.)

Ok, So That’s How Not to Do It. How Do I Make My Blog Posts Look Good on Facebook?

1200 x 800 is the size I recommend for your featured image, and will work well ON YOUR SITE. HOWEVER…

This is still not guaranteed to look good or even show up as an image when you share on Facebook. To remedy this, I recommend using the Yoast Plugin, which I install on most of my sites. It provides an interface right on the area of WordPress where you write your blogs, and looks a little something like this:

screen shot of yoast interface

If you don’t see it on the back end of your site, it may be closed. Look for a long tab that says “Yoast SEO” and click the down arrow far to the right.

Once you can see Yoast, click the sharing icon on the left.

screenshot showing Yoast interface in the back end of wordpress

This will open a screen that gives you much more control over how your site will share on Facebook. If, for some reason, you want to show a different title or description than shows on your site, you can change that here. Most importantly, for this article, you can upload a different image than the one used as your featured image. Facebook recommends a size of 1200 x 630. You may need to re-crop or change the size of the image used as your featured image, and upload the new version here. (That’s right – TWO versions of the same image to make it look nice on both your blog site and on Facebook. Twitter may need an even different size. To optimize for Twitter, click the Twitter logo at top of the Yoast interface and repeat. If you forget the sizing, Yoast has given a helpful reminder at the bottom of the screen.

screenshot showing correctly cropped logo image

I’ve created another version of my logo, sized at 1200 pixels wide x 630 pixels tall (as recommended in Facebook guidelines.) As you can see, I’ve added much more green space above and below my logo. This is what I uploaded to the Yoast Plugin, and now I’ll update the changes to my post and share the link on Facebook.

screenshot of article how do i make my blog look good on facebook

And there you go! As you can see, Facebook will now share my new custom title and description, along with a properly sized image that will not be cropped in strange and upsetting ways.

Here’s a tip. Sometimes, when you paste a link into Facebook, it does not retrieve an image. Don’t post. Just refresh the page and paste the link again, wait, and it will often appear. I have no idea why, but it doesn’t always grab your image at the first go.

Ok! That’s it for How Do I Make My Blog Look Good on Facebook. Next up, I anticipate questions on how to resize images. Yes? No? Please feel free to leave questions in the comments below!