Facebook、Whatsapp 和 iMessage 的 OpenGraph 图像标准答案

【问题标题】：OpenGraph image standards for Facebook, Whatsapp, and iMessageFacebook、Whatsapp 和 iMessage 的 OpenGraph 图像标准
【发布时间】：2020-12-19 16:31:27
【问题描述】：

Open Graph tag for Whatsapp link sharing 表明我可以拥有两个或更多 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 两个图像并排显示，结果很丑：

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

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

【问题讨论】：

您的站点中缺少以下 OpenGraph 元标记：og:type、fb:app_id。这是无效的：<meta name="og:title" content="Emotion Athletes, videos for kids"> 使用property 而不是name！我建议您使用共享调试器：developers.facebook.com/tools/debug 对于苹果系统建议使用 apple-touch-icons：webhint.io/docs/user-guide/hints/hint-apple-touch-icons
我添加了og:type。我没有要添加的 Facebook 应用 ID。感谢您提供有关财产的指针，我已解决此问题。我使用了 Facebook 共享调试器，但没有看到有关 Whatsapp 或 iMessage 的帮助。例如，Apple 触摸图标用作最近访问网站的缩略图，而不是链接网站时展开的图像预览。
寻找这个问题的答案：stackoverflow.com/questions/25100917/…
@AdamP。我阅读了线程并没有找到指针。它似乎是 Whatsapp 特有的，我现在的问题是 iMessage 和平台之间的标准。
嗨 Miguelmorin – 你能弄清楚为什么你的两个 OG 图像都显示在 iMessage 上吗？在同一时间范围内，对于同一问题 (stackoverflow.com/questions/65345306/…)，Stack Overflow 上还有另一个问题，该问题也从未得到解决。虽然我没有 iPhone，但我确实依赖用户分享我网站的链接，所以我想知道这个问题是否需要更多研究，或者问题是否已经消失。

标签： html share facebook-opengraph share-open-graph

【解决方案1】：

作为部分答案，iMessage 的问题似乎已经消失。现在相同的服务器代码显示 first 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")

【讨论】：