Добавить og:image:width, og:image:height и og:image:type в теги OpenGraph

Внести вклад Функция
1

I’m migrating from phpBB to Discourse and discovered that Discourse’s OpenGraph implementation is missing some important tags that Facebook relies on for proper image display.

The Problem

When sharing Discourse topics on Facebook, images don’t display in the link preview. However, when sharing phpBB posts from the same forum, images display correctly.

Using Facebook’s Sharing Debugger, I found that:

phpBB includes:

<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 includes:

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

The debugger shows the image correctly and returns HTTP 200, but Facebook won’t display it in the actual share preview without the dimension and type metadata.

Why This Matters

According to the OpenGraph Protocol specification:

The og:image tag has several optional structured properties including og:image:width, og:image:height, and og:image:type

While these are technically optional, Facebook’s crawler appears to require or strongly prefer them for reliable image display. This is documented in various sources and affects social media sharing for all Discourse communities.

Proposed Solution

Discourse should automatically add these three additional meta tags whenever og:image is present:

  1. og:image:width - actual pixel width of the image
  2. og:image:height - actual pixel height of the image
  3. og:image:type - MIME type (image/jpeg, image/png, etc.)

Since Discourse already processes and optimizes images, it has access to this information and can easily include it in the OpenGraph output.

Impact

This would improve social media sharing for all Discourse sites, making shared links more visually appealing and increasing engagement when Discourse content is shared on Facebook, LinkedIn, and other platforms that consume OpenGraph data.

Additional Context

6 лайков
2

Thanks for the report @shortmort37 :+1: This will be fixed by

6 лайков
4

Thank you for addressing this!

Can you tell me, though, why og:image:type will not be included? phpBB does.

Dan

3 лайка
6

Because I misread the specs and thought it was optional… But since the image’s width and height are too, I don’t see a reason not to add it as well.

6 лайков
7

Теперь это отлично интегрируется с Facebook после последнего обновления Discourse. Большое спасибо!

— Дэн

4 лайка
8

Хочу выразить ещё больше признательности! Недавно я развернул превосходный компонент темы «Topic List Thumbnails» Дэвида Тейлора. Это потрясающе, что я могу генерировать миниатюру для любой темы — и, более того, могу выбрать изображение, из которого будет создана эта миниатюра, добавив тег «|thumbnail» в конец объявления изображения.

Возможно, это связано с тем, что базовая архитектура использует этот тег как для og:image, так и для компонента темы; но я был в восторге, обнаружив, что при изменении миниатюры автоматически обновлялось и свойство OpenGraph og:image, а значит, и то, что отображалось в Facebook. Два зайца одним выстрелом, и всё так просто! :zany_face:

Отличная работа!
Дэн