适用于Facebook，Whatsapp和iMessage的OpenGraph图像标准 [英] OpenGraph image standards for Facebook, Whatsapp, and iMessage

问题描述

目前，我已经在服务器端检查了用户代理是否为Whatsapp，在这种情况下，meta标记在所有页面上使用400x400图像，而在所有其他页面上使用1200x630图像.如果有人要调试，我可以恢复到上一次提交.

我如何拥有与Facebook，Whatsapp，iMessage和其他主要共享平台以及不同设备兼容的Open Graph图像共享标签?

解决方案

作为部分答案，iMessage的问题似乎已经消失.现在，即使存在两个并且大小不同，相同的服务器代码也会显示第一张 OpenGraph图像.我通过重新排列视图中的图像进行了测试.

为了在将来进行更改时具有鲁棒性，我对用户代理进行了检查.如果是Whatsapp，则我共享一张正方形图像，否则，我共享一张风景图像.

要在NodeJS控制器或中间件中检查用户代理，请执行以下操作:

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

要在带有PUG/Jade的视图中提供OpenGraph图像:

  if whatsappmeta(属性="og:image"，content ="https://emotionathletes.org/images/logo_400x400_shared_image_EN.png")meta(属性="og:图片:宽度"，内容="400")meta(属性="og:图片:高度"，内容="400")别的元(property ='og:image'，content ='https://emotionathletes.org/images/logo_1200x630_shared_image_EN.png')meta(属性="og:图片:宽度"，内容="1200")meta(属性="og:图片:高度"，内容="630") 

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?

解决方案

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")

这篇关于适用于Facebook，Whatsapp和iMessage的OpenGraph图像标准的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！