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

Contribute Feature
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 Likes
2

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

6 Likes
4

Thank you for addressing this!

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

Dan

3 Likes
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 Likes
7

This is integrating quite nicely now with Facebook with the latest Discourse update. Thank you so very much!

-Dan

4 Likes
8

I want to provide more kudos. I recently deployed David Taylor’s most excellent “Topic List Thumbnails” theme component. It’s awesome that I can generate a thumbnail to accompany any topic - and furthermore, that I can choose the image from which to generate that thumbnail with a “|thumbnail” tag at the end of the image declaration.

Perhaps it’s because the underlying architecture draws on this tag for og:image as well as for the theme component; but I was delighted to find that when I changed the thumbnail, it changed the OpenGraph property for og:image as well, and hence what rendered in Facebook. Two birds, one stone, and like that! :zany_face:

Great stuff!
Dan