I recently converted all images on my site to AVIF format, but I noticed this caused issues with OpenGraph thumbnails on LinkedIn. As a temporary fix, I switched my thumbnails back to WebP using Make and CloudConvert API (paid service).
However, today I revisited the page, and all my thumbnails seem to have reverted back to AVIF. It seems like I’ve lost all the converted files. Has anyone else experienced this? What should I do to prevent this from happening again and ensure my OpenGraph thumbnails display correctly on LinkedIn?
My temporary solution is converting them back to webp for OpenGraph images only… It’s pretty annoying. Also talking to LinkedIn support, they said they will support AVIF in the future, but not sure when.
When you optimize, the original image still exists, so the original URL for your WEBP should still function.
You can see that for example in RSS where the same thing happens.
However, you’d be best to contact Webflow support to verify that the image will stay around long-term, even though it’s no longer directly linked to an assets. I’m not certain how the garbage cleanup subsystems work.
This also doesn’t help you with CMS template pages, in which the og:image is typically bound to a CMS image field. You’d need a second, non-AVIF image field just for the og:image
And, if you ever re-optimize the CMS data, there’s no way to exclude that file.
There are a few approaches that should work, where you can use WF’s CMS image optimization and avoid breaking Linkedin’s og:image.
Compress CMS assets to WEBP, not AVIF. Not perfect, but more linkedin compatible. Test that though in a static page- the Linkedin docs I’ve seen suggest JPEG or PNG.
Store your og:image URL in a CMS field pointing to the pre-compressed non-AVIF file. Set the page’s og:image setting to none, and then create the og:image META directly in your before head code with your URL. That last step is needed because WF only lists image fields as og:image binding options, not url fields ( pretty sure on this, haven’t tested lately )
Reverse proxy. Modify the og:image URL before sending it. Complex and difficult, because the RP doesn’t know for certain that the original URL was e.g. a WEBP, it has to make assumptions.
Unfortunately Linkedin is very limited too, it doesn’t seem to support multiple og:images for a best-fit, and it doesn’t run scripts before parsing the page, so you just have to make due until they support modern formats.
Thank you for your replies. I really wish we hadn’t converted to AVIF—it’s been causing quite a few issues . For us, the problem isn’t limited to opengraph images. Google Image Search was a significant traffic driver, but since the conversion, almost all our images have disappeared from search results (except for a few remaining non-AVIF images).
We no longer have a backup of a version of the site with the images in WebP, as its been over three months since we did the conversion to AVIF.
Shouldn’t Webflow be following the fallback recommendation? It seems strange that AVIF is being served without WebP or JPEG as a fallback for unsupported browsers or crawlers.
I’ve reached out to Webflow support to see if they can help.
. For us, the problem isn’t limited to opengraph images. Google Image Search was a significant traffic driver, but since the conversion, almost all our images have disappeared from search results (except for a few remaining non-AVIF images).