The Open Graph Protocol (OGP) was created by and for Facebook in 2010. OGP is a pseudo-standard set of metadata tags you can include on your webpages to describe its contents. By now, it’s become the primary data source for generated link previews across the web and apps.
OGP lets you specify a webpage’s title, description, and thumbnail image. The protocol also lets you express more metadata, but these three are its primary uses. These three metadata items are used by external services to generate link previews for your webpages.
OGP metadata is consumed by all the big tech companies; including Facebook, Google, and Apple. It’s also used by every search engine, sharing, social, and messaging apps such as Reddit, Twitter, What’s App, Signal, WordPress, and Quora.
The OGP Specification doesn’t require the use of any specific image formats. The specification allows you to set multiple images of different sizes, aspect ratios, and file formats for a webpage. However, support for this is virtually non-existent. Avoid including more than one OGP image on your webpages!
Facebook’s documentation says it requires images to be either JPEG (lossy), PNG (lossless), or a still frame/non-animated GIF image file. This part of its documentation was last updated in 2014. Contrary to what its documentation says, Facebook does support other file formats than the ones it has documented. More on that later.
Image compression technology has improved a lot in the years since that documentation was last updated. The WebP format, introduced by Google in 2010, is a better option for both lossy and lossless images than either JPEG or PNG. WebP can yield higher-quality images at smaller file sizes.
Websites have embraced the WebP format because it helps them deliver pages faster and saves them money by reducing bandwidth costs. Users can’t tell the difference between one image format and another, but they do appreciate pages that load faster.
WebP isn’t as universally supported as the legacy formats. Some apps and image libraries might not know how to open and display them. However, most web browsers have supported WebP since 2019, with Safari being the last browser to add support in 2020.
It has been considered best practice to provide images in WebP and a legacy format as a fallback for older clients. Historically, this meant “for Safari” but now it’s truly only about legacy clients. However, many websites still maintain images formatted specifically for use by OGP clients.
Which brings us to the title of this article: Can you use a WebP image file with the Open Graph Protocol? OGP is one of the last hold-outs for where you need to use a legacy image format. Using WebP for OGP would allow you to drop support for legacy image formats entirely and save on storage costs and encoding time. The short answer is “yes”, but the long answer is “sure, but it depends”.
According to Facebook’s documentation, the answer is “no”. The company claims it only supports JPEG, PNG, and GIF image files. However, the Facebook website and its apps — including Messenger and WhatsApp — also support link previews of webpages using WebP images.
Twitter’s documentation says it supports JPG, PNG, GIF, and WebP. WebP images work great in the company’s apps and websites. Twitter only uses the first frame of an animated PNG, WebP, or GIFs.
Here’s a quick comparison table of which image file formats are supported by different OGP-consuming platforms and apps. Note that the GIF column refers to still images and not animated GIFs. No one supports AVIF yet. (WebP adoption has a more than a decade’s lead on it.) The SVG column was included for the sake of completeness, as it’s the fifth most common image file format on the web.
| App/Service | Image format | |||||
|---|---|---|---|---|---|---|
| WebP | PNG | JPEG | GIF | AVIF | SVG | |
| Yes | Yes | No | ||||
| Discord | ||||||
| Outlook.com | ||||||
| No | ||||||
| Slack | ||||||
| Signal | ||||||
| Skype | ||||||
| Quora | ||||||
| Mastodon | Depends on the server and apps used | |||||
The decentralized Mastodon social network doesn’t have a definitive answer. It might support any given image format and it might not. It depends on what image formats are supported by the server’s image processing library. JPEG and PNG are generally supported.
I expect the hold-outs will adopt WebP within a couple of years. As Facebook and Twitter support WebP in OGP, that’ll be the extent of testing most websites will receive. Adoption of WebP as the only format a website supports is likely to sky-rocket in the coming years. There’s little point in maintaining two or more image formats when one is objectively better and universally supported in all web browsers.
Alternatively, you could go more advanced and try to parse the HTTP Accept request header from OGP-consuming bots. However, nearly all bots either don’t send an Accept header or send unhelpful values like image/*, */* (as opposed to e.g. image/webp, image/jpeg). In the end, you’d still need to support multiple image formats; which you probably want to avoid.
The legacy image formats are still your best bet if it’s important to you that end-users see your images in link previews. You can absolutely use WebP and fallback to only show the title and description in nonsupporting apps. I would suggest you keep your existing image format implementation, but for future implementations: Go with WebP only!