How to Exclude Featured Image from .Webp Format

Hi Charbel,

Thanks for reaching out and sharing your kind words on the plugin. Glad to hear you like it.

Regarding your query, the plugin only modify the HTML for both the content with the_content filter and the featured image with the post_thumbnail_html filter. As this implements the WebP image only in specific instances it shouldn’t impact the source image used for the Open Graph meta, although I’m happy to check this further. In order to do so can you let me know how you’re sharing any article, and what plugins if any you’re using? Alternatively if you wish to share your site URL I can perform some checks.

Note also that you can remove WebP images generated by the plugin for featured images only if you wish, by removing the filter in use. In order to do this you can add the below, preferably to a child themes functions.php file or a custom functions plugin:
remove_filter( 'post_thumbnail_html', 'webp_uploads_update_featured_image', 10 );

Let me know if you have any questions with the above.

Hello @jamesosborne,

Thank you for your kind reply, much appreciated!

Here is my site address: https://charbelnemnom.com

Here is one of my recently published articles: https://charbelnemnom.com/delete-microsoft-sentinel-analytics-rule/

If I share it on Twitter, we can see the Featured Image. However, if I share it on LinkedIn and Facebook, the Featured Image won’t be shown, and the OpenGraph Thumbnail image from RankMath SEO will be shown.
More details here: https://rankmath.com/kb/open-graph-image-not-displaying/

Your help is highly appreciated before I add the remove_filter for the Featured Image only under functions.php.

Many Thanks, @jamesosborne!

• This reply was modified 1 year, 11 months ago by Charbel Nemnom.

Hello @jamesosborne,

I just want to let you know that I have added the following filter to my functions.php file, however, the plugin is still generating WebP images for Featured images.

remove_filter( 'post_thumbnail_html', 'webp_uploads_update_featured_image', 10 );

So, it did not work as you noted.

Could you please advise?

Thank You!

Many thanks for your patience on this. I’ve been performing some tests with Rank Math and the Performance Lab plugin. In my case I don’t see any issues on my test sites when sharing. I also tested without RankMath, with the .jpg version of any featured imaged being used for OG:Image data as expected.

From checking the latest URL you provided I can also see that your featured image differs from the OG:Image data when checking your sites source code. The OG appears as below:
<meta property="og:image" content="https://charbelnemnom.com/wp-content/uploads/2021/06/CN_NewHeader_OG_2021_1200x630_v1.jpg">

In my case the above image (which isn’t your featured image) does appear when sharing, this is also expcted given it’s the image within your OG:image metadata. When using the Facebook sharing debugger or previewing a share from Facebook this image above is also correct. If you have an OG:image value defined this is the one that will appear when sharing.

From testing Rank Math it also looks like you can define an OG:Image independently of any image within your content, or independent of your features image. Here’s a recording of the setting. You may wish to use this if you wish to define a specific image only for OG data, should you encounter any issues with preview images not appearing when sharing.

Note also that Twitter uses it’s own twitter:image data, with OG:image as a fallback. I didn’t see any Twitter data for that URL you shared however this link might provide some insights into how Twitter generates it’s preview image if Twitter specific meta data isn’t used.

Let me know if you have any further questions with the above. You also won’t need to remove the feature image webp generator filter suggested above if you wish to define your OG:Image using Rank Math.

Update based on your last reply: With regards your latest query if you’ve applied the filter can you give me an example of a post created after applying the filter and I’ll take a look? I’ll also test this on my side.

• This reply was modified 1 year, 11 months ago by James Osborne.

Hello @jamesosborne,

Thanks for the analysis, much appreciated!

Please note that the OpenGraph Thumbnail in RankMath will be only used when a featured image or an OpenGraph Image is not set for individual posts/pages/CPTs, this image will be used as a fallback thumbnail when the post is shared on Facebook.

However, this is not the case. I have a featured image selected/set for my post as you can see here before the Post Title: https://charbelnemnom.com/delete-microsoft-sentinel-analytics-rule/

The OG Image URL you shared below is to be used as a fallback thumbnail only.
I am not sure why the featured image differs from the OG:Image data when you checked the source code. This is weird, how can we debug this?

<meta property="og:image" content="https://charbelnemnom.com/wp-content/uploads/2021/06/CN_NewHeader_OG_2021_1200x630_v1.jpg">

Here is the setting in RankMath global settings:

I always have the Featured Image to be used as OG:Image by default, yes, I noticed that I can configure it independently by single post in RankMath if needed. However, I tried this option and it didn’t work. It’s always falling back to the one that I set in Rank Math under DASHBOARD / SEO TITLES & META.

The issue is about .webp with Facebook and LinkedIn.
As noted by RankMath, Facebook currently supports only jpeg, png, and gif image formats. So if you’re trying to add an image of .webp or any other format, then Facebook and similar social media platforms might not be able to recognize them.
That’s why in my case, it falls back to the OG Image that I set in RankMath here:

How can we solve this issue, please?

In regards to the filter, I did not create a new post after applying the filter.

remove_filter( 'post_thumbnail_html', 'webp_uploads_update_featured_image', 10 );

What I have done, is I removed and deleted permanently the featured image for that post and then uploaded a new JPG image with a different file name.
So, it’s the same post here and not a new one: https://charbelnemnom.com/delete-microsoft-sentinel-analytics-rule/

I need to solve the existing post (Featured Image) so I can share it on Facebook/LinkedIn.

Your help is highly appreciated.

Many Thanks @jamesosborne

• This reply was modified 1 year, 11 months ago by Charbel Nemnom.

Hi @cnemnom,

No problem, happy to assist. From testing this further the issue you’re facing doesn’t seem specific to the Performance Lab plugin. Note also that the plugin doesn’t add any Open Graph meta data to a users site.

For example you’ll find in this video that with only the Performance Lab plugin active (no Rank Math or other SEO plugin) that Facebook won’t insert any image by default when sharing, from the content or as a featured image, until the Sharing debugger is used. In this case there was no OG:Image defined. This is the same regardless of whether you use a webp image generated by the Performance Lab plugin or not.

If I don’t use any plugin, and only insert a JPG image as the featured image, Facebook will not show any image until I either define an OG:Image or use the Facebook Share debugger one more. You’ll find an example of this by viewing this screen recording. It’s not specific to WebP, nor the Rank Math plugin.

I also recorded another example with webp images and Rank Math, without the Performance Lab plugin active. You’ll notice that Rank Math does ensure that the featured image does appear, I assume using the OG:URL metadata. You’ll also notice that the Twitter card data appears, highlighting the twitter:image data as the webp image, resulting in no issues with the webp image appearing when sharing on Twitter.

From reviewing the URL you provided once more, I can again see that the og:image defined in that URL you shard, doesn’t use your featured image. This is why you won’t see your chosen featured image when sharing. I can’t state why this is the featured image defined, although it’s not the Performance lab plugin defining this.

If you are looking to use your selected Featured image when sharing you may wish to review your Rank Math sharing settings.

Hopefully the above is of use. Thank you!

Hello @jamesosborne,

Thank you for the analysis again, much appreciated!

It looks like the issue started to happen after October 19, 2022.

Example: After October 19, 2022:
https://charbelnemnom.com/delete-microsoft-sentinel-analytics-rule/

And Before October 19, 2022, the OG:image is set to my Featured Image correctly. Check this:
https://charbelnemnom.com/backup-and-restore-microsoft-sentinel-watchlists/

I found out that RankMath did an update on October 21 which might be the issue of this case. I am in contact with them.

In all cases, I removed the filter that you shared with me from my functions.php.

Thank you again!

That may indeed be the cause, it’s difficult to tell. But great idea to get in touch with them for further troubleshooting! Best of luck, and be sure to reach out if you have any Performance Lab queries.

Hello @jamesosborne,

Please I need to come back to this issue.

As I’ve noted about RankMath. They checked my site and here is the confirmation.
//
I can check that the featured image of the post is in WebP format. The Open Graph only supports image/jpeg, image/gif, or image/png.

You can also check this link for the standard image file extensions supported by Open Graph:
https://developers.facebook.com/docs/sharing/webmasters/#images
Please use the supported format to fix the issue.
\\

Please I need to exclude the Featured Image from WebP format.
The filter below is not working.

remove_filter( 'post_thumbnail_html', 'webp_uploads_update_featured_image', 10 );

Please watch this video. You can see that the Featured Image in the Front End for both posts is WEBP, however, in the Editor mode, you can see the article which has the OG:IMAGE set incorrectly, the Featured Image is in WEBP and not JPEG.
Why Performance Lab is setting WEBP for the Featured Image exclusively.

Your help is highly appreciated.

Thank You!

• This reply was modified 1 year, 11 months ago by Charbel Nemnom.

Hi @cnemnom,

I believe the issue you are facing isn’t related to webp images. I say this as when sharing a features jpg image on Facebook without RankMath or the Performance lab plugin Facebook won’t include the image, see this recording. In this scenario there is no og:image meta data.

What you’re facing also with your og:image data is that the image defined is not your featured image. You can check this by reviewing your sites source code on the same URL you provided.

With regards the link you provided on Open Graph not supporting webp images it states the images it does support however this may possibly be outdated. See this link, and preview a share of this article with a webp image defined as the og:image. You’ll see the image (webp) does appear. I added Open Graph meta data manually for this specific post on this page, not using a plugin. The only image in this post is a webp image. You can check that page source code and preview the image. When sharing on Facebook the webp image appears.

I’ve also checked your case with the team and they also confirmed that your og:image on the link you provided data refers to a jpg image, not a webp image. I can’t say why Facebook didn’t initially preview this jpg image but it does appear in the Facebook Share debugger. There was a Twitter image within your Open Graph data and this was the webp image.

Hopefully the above is of use. While I can’t assist with any issues you’re encountering with incorrect OG:Image data and Rank Math I would be happy to investigate any issues with the filter I provided. Please allow me some time to do this. I’ll report back to you here at some stage today after checking.

Many Thanks, @jamesosborne for the great analysis as usual, much appreciated!

This issue is really annoying and we are not able to find the root cause for this.

I will share with Rank Math this analysis and see if they can identify the issue.

Looking forward to hearing back from you once you investigate the filter you provided.

Thank You!

No problem. Happy to help with regards any Performance Lab queries. Hopefully you can find out more by reaching out to Rank Math or Facebook on why any webp images don’t appear when sharing (if you’ve defined a webp image within your og:image metadata).

With regards the filter I previously provided not resulting in featured images reverting to their source image format I’ll need to check this further with the team next week. Unfortunately I didn’t get this working as expected with a filter from testing today. I will however follow up with you as soon as I have an update.

Hello @jamesosborne, thanks for the update.

Please find below the reply from RankMath.
I believe after the last Performance Lab update to version 1.6.0 (3 weeks ago), the issue started to happen on my site.

https://github.com/WordPress/performance/pull/527

1.6.0
Enhancements

Site Health: Only load Site Health checks for persistent cache and full page cache when not available in core. (543)
Images: Add checkbox to Settings > Media to control whether to generate JPEG in addition to WebP. (537)
Images: Generate only WebP images by default for JPEG and WebP uploads. (527)
Infrastructure: Bump minimum WordPress requirement to 6.0. (549)

Rank Math Update:
\\
I can check that for the posts that have the correct OG:image, if you edit them and check the featured image in the editor, the image is in JPG format even if it is getting converted to WebP in the front end. Since the image is being saved in the postmeta table as the JPG image, our plugin is able to add it as the OG image.

But if you check the posts that have the default thumbnail, the featured image is in the WebP format in the media library and that’s why they are not getting picked up as the OG image. Here is a quick screencast: https://i.rankmath.com/v/6tMbD2

So it will work fine if the image is saved in JPG format in the media library even if they are getting converted in the front end but it will not work if the image originally has the WebP format.

We are soon going to improve the OpenGraph tags and add support for the WebP images, but we currently don’t have an ETA for that.
For now, you will have to make sure that the featured image has the JPG format, at least in the media library to use it as the OG image.
//

How can we fix this, please?

Your help is highly appreciated.

Thank You @jamesosborne!!!

• This reply was modified 1 year, 11 months ago by Charbel Nemnom.
• This reply was modified 1 year, 11 months ago by Charbel Nemnom.

hi @cnemnom,

Thanks for the update. The problem you’re facing with sharing posts that have webp as featured images this isn’t a Performance Lab related issue. In the URL you provided the og:image is defined already as a jpg image, and not your featured image. When sharing it’s normal that your jpg OG:image will use the one you defined. As mentioned the Performance Lab plugin also doesn’t provide any Open Graph meta data functionality.

In relation to the filter I previously advised, I’m awaiting a check with the team regarding this. I’ll let you know as soon as we have an update.

Hello @jamesosborne,

Thanks for the update!

Yes, and because Performance Lab has converted my Featured Image to webp in my Media Library, thus RankMath was not able to pick it as a valid Featured Image, then RankMath selected my default OpenGraph Thumbnail which is the same jpg that I shared previously.

Please watch the video below and see the difference between, why my previous posts were working and why after October 20, the issue started to happen.

https://i.rankmath.com/v/6tMbD2

I know that the Performance Lab plugin doesn’t provide any Open Graph metadata functionality, but the issue is that the plugin converted the Featured Image to webp.
RankMath does not support webp as of today.

In Performance Lab version 1.6.0 here: https://github.com/WordPress/performance/pull/527
They have added the following feature: Generate only WebP images by default for JPEG and WebP uploads.
I believe this is the issue that I am facing.

Waiting for your feedback. Many Thanks!

-Charbel