Images in link preview cards?

32-Bit Cafe Feedback & Questions
1

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?

2

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

image
image665×662 77.6 KB

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
3

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

Edit: it works! Thank you!

3 Likes
4

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