Can we use webp extension image in og:image meta tag?

Question

In my website i have converted all the image from jpg or png to webp but after this my og:image meta tag is unable to fetch images. In facebook debugger i see the following error

The provided 'og:image' properties are not yet available because new images are processed asynchronously. To ensure shares of new URLs include an image, specify the dimensions using 'og:image:width' and 'og:image:height' tags.

After a little search i found that this error appears for the first time during page fetch when sometimes facebook is not able to fetch image dimensions at first time but in my case this error is constant for all the time. Is it because facebook might not able to fetch image details as i have used webp extension.

Answer 1

https://developers.facebook.com/docs/sharing/webmasters/#images says,

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

Now og:image:type does not need to be explicitly specified; but since the restriction to those MIME / file types is mentioned for that property, that should also mean you can not use WebP for og:image .

Answer 2

Twitter 和 Facebook 现在支持 og:meta 中的 WebP。

Answer 3

Twitter and Facebook now supports WebP in og:meta.

It is not in the OpenGraph specifications - but only in the Twitter version of it twitter:image . Since Facebook uses og:image , there is probably no support for WebP yet.

Hi, a comment without a source is not helping the community. – djibe Mar 22 at 9:26

twitter:image

A URL to a unique image representing the content of the page. You should not use a generic image such as your website logo, author photo, or other image that spans multiple pages. Images for this Card support an aspect ratio of 2:1 with minimum dimensions of 300x157 or maximum of 4096x4096 pixels. Images must be less than 5MB in size. JPG, PNG, WEBP and GIF formats are supported. Only the first frame of an animated GIF will be used. SVG is not supported.

https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary-card-with-large-image