问题描述
Open Graph tag for Whatsapp link sharing 表明我可以有两个或多个开放图谱图像，例如一个矩形用于 Facebook，一个方形用于 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 和 Whatsapp 都使用专为他们设计的图片。 iMessage 也适用于桌面。
iPhone XR 上的 iMessage，不过，两个图像并排出现，结果很难看：
现在，我已经实现了服务器端检查用户代理是否是 Whatsapp，在这种情况下，元标记在所有页面上使用 400x400 图像，而在所有其他页面上使用 facebook 1200x630 图像。如果有人想要调试，我可以恢复到之前的提交。
如何让 Open Graph 图像共享标签与 Facebook、Whatsapp、iMessage 和其他主要共享平台以及不同设备兼容？
解决方法
作为部分答案，iMessage 的问题似乎已经消失。现在，相同的服务器代码显示第一个 OpenGraph 图像，即使存在两个且大小不同也是如此。我通过重新排列视图中的图像来测试这一点。
为了在未来发生变化时的稳健性，我对用户代理进行了检查。如果是 Whatsapp，我会分享一张方形图片，否则我会分享一张横向图片。
要检查 NodeJS 控制器或中间件中的用户代理：
whatsapp = (req.headers) && (req.headers["user-agent"]) && (req.headers["user-agent"].includes("WhatsApp/"))
使用 PUG/Jade 在视图中提供 OpenGraph 图像：
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")