Images in link preview cards?

Hello, I have a question about how to display images in link preview cards. I know this is possible with Discourse (ex. see this thread), but I’ve noticed that when I post links to my own site (ex. Good Web Graveyard), no image appears, even though I’ve got an image set in the metadata that shows up on Open Graph Preview and Lens.

What should I be doing differently?

Probably because Discourse, like a lot of services, will only pull images from a the twitter card/image meta info

<meta name="twitter:image" content="http://gallery.armaina.com/archive/2021/coatexture1.jpg">
<meta name="twitter:card" content="summary_large_image">

Like So

And also to show how other platforms like Discord do it, for og:image vs twitter card header

So, in the case of Discourse at least, someone would have to make a mod specifically to pull the og:image property and get it to display like the twitter card

1 Like

Hmm, okay, testing a twitter:image and twitter:card in the metadata…

Edit: it works! Thank you!

3 Likes

In my experience, the following proprietary meta tags are all you need to get rich previews on Discourse.

<meta name="twitter:card" content="summary_large_image" />
<meta property="og:title" content="__TITLE" />
<meta property="og:description" content="__DESCRIPTION" />
<meta property="og:site_name" content="__SITE" />
<meta property="og:image" content="__BASE/card.png" />

The HTML above is actually a partial that I use when building my pages on localhost before I upload them.

More details here…

2 Likes