Space link preview/unfurl - image not fetching

Possible bug with Kinopio URL links and Homepage links not fetching any preview link.


(Fig 1. - original post from discord)

released a potential fix for this, give it a try

tested on OpenGraph - Preview Social Media Share and Generate Metatags - OpenGraph

1 Like

Hey Pirijan,

Still not working for pencilbooth:

Using a preview webtool - though I’m not sure if this would be correct since I’m not versed in code but it also throws up this:

They have an image errorr messaging:

Ok marked this incomplete and will re look at

1 Like

in progress

wasn’t able to get this working, the online checking tools are inconsistent with what the scraping logic that real apps use…

i’ve checked and triple checked the meta tags and they all are correct, but for some reason the og:image tag gets ignored by some apps. The dynamically generated is usually picked up so pageMeta.js is being run by most scrapers.

will defer this to later

1 Like

note to self: try oembed (set up server oembed route GET space/oembed/:spaceId and client meta link pointing to it)

2 Likes

may be relevant TIL: Fixing Broken Social Share Images in Twitter/X — Good Enough

I think the main issue is that there is no og:image tag if the scraper doesn’t evaluate JavaScript.

A solution could be to add a default Kinopio og:image as a fallback to at least have an image and a working link preview, even if it’s just a default Kinopio one. When using the scraper tools linked in this thread, we can see that for the link previews, they also get the original og:title and not the name of the space.

If you point me to an image that I can use, I would be happy to implement this.

From my knowledge, we would need server-side rendering to reliably generate the correct OG metadata to support all scrapers, but that comes with other obvious downsides.

I checked the reference from Good Enough, but that doesn’t seem to be the issue. The Content-Type header is set correctly.

1 Like

should the og:image be a specific proportion? would one of these work??


From my knowledge, we would need server-side rendering to reliably generate the correct OG metadata to support all scrapers, but that comes with other obvious downsides.

Ya i figured. I wonder what other SPAs do, all I can think of is a hybrid where you have server-side Routing, but client-side everything else. But ya SSR is way out of scope of this.

It’s not super specific, as the vendor of the service your link gets previewed in decides how they display it. I usually orient myself on the major platforms. Facebook uses 1200 x 630. Using a square is also possible, but risks getting cropped more aggressively.

I think you can get more creative than just using the blob <3

Here is some inspo:

1 Like

V helpful , I’ll mockup something up soon

hows this? feedback v welcome

1 Like

I think this is a great start. :nail_care:

PR submitted: Add default og:image by lucasfischer · Pull Request #609 · kinopio-club/kinopio-client · GitHub

1 Like

As we are working on improving Kinopio’s link previews, we were wondering where you share links of your Kinopio spaces. We plan to thoroughly test and optimize for those places.

So far, we were thinking about:

  • Discord
  • Slack
  • Signal
  • iMessage
  • Twitter
  • Bluesky
  • Mastodon
  • Iframely

Your input is welcome.

2 Likes
  • LinkedIn
  • Webex chat

:slight_smile: (I can help testing those)

1 Like

updated the og-image using a spacepreviewimage from my dev testing that i think just looks more interesting and less austere than a plain bk.

Because the title and description text are always shown right next to the image, the image just needs to convey a vibe more than inform. (like the futureland one does)

1 Like

shipped out the first part of this