Discourse Image that is shared when posting to Social Media, how you can change the Open Graph Image

Discourse Talk
1

Customizing Social Share Images in Discourse

When you share a Discourse post URL on Facebook or other social platforms, the preview image shown is determined by specific rules and settings within Discourse. Here’s how you can control and customize which image appears:

How Discourse Selects the Social Share Image

  • First Post Image: By default, Discourse uses the first image in the original post (OP) of a topic as the preview image for social sharing. If there’s an image in the first post, this will be shown on Facebook, Twitter, and most other platforms123.
  • Default/Fallback Image: If there’s no image in the first post, Discourse falls back to a default image. This is controlled by the opengraph image setting in your site’s admin settings. If this is blank, it will use your site’s logo as the fallback image145.

Ways to Configure the Social Share Image

1. Set a Default Open Graph Image

  • Go to your Discourse Admin panel.
  • Navigate to Settings > Branding.
  • Find the field for opengraph image.
  • Upload or link to the image you want as the default for all shares when no topic-specific image is available.
  • This image should ideally be square for best results across platforms45.

2. Customize Per-Topic Image

  • If you want a specific image for a particular topic, add the desired image as the first image in the first post of the topic.
  • To explicitly set which image is used (if there are multiple), you can edit the post’s Markdown and add |thumbnail to the image you want as the preview:

text

![alt text|100x100|thumbnail](upload://yourimage)

This tells Discourse to use that image as the Open Graph image for social sharing3.

3. Site Logo as Fallback

  • If neither the first post nor the opengraph image setting has an image, Discourse will use your site’s logo as the social share image14.

Important Notes

  • Image Hosting: Discourse only supports images that are uploaded to the platform (either locally or via S3). External image URLs may not be reliably picked up as Open Graph images for sharing6.
  • Homepage Sharing: There is currently no way to set a unique Open Graph image specifically for the Discourse homepage; it will use the default or logo4.
  • Image Size Recommendations: For best appearance, use images that are at least 1200x630 pixels (standard for Facebook and Twitter cards)5.

Summary Table

Scenario Image Used for Sharing
First post has an image First image in first post
First post has multiple images Image with `
No image in first post Default opengraph image (branding)
No opengraph image set Site logo

Additional Customization

  • Advanced: If you need more granular control (e.g., per-category images or dynamic images), you may need to customize your Discourse theme’s header to inject specific Open Graph meta tags, or develop a plugin. However, this requires technical expertise and is not natively supported in the admin UI17.

By following these steps, you can ensure your Discourse posts display the desired image when shared on Facebook and other social networks, improving your community’s visibility and branding135.

  1. Set the image used for social network sharing? - Support - Discourse Meta
  2. Featured image during sharing post in social network like facebook - Support - Discourse Meta
  3. Set the image used for social network sharing? - #30 by david - Support - Discourse Meta
  4. Change the Default Social Sharing Image for the Main Forum Homepage - Support - Discourse Meta
  5. Customize Your Site Branding - Site Management - Discourse Meta
  6. Overwrite meta og:image image source to use externally public loaded images on topics? - Feature - Discourse Meta
  7. Dynamic Open Graph images for topics? - Feature - Discourse Meta
  8. Highlight and share feature - Feature - Discourse Meta
  9. How to change the image that appears when you share on social? - General - Forum | Webflow
  10. How to set open graph image for a specific page? - support - HUGO
  11. Social Share - Theme component - Discourse Meta
  12. Best Practices for Open Graph setup with a new community? - Installation - Discourse Meta
  13. Sharing facebook post with no text, just image - Support - Discourse Meta
  14. Edit social media preview images - Admin requests - Jupyter Community Forum
  15. How to Dynamically Generate Open Graph Image Variants
  16. Set the image used for social network sharing? - Page 2 - Support - Discourse Meta
  17. https://www.sellercommunity.com/t5/Weebly-Website/How-do-I-specify-an-image-for-sharing-on-social-media/m-p/534366
  18. How do I change my open graph image? - SEO - Forum | Webflow
  19. Change default sharing image - Support - Discourse Meta
  20. https://www.make.com/en/templates/5000-share-new-discourse-posts-on-a-facebook-page

Curated and Powered by: Liquid Layer Networks