向 OpenGraph 标签添加 og:image:width, og:image:height 和 og:image:type

功能
1

我正在从 phpBB 迁移到 Discourse，发现 Discourse 的 OpenGraph 实现缺少 Facebook 依赖的一些重要标签，以便正确显示图像。

问题

在 Facebook 上分享 Discourse 主题时，链接预览中不显示图像。然而，当分享来自同一论坛的 phpBB 帖子时，图像会正确显示。

使用 Facebook 的分享调试工具，我发现：

phpBB 包含：

<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:image:width" content="1024">
<meta property="og:image:height" content="768">
<meta property="og:image:type" content="image/jpeg">

Discourse 包含：

<meta property="og:image" content="https://example.com/uploads/.../image.JPG" />

调试工具正确显示了图像并返回 HTTP 200，但如果没有尺寸和类型元数据，Facebook 不会在实际的分享预览中显示该图像。

为什么这很重要

根据 OpenGraph 协议规范：

og:image 标签有几个可选的结构化属性，包括 og:image:width、og:image:height 和 og:image:type

虽然这些在技术上是可选的，但 Facebook 的爬虫在可靠地显示图像时似乎需要或强烈偏好它们。这在各种来源中都有记录，并影响所有 Discourse 社区的社交媒体分享。

建议的解决方案

每当存在 og:image 时，Discourse 应自动添加这三个额外的 meta 标签：

  1. og:image:width - 图像的实际像素宽度
  2. og:image:height - 图像的实际像素高度
  3. og:image:type - MIME 类型（image/jpeg、image/png 等）

由于 Discourse 已经处理和优化了图像，它可以访问这些信息，并可以轻松地将其包含在 OpenGraph 输出中。

影响

这将改善所有 Discourse 网站的社交媒体分享效果，使分享的链接在视觉上更具吸引力，并在 Discourse 内容在 Facebook、LinkedIn 和其他消费 OpenGraph 数据的平台上分享时增加参与度。

附加背景

3 个赞