1

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:

Result on iMessage

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?

miguelmorin
  • 5,025
  • 4
  • 29
  • 64
  • 1
    The following OpenGraph meta tags are missing in your site: og:type, fb:app_id. And this is invalid: `` Use `property` instead of `name`! And I suggest for you to use Sharing Debugger: https://developers.facebook.com/tools/debug/ For Apple systems recommended to use apple-touch-icons: https://webhint.io/docs/user-guide/hints/hint-apple-touch-icons/ – adampweb Dec 19 '20 at 16:51
  • I added the `og:type`. I don't have a Facebook app ID to add. Thanks for the pointer on property, I fixed that. I have used the Facebook Sharing debugger and I don't see help for Whatsapp or iMessage. The Apple touch icon serves as a thumbnail for recently visited websites, for example, and it is not the image preview unfurled when linking a website. – miguelmorin Dec 19 '20 at 18:15
  • Look for answers of this question: https://stackoverflow.com/questions/25100917/showing-thumbnail-for-link-in-whatsapp-ogimage-meta-tag-doesnt-work – adampweb Dec 20 '20 at 08:10
  • @AdamP. I read the thread and did not find pointers. It seems specific to Whatsapp and my issue is now with iMessage and standards between platforms. – miguelmorin Dec 20 '20 at 09:36
  • 1
    Hi Miguelmorin – Were you able to figure out why you were getting both of your OG images being displayed on iMessage? There was another question on Stack Overflow for the same issue (https://stackoverflow.com/questions/65345306/sms-hyperlink-showing-multiple-images-issue) in the same timeframe that was never resolved either. While I don’t have an iPhone, I do depend on users sharing a link to my site, so I’m wondering if this issue needs more research or if the problem has gone away. – Rich DeBourke Jan 21 '21 at 03:44
  • @RichDeBourke Thanks for the tip. See my partial answer. – miguelmorin Jan 21 '21 at 12:37

1 Answers1

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")
miguelmorin
  • 5,025
  • 4
  • 29
  • 64