Exclude images with property="og:image" from serving the WebP version.

[kierantaylorio]

Before submitting an issue please check that you’ve completed the following steps:
👍 - Made sure you’re on the latest version
👍 - Used the search feature to ensure that the bug hasn’t been reported before

Describe the bug

When WP Rockets WebP caching is active we will rewrite the image URLs including those in meta tags. This means that a WebP image is served when sharing via WhatsApp. This is not supported and therefore the image will not be loaded.

To Reproduce
Steps to reproduce the behaviour:

1. Activate Imagify (with 'Display images in WebP format on the site' disabled)
2. Enable 'Enable WebP caching' in WPR
3. Use a plugin like Easy Social Share to add buttons to share via WhatsApp
4. Check the source for the meta tag and you should see the WebP version of the image
5. Share via WhatsApp

Expected behaviour

The image should appear when sharing via WhatsApp, however, this will not happen as WebP is not supported.

Additional context

Related ticket: https://secure.helpscout.net/conversation/1274339485/192450

This can be resolved by enabling Display images in webp format on the site > Use tags (preferred) in Imagifys settings.

Backlog Grooming (for WP Media dev team use only)

• Reproduce the problem
• Identify the root cause
• Scope a solution
• Estimate the effort

[arunbasillal]

As per: https://developers.facebook.com/docs/sharing/webmasters/#images

MIME type of the image. One of image/jpeg, image/gif or image/png

It looks like excluding image/webp is indeed required. Thanks for the detailed report @kierantaylorio

[Tabrisrp]

Reproduce the issue ✅

Identify the root cause ✅

In our WebP subscriber class, the method get_attribute_names() has a default value containing the attribute content to search for image files.

This means that images inside the content attribute will be rewritten to WebP if the corresponding webp file exists.

But the WebP format is not accepted as a mime type apparently, so we should not try to replace those.

Scope a solution ✅

Remove the content value from the attribute list in Webp_Subscriber::get_attributes_names()

Estimate the effort ✅

Effort [XS]

[Mai-Saad]

On trunk:

• When used img.png and it turned into png.webp => it`s shared normally through whats app using Sassy Social Share plugin
• As per https://www.tyntec.com/docs/tutorials-creating-and-sending-whatsapp-stickers, seems the problem with animated webp so tried gif and webp wasn't applied to it on cached version thus it was shared normally

Am I missing something to see the image problem?

the image will not be loaded.

[Tabrisrp]

From https://stackoverflow.com/a/64326921, posted on october 15, 2020.

Twitter and Facebook now supports WebP in og:meta.

This change might not be required anymore.

@Mai-Saad If you confirm things are working normally now, we can close the issue.

[piotrbak]

@Tabrisrp @Mai-Saad From what I can see:

1. Facebook Sharing Debugger is automatically rewriting images from .png.webp to .png.
   https://developers.facebook.com/tools/debug/

Also, in their docs, the image/type still doesn't have webp format.
https://developers.facebook.com/docs/sharing/webmasters/#images

2. Twitter, doesn't seem to work with webp in og:image property. The png seems to be just fine
   https://cards-dev.twitter.com/validator

URL to use, you can compare Twitter with the not cached version:
https://imagify.rocketlabsqa.ovh/hello-world/

[sriharshayarabarla]

Having the same issue. All my images are converted to webp by Smush plugin and I don't see any featured image while sharing in whatsapp.... Facebook and Twitter just works fine with webp images. If I bypass wp-rocket by appending ?nowprocket the featured image shows in whatsapp.

[piotrbak]

Hello @sriharshayarabarla thank you for your comment. If you disable our webp addon the problem goes away?