How to Use Facebook Debugger to Fix WordPress Links on Facebook

Last Updated on September 12, 2023 by 11 Comments

How to Use Facebook Debugger to Fix WordPress Links on Facebook
Blog / Resources / How to Use Facebook Debugger to Fix WordPress Links on Facebook

Most of us have posted, or have seen someone post, an article to Facebook only to see the wrong featured image display. Iโ€™ve often delete the post and reposted again just to find the wrong thumbnail posted again. Iโ€™ve even had to delete the preview and supply my own image, which causes another set of issues. This is a common problem with sharing WordPress content. Fortunately itโ€™s easy to fix using the Facebook Debugger.

In this article weโ€™ll take a look at what is causing the problem and how to use the Facebook Debugger to solve this headache completely. Images for the example posts were taken from Unsplash.com.

Whatโ€™s Causing the Problem

Facebook Debugger-Whatโ€™s-Causing-the-Problem

There are actually many causes for this problem, and it isnโ€™t always easy to know which one is causing your specific issue. The most likely cause is the improper use of og tags (Open Graph tags, set as og:image) where the featured image is smaller than the others.

When you share an article, Facebook tries to guess which thumbnail is the best to use. It does this by using og tags, and sometimes chooses a larger image than the one youโ€™ve set. Sometimes the og tag is missing. It can also be caused by cache plugins or hosting such as CDN systems not picking up the correct image.

It can also be cause by using an image size that Facebook doesnโ€™t like. Facebook recognizes images that are at least 200 x 200 pixels but prefers larger images of at least 600 x 315. A resolution of 1200 x 630 is ideal for large displays.

The problem can be solved several ways. One option is to manually upload the images yourself. The problem with this solution is clicking the image opens the image in a lightbox rather than taking the reader to the article and the image is stored in your uploaded images and on your timeline. This is only a partial solution as anyone else that shares your article will see and share the wrong image.

Perhaps the best solution is to troubleshoot the problem using Facebook Sharing Debugger. Although weโ€™re focusing on images here, the debugger will also test URLโ€™s, titles, descriptions, other types of media, and more.

Using Facebookโ€™s Sharing Debugger

Facebook Debugger-Using-Facebookโ€™s-Sharing-Debugger

The Facebook Sharing Debugger is available in the Facebook For Developers toolbox. This is a tool that will crawl your page and look at your meta tags and display errors. It will even test your HTML.

To use it paste in the URL of your WordPress post and select Debug. This will provide you with errors to fix. Once youโ€™ve fixed the errors, click Scrape Again to clear the cache so Facebook will see your new image.

The image has to be pre-cached before it will display in the sharing app. Youโ€™ll either have to pre-cache the image by running it in the Sharing Debugger, or use Open Graph tags (og:image:width and og:image:height) so the crawler can render it without having to process it first.

Facebook Debugger Examples

No image Set, Small First Image

Facebook Debugger-No-image-Set-Small-First-Image

This article doesnโ€™t have a featured image specified. It grabbed the second image instead of the first.

Facebook Debugger-No-image-Set-Small-First-Image-2

The Debugger tells me to provide the featured image. The reason it selected the second image over the first has to do with the size of the image. The first is 108 pixels. This is below the desired 200 pixels so Facebook ignores it.

Featured Image Too Small

Facebook Debugger-Featured-Image-Too-Small

Hereโ€™s a post using the small image as the featured image. Although the featured image was set, Facebook doesnโ€™t even recognize it.

Facebook Debugger-Featured-Image-Too-Small-2

Facebook gives me the option of choosing images from the article. The small image isnโ€™t even an option.

Facebook Debugger-Featured-Image-Too-Small-3

The debugger shows the image is too small. Replace the featured image with a larger image.

Large Featured Image

Facebook Debugger-Large-Featured-Image

In this example the featured image is 1080 pixels. It now shows the image that Facebook will display.

Facebook Debugger-Large-Featured-Image-2

This time it posted to Facebook with the single featured image.

Fixing Open Graph Tags

Facebook Debugger-Fixing-Open-Graph-Tags

Images is only one of the potential problems with sharing on Facebook. The main warnings youโ€™ll see involve og tags. This means the meta tags that Facebook wants are missing. The easiest fix is by using a plugin such as Facebook Open Graph or Yoast SEO. This will ensure that the image you want to display is the same image thatโ€™s shared when others share your articles, and it will provide the og tags that Facebook wants.

Facebook Debugger-Fixing-Open-Graph-Tags-2

This is Facebook Open Graph. It sets the og tags so Facebook will recognize them.

Facebook Debugger-Fixing-Open-Graph-Tags-3

Yoast SEO includes a Facebook title, description, an image selection for each post under the Social tab.

Final Thoughts

The Sharing Debugger is an easy way to see whatโ€™s causing problems with your shares. Itโ€™s worth the extra effort to ensure your posts are formatted so they share correctly on Facebook. Well-formatted articles get more shares and engagement.

Weโ€™d like to hear from you. Have you used Facebook Debugger? Let us know about your experience in the comments below.

Featured Image via I000s_pixels / shutterstock.com

Divi

Want To Build Better WordPress Websites? Start Here! ๐Ÿ‘‡

Take the first step towards a better website.

Get Started
Divi
Premade Layouts

Check Out These Related Posts

9 Non-Profit Child Themes for Divi

9 Non-Profit Child Themes for Divi

Updated on January 23, 2023 in Resources

There are lots of nonprofit organizations across the globe. Just about every one of them needs a well-designed website to tell their story and receive donations to help their causes. Divi is an excellent theme for nonprofits such as charities. Fortunately, you donโ€™t have to start from scratch for...

View Full Post

11 Comments

  1. How about keeping the aspect ratio of the original image? FB always seems to crop, often slicing of important parts of an image. Is it possible to have FB maintain the aspect ratio of the original featured image?

  2. useful information, thanx

  3. Thank you, Randy!

    Several clients have asked me how to change it, where I have been blank.

    This is very good to know. Thank you.

  4. This is an amazing post. I really need it. because I have a huge page and sometimes the wrong images appeared.

  5. This is awesome! It’s a waste of traffic when the uploaded image is opened on lightbox. I appreciate this post Randy. Thanks!

  6. I attempted to post a comment with content linking to a plugin that I authored. I didn’t read the comments policy thoroughly and I apparently overlooked the point about refraining from posting links in the comment body. My apologies!

    Thank you for writing/sharing this post, Randy. The ET blog posts are very informative; one of the few email subscriptions I have that I actually look forward to receiving!

  7. Thank you! One of the last steps I take before launching or updating a web project is to run each URL through Facebook’s debugger to ensure it will present well when shared. I wrote a lightweight debugger plugin to fast-track this process for me, and decided to publish so it can help others! https://wordpress.org/plugins/dts-debugger/

    It seems to play nice with ET products and Divi.

    ET: Thank you for your amazing products and continual updates/upgrades/improvements. I tested the waters with a one-year subscription, but I’ll for sure be nabbing that lifetime membership!

  8. IMHO, this is one of the most useful and timely reference posts yet. Thanks!

    • Thanks Ben ๐Ÿ™‚

  9. I need to add to this article….I use Facebook debugger and Yoast all the time to manage these issues. Yesterday, while this approach was taking care of the issue on desktop display, it was not on mobile. After searching for what felt like hours and yielding nothing, I had a brainwave and decided to run Facebook Debugger directly on my mobile device. Boom! The issue was solved. Pro tip #5846 ;-).

    • Thanks Natalie!

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Get Started With Divi