OpenGraph image standards for Facebook, Whatsapp, and iMessage

Question

Open Graph tag for Whatsapp link sharing showed that I can have two or more Open Graph images, e.g. a rectangular one for Facebook and a square one for Whatsapp:

<meta property="og:image" content="https://emotionathletes.org/images/logo_1200x630_facebook_shared_image_EN.png">
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image" content="https://emotionathletes.org/images/logo_400x400_facebook_shared_image_EN.png">
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="400" />

Facebook and Whatsapp both use the image intended for them. iMessage also works on Desktop.

iMessage on iPhone XR, though, both images are side by side with an ugly result:

For now, I have implemented a server-side check on whether the user agent is Whatsapp, in which case the meta tag uses the 400x400 image on all pages, and the facebook 1200x630 image for all others. I can revert to the previous commit in case someone wants to debug.

How can I have Open Graph image sharing tags compatible with Facebook, Whatsapp, iMessage, and other major sharing platforms, as well as different devices?

Answer 1

As a partial answer, the issue with iMessage seems to have disappeared. Now the same server code shows the first OpenGraph image even if two are present and have different sizes. I tested this by rearranging the images in the view.

For robustness in case of future changes, I implemented a check on the user agent. If it's Whatsapp, I share one square image, otherwise I share one landscape image.

To check for the user agent in the NodeJS controller or middleware:

whatsapp = (req.headers) && (req.headers["user-agent"]) && (req.headers["user-agent"].includes("WhatsApp/"))

To serve the OpenGraph image in the view with PUG/Jade:

if whatsapp
  meta(property="og:image", content="https://emotionathletes.org/images/logo_400x400_shared_image_EN.png")
  meta(property="og:image:width", content="400")
  meta(property="og:image:height", content="400")
else
  meta(property='og:image', content='https://emotionathletes.org/images/logo_1200x630_shared_image_EN.png')
  meta(property="og:image:width", content="1200")
  meta(property="og:image:height", content="630")