How can Facebook Debugger help you fix WordPress images?

“All problems become smaller when you confront them instead of dodging them.”

~ William F. Halsey

What is Facebook Image Debugger tool and how does it work? Learning about this handy tool will help you to share the content on Social in the right way. You know, without all that fuss and discomfort that comes when your posts are just not working when shared.

What kind of issues Facebook Debugger solves?

You know those situations where you share something on Facebook and the image won’t show up? Or is too small? Or the post comes with the image, but it’s the wrong one? Maybe, you’ve changed the image but the old one keeps popping up? Well, all that you can fix with the Facebook link debugger. And before you think it’s got something to do with your WordPress site, it’s not. Well, kind of, but I’ll explain that in just a bit 🙂

The tool itself is straightforward to use and can come in handy in numerous situations so keep an eye on it.

What is Facebook Debugger?

Facebook Debugger lets you preview how your content will look when shared to Facebook. It’s a tool you can find within Tools & Support on the Facebook Developers site, among many other useful things. How does it work? Just like caching, Facebook too needs a push in order to take the right information from your site. It uses Open Graph protocol that enables any web page to become a rich object /web pages into graph objects/ in a social graph. That means, Facebook can „read“ the content on your site easier and more precise, which will ensure your content is shared correctly. And those rich objects are pieces of code that tell Facebook what your page/post is about. Much like the tags in WordPress. This service was developed back in 2010., to help developers and content creators gain control of the way their content is shared on Social. You might wonder if you have them on your site or not, right? Well, chances are you do, because many plugins add them automatically. Plugins like SEO Yoast or Social Warfare and similar, if you have them, you have OPG as well.

And, the best part of it is that you don’t need any coding knowledge to use this handy service. Speaking of which…

Now, how to use the Facebook Debugger tool?

Couldn’t be easier than this! To crawl through your page, all you need to do is to paste the URL and click on the Debug button. Once you do that, the first thing you’ll see is the info about what needs to be fixed:

The second part of the scraped details tells you when and how the URL was scraped, information about canonical and fetched URL:

The third part of the Facebook Debugger result shows you live preview of the URL once you share it on Facebook. All the details, title, description and the photo are there for you to check and see if it’s all good for sharing.

Also, this is the part where you’ll see if there’s anything wrong with the image. Like, if Facebook sees a different one or if there is no image at all. Just look up for a section „og:image“ and all the information will be stated there. A missing or a wrong picture, maybe a different format than what’s recommended – all that will be displayed as a problem you can fix. And how do you do that?

Just click on Scrape again, and the right image should appear. All that’s left to do is share the scraped link on Facebook, and you’re good.

How to set up Open Graph metadata?

If you’re wondering whether you have Open Graph metadata or not, rest assured. If you’re using any of SEO plugins, you have it.SEO Yoast, for instance, has a simple way to handle it just within the Social feature. All you need to do is enable the Open Graph, and you’re all set to go.

Also, in case you have a page or pages that don’t have any images, you can set up a default one to show each time you share it on Facebook.

Conclusion

Just as easy as caching your WordPress site, Facebook image debugger is equally easy to use. And, one final tip, especially if you’re changing something on your WordPress blog or website. Clear your WordPress cache and then use Facebook URL debugger so that the changes are implemented and on the spot. You’re welcome.

Hopefully, you’ll find this Facebook debug tutorial helpful and useful. If that’s the case, feel free to share it with your friends and give us a shout-out, so more people can learn new tricks.

Ivana Cirkovic

Ivana is a Digital Marketing, PR and Social Media consultant with over nine years experience in the field. She is also a WordPress enthusiast and an active member of WordPress community who lives online almost 24/7. In love with Twitter, WP, photography and NYC.