How to Specify Global & Fallback og:images on Collection Pages

The easiest way to manage this is to avoid using Webflow's built-in og:image specifier altogether, and simply construct the og:image elements yourself in your HEAD custom code, in the order of preference.

<meta content=" (1st choice image) " property="og:image" />
<meta content=" (2nd choice image) " property="og:image" />
<meta content=" (3rd choice image) " property="og:image" />

‍

Image Optimization and og:images

There is currently a feature-gap type of incompatibility between Webflow's image optimization and og:images, particularly on LinkedIn.

Webflow supports AVIF conversion, however LinkedIn does not handle AVIF images.

Compounding the problem, Webflow's image optimization is CMS-wide only. You cannot exclude specific collections or fields from optimization.

However, when you optimize, the original image still exists, so the original URL for your pre-compressed image should still function.

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.

Solutions

Despite these inconveniences, there are a few approaches that should work, where you can use WF’s CMS image optimization and avoid breaking Linkedin’s og:image.

1. 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.
2. 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 )
3. 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 selection, and it doesn’t run scripts before parsing the page, so you just have to make due until they support modern formats.

References

• Open Graph Arrays - ogp.me

More notes