向 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 数据的平台上分享时增加参与度。

附加背景

6 个赞
2

感谢您的报告 @shortmort37 :+1: 这将通过以下链接修复：

6 个赞
4

感谢您解决这个问题！

不过，您能告诉我为什么不包含 og:image:type 吗？phpBB 会包含。

Dan

3 个赞
6

因为我误读了规范，以为它是可选的……但既然图片的宽度和高度也是可选的，我看不出不添加它的理由。

6 个赞
7

这次与 Facebook 的集成在最新的 Discourse 更新后进行得相当顺利。非常感谢！

-Dan

4 个赞
8

我想给予更多的赞扬。我最近部署了 David Taylor 非常出色的“主题列表缩略图”（Topic List Thumbnails）主题组件。我很高兴能够为任何主题生成一个缩略图——而且，我可以通过在图片声明末尾添加一个“|thumbnail”标签来选择用于生成该缩略图的图片。

也许是因为底层架构同时利用此标签来处理 og:image 和主题组件；但我很高兴地发现，当我更改缩略图时，它也更改了 og:image 的 OpenGraph 属性，从而也更改了 Facebook 上显示的内容。一石二鸟，诸如此类！:zany_face:

太棒了！
Dan