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

Contribute Feature

AI-generated summary

User shortmort37 reported that Discourse’s OpenGraph implementation lacks og:image:width, og:image:height, and og:image:type tags, causing image previews to fail on Facebook despite working correctly on phpBB. They argued that while the OpenGraph specification marks these as optional, Facebook’s crawler requires them for reliable display Facebook’s Sharing Debugger.

Developer zogstrip acknowledged the issue and initiated a fix in PR #37849. During the process, shortmort37 questioned why og:image:type was excluded. zogstrip admitted to misreading the specs and subsequently updated the pull request to PR #37854 to include all three tags.

shortmort37 confirmed that the update resolved the integration with Facebook. Additionally, they noted a bonus feature: the new implementation works seamlessly with the “Topic List Thumbnails” theme component, allowing users to control the shared image via the |thumbnail tag, effectively managing both the topic list view and social media previews simultaneously shortmort37.

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.

https://github.com/discourse/discourse/pull/37854

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