Feature image not displaying on FB- OG:image issue?

Hi @marikane

Upon viewing the page source of https://www.wildrootjourneys.com/2021/07/27/36184/, we don’t see any open graph output from the Yoast SEO plugin at all, which is strange.

Did you disable the open graph feature under SEO > Social > Facebook?

If not, often, we see problems occur in combination with another plugin or theme. The fastest way to rule out any conflict, is to deactivate all non-Yoast plugins and switch to a standard theme like Twenty Twenty.

Please test this on your development or staging site, if you have one. If not, we recommend using the Health Check & Troubleshooting plugin. This plugin has a troubleshooting mode, which does not affect normal visitors to your site.

If you’re unfamiliar with checking for conflicts, we’d like to point you to a step-by-step guide that will walk you through the process: How to check for plugin conflicts

With a default WP theme such as TwentyTwenty, and only the Yoast SEO plugin enabled, could you then check if the expected open graph tags are generating in the page source?

Hi Micheal-

Thanks for the quick response. You were right, I had disabled the OG feature for testing, but thought I’d enabled it again before submitting this.

It is enabled now. Would you mind taking a look again?

Like I said, I did the plugin conflict check and nothing worked.

Thanks so much!
Mari

Hello Mari,

Thanks for the feedback. There is now open graph output from the Yoast SEO plugin. For https://www.wildrootjourneys.com/2021/07/27/36184/, the og:image in the page source is https://www.wildrootjourneys.com/wp-content/uploads/2021/07/Big-Tree-scaled.jpg. However, the image throws an error 403. Can you have a look at the image from your end?

Thanks Maybellyne-

This issue is not limited to the one image, but all of them.

As I mentioned, the source file shows this OG:image as:

og:image” content=”https://www.wildrootjourneys.com/wp-content/uploads/2021/07/Big-Tree-scaled.jpg” /><meta

While in Dev Tools, the image source calls for

<img src=”https://www.wildrootjourneys.com/wp-content/uploads/2021/07/Big-Tree-1080×675.jpg”

For all of the images, something is adding the image size to the permalink.

Here it calls for /Big-Tree-scaled.jpg but it is getting /Big-Tree-1080×675.jpg

Having checked this anomaly against other sites, I’m thinking that is causing the problem. But I don’t know what is causing it or how to fix it.

Perplexed in Vancouver…

Thanks for following up with us on seeing the resized version of the featured image in the og:image meta.

Whenever you upload an image (it could be either a featured image or an image embedded directly into the content), WordPress automatically creates 4 different image sizes:

• Thumbnail size (150 x 150 pixels)
• Medium size (maximum 300 x 300 pixels)
• Large size (maximum 1024 x 1024 pixels)

WordPress does this, so you don’t have to keep resizing images manually and to ensure the best image size is selected for different locations on your website.

So, Yoast SEO automatically chooses the large image size for the og:image meta. If you don’t wish to have the resized image in the og:image but you’re uploading images that are bigger than Facebook’s recommended size, those won’t appear when you’d share them on Facebook either. So, it’s better to have the resized version.

Thanks Md-

Ok, so what I hear you all saying is that the size addition to the image URL is not the reason the Featured Image is not appearing on FB, which was my theory.

If not that, then why is the image failing to appear in FB posts?

Again, FB Debugger points to these errors:

Inferred Property
The ‘og:image’ property should be explicitly provided, even if a value can be inferred from other tags.

Missing Properties
The following required properties are missing: og:url, og:type, og:title, og:image, og:description, fb:app_id

Thanks for your help!

Right, the size addition to the image URL isn’t the reason the featured image isn’t appearing on Facebook.

So, why the featured images aren’t appearing for you when sharing pages from your website to Facebook?

• https://www.wildrootjourneys.com/2021/07/27/36184/
• https://www.wildrootjourneys.com/about-us/

We looked at the above pages from your website and can confirm that Yoast SEO is outputting the following images (respectively) as the og:image meta:

• https://www.wildrootjourneys.com/wp-content/uploads/2021/07/Big-Tree-scaled.jpg
• https://www.wildrootjourneys.com/wp-content/uploads/2021/06/IMG_20200525_121530_080-scaled.jpg

However, both of the images are showing 403 forbidden HTTP status codes instead of showing an image and that explains why Facebook isn’t showing the featured image when you share a page from your website even though Yoast SEO is outputting the correct image file reference.

To fix the issue, you’ll need to go to the relevant media files or edit the relevant pages again to make sure the relevant images exist. If they do, make sure the relevant images are accessible from outside of your website. If you’re unsure about this, your web hosting provider would be the best place to assist you with this.

We are going ahead and marking this issue as resolved due to inactivity. If you require any further assistance please create a new issue.