Table of Contents
Have you ever tried to share something from your website to Facebook only to have the image cropped funny, or have Facebook not share an image at all? It’s so frustrating to spend your valuable time creating great content on your website or blog and then have it look terrible when shared because you can’t figure out how to specify which image Facebook uses for your website…or how to make it the right size.
Good news…there is a simple two-step solution: design the right size image and upload it to the right place on your website. Sounds simple, right?
The problem I’ve seen with many websites is that the authors are putting their image in as the “Featured Image” for the blog or page and that image is not always the correct size for Facebook. If you’ve got a great web designer they may have made the featured image the same size as required for Facebook link shares, but this is actually quite rare. So, depending on that featured image in your blog is probably your problem! If you look at this blog, for example, the featured image is that nice, wide feather image at the top of the post. But when you click to share this post on Facebook, it will share a completely different, optimized image.
Currently, the optimal size for Facebook link images is 1200 x 630 pixels and the optimal image size for the Twitter image is 1024 x 512 pixels, but you can often get away with using the Facebook image in both places (just try to keep your text and images away from the edges). Many DIY graphic design programs have templates for this, but make sure it matches these dimensions.
Every website system has a way to specify which image Facebook uses for a page on your website. If you don’t specify what image Facebook should use when linking to your blog post, it’s going to look like the image below: no photo. Without a photo attached to the link it is less likely to catch people’s attention in the newsfeed. And if you don’t specify which image to show, Facebook might pull your logo or any random image it can find.
The good news is that it’s generally very easy to communicate to Facebook which image to use. You’ll want to do this for each and every page on your website, especially pages you or your audience share regularly.
[click_to_tweet tweet=”Ever get frustrated with the image Facebook shares when you link to your website? Here’s a simple two-step process to fix it!” quote=”Ever get frustrated with the image Facebook shares when you link to your website? @AnitaKirkbride shares a simple two-step process to fix it!” theme=”style6″]
Using YOAST SEO Plugin to Specify Facebook Image in WordPress
YOAST SEO is one of the most useful and most common WordPress plugins for social media and SEO. I highly recommend it for managing both what Google sees and shows to searchers, and for your Facebook image specification. It also can help you communicate image details with other social networks.
In the Yoast SEO window, click on the Social tab.
Choosing what image Facebook will show is as easy as popping it into that box. While you’re there do the same for Twitter.
Now when you, or anyone else, share(s) the link to this page, Facebook will use the image you’ve designated. No more blank images. No more empty headers, or headlines full of nonsensical keywords.
Using Social Warfare Plugin to Specify Facebook Image in WordPress
Another awesome option for managing Facebook Open Graph metadata is the Social Warfare plugin. I use this plugin even though I also have YOAST because they have some proprietary features I like. Social Warfare (aff) does not help you plan your SEO efforts or edit your Google snippet, while YOAST does. Social Warfare does, however, offer Pinterest image control and the ability to craft the tweet your readers will share when they click the button to share on Twitter.
To set the Facebook image in Social Warfare, you’ll scroll below your blog compose window and look for this:
Similar to YOAST, just upload your 1200 x 630 sized image to the “Social Media Image” box and craft your social media title and description. Social Warfare doesn’t specifically call this the “Facebook” image as it will also work for other social media if your link is shared there.
How Does Facebook Use Your Blog Image?
If you’ve done the work properly, when you share the link on Facebook, it will look more like this image (I added all the text above the image in my post).
The designated image is used, and it’s the proper size so it didn’t get cropped off! The blog title is pulled in as the headline as well.
What if Facebook STILL Isn’t Showing the Right Image?
Sometimes you go through all this and head back to Facebook to confirm your work and BLARGH, Facebook is still showing the wrong image! This happens because Facebook stores an image for each link shared on the platform and when that link is shared again, it uses the stored image. If this happens to you, don’t panic! You probably did it right and you may simply need to prod Facebook to have another look. Facebook even gave us a way to do this!
Here’s how to use the Facebook Debugger:
- Open a new window and visit https://developers.facebook.com/tools/debug/.
- Paste the link to your blog post into the Sharing Debugger window and click “Debug”.
- Scroll down to the Link Preview box. If the info and image are incorrect, scroll back up a few lines and click “Scrape Again”.
- Check the Link Preview box again. If you’ve input the images and info correctly, it should now show here.
- You may need to run this link through the LinkedIn Post Inspector and the Twitter Card Validator as well.
Now off you go! From here on you need to be adding the Facebook Open Graph metadata to each and every post and page on your website, and you’ll want to slowly go back and add it for all of your old posts, too, because you are recycling those old posts, right?
Let me know if this is helpful!
