How to Get Facebook to Show Your Blog’s Preview Images

This is the first article in a series about starting and running a blog. Since I’m spending a lot of time learning the ropes right now, I thought I should share! A blog can (supposedly) be a great source of extra income, so let’s talk business. Let me know what you think!

How to get Facebook to display your preview image correctly 

Have you noticed it can be really tricky to get Facebook to show your blog’s preview images properly? You go to share your link and there’s no image at all or, worse, it seems to pick some random photo. An attention-grabbing image is really important for drawing attention (and clicks) on Facebook, so you definitely want your hard work to actually show up! So what’s the deal?

I can’t tell you exactly why it happens, besides ascribing it to the vagaries of Facebook. C’mon, Zuck! But I can tell you how to fix it, and that’s what we really want, right? Here we go, step by step through how to get Facebook to show your blog’s preview images correctly.

  1. Try the Facebook debugger.
    This is the first step because it seems to work for most people, most of the time, and I don’t believe most bloggers want to do more troubleshooting than they absolutely have to. So, first things first: When you’re typing a post to share on Facebook and the image isn’t pulling in correctly, go to the Facebook debugger.
    Look for the search box, paste your URL, and click “Debug.”How to get Facebook to show your blog's preview images - step by step
    The debugger will show you a link preview, and if you scroll down a bit further you’ll see a section with Open Graph tags. Look for “og:image” and see what’s in there – that’s what Facebook will use for your preview! If it’s incorrect, press the “Scrape Again” button and see if everything is in order. If it is, you’re good to go!
    How to get Facebook to display your preview image correctly
  2. Tell Facebook explicitly which image you want it to use.
    If that didn’t work, you might want to use the Open Graph format to tell Facebook which image you’d like it to use. (Heads up – that link is to the full Open Graph protocol and there’s a ton of good information, but it can be a little overwhelming, depending on your propensity for techie stuff.) You can do this with a line of code called a “meta tag”, which goes in the <head> section of each web page – including your blog posts.The easiest way to set these meta tags is to use a plugin, and I recommend the Yoast SEO plugin. It’s got lots of other features that are helpful for getting visitors to your blog, but I’ll just talk about how we can use it for Facebook image previews here. Once you have the plugin installed, it will display a box at the bottom of your post editing page. Click on the sharing icon on the left (the one that’s kind of an open triangle) and look for “Facebook Image.”
    How to get Facebook to display your preview image correctly
    Now you can either upload the image you want or, if it’s already on your blog, you can just use the URL. (That’s the part that goes in the src=”” attribute of your img tags, if you look in the Text tab of the editor for WordPress. If you have no idea what I’m talking about, that’s OK – I’ll address it at another time!)Notice that you can also change the title and description that display on Facebook here. Handy, right? After you’ve published your changes, go ahead back to the Facebook debugger in step 1 and ask it to scrape again. You should now see the correct image! Nice!
    How to get Facebook to display your preview image correctly

You may also like

Leave a Reply

Your email address will not be published. Required fields are marked *