为 facebook 定义开放图形图像大小

Posted 2023-03-17

【中文标题】为 facebook 定义开放图形图像大小

【英文标题】：Define open graph image sizes for facebook

【发布时间】：2017-10-09 12:23:21

【问题描述】：

我在互联网上搜索以找到适合此问题的解决方案。但我没有找到。

为了在 facebook 中分享一个网页，我使用了 open graph，如下所示，与 facebook 开发者网站中提到的相同。

    <meta name="description" content="Description is here" />
        <meta property="og:image" content="http://www.example.com/images/11.png" />
        <meta name="keywords" content="Business Intelligence, Big Data, Data driven" />
        <meta name="developer" content="companyName">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

此 png 文件的图像大小为 796x417 像素

此代码在 facebook wall 和 messenger 应用程序中以 1.91:1 的正确比例正确显示。

但在 facebook 收件箱中，它以 1:1 的比例显示如下（最后一条消息）。这仅显示裁剪后的图像，因此缺少一些字符

有没有办法（打开图表）以特定比例查看 Facebook 收件箱和 facebook 墙共享的图像。

作为一个例子，我可以使用两个不同的图像在墙帖中以 1.91:1 的比例共享链接，而另一个图像以 1:1 的比例用于收件箱。

【问题讨论】：

如果您投反对票，请说明原因

【参考方案1】：

在定义图像及其属性时，您应该严格遵循 OpenGraph 规范：http://ogp.me/#array。因此定义了一个首选图像，然后定义了高度和 with，然后将另一个定义为后备，依此类推。试一试，让我们知道你取得了什么成就。也许你可以通过给图像一些基本高度/宽度来控制纵横比。

<meta property="og:image" content="http://www.example.com/images/11.png" />
<meta property="og:image:width" content="796" />
<meta property="og:image:height" content="417" />
<meta property="og:image" content="http://www.example.com/images/12.png" />

【讨论】：

这行不通，我尝试了很多次不同的方法，它只显示一个图像，如果可用，那是第一张图像，我想要的是在不同的应用程序上使用相同的链接共享不同的图像