Add og:image:width, og:image:height, and og:image:type to OpenGraph tags

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

3 Likes