0

Whatsapp 链接共享的 Open Graph 标签显示我可以有两个或多个 Open Graph 图像，例如 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 两个图像并排显示，结果很丑：

iMessage 上的结果

目前，我已经对用户代理是否是 Whatsapp 实施了服务器端检查，在这种情况下，元标记在所有页面上使用 400x400 图像，而对所有其他页面使用 facebook 1200x630 图像。如果有人想调试，我可以恢复到以前的提交。

如何让 Open Graph 图片分享标签与 Facebook、Whatsapp、iMessage 等主要分享平台以及不同设备兼容？

4

1 回答 1

0

作为部分答案，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")
于 2021-01-21T12:35:30.467 回答