OG images defined using an Astro template

[jaunty plume]

Is there a way to generate Open Graph images (preferably at build time) that are rendered from a .astro file? Something like https://www.npmjs.com/package/eleventy-plugin-og-image but for Astro? I found a bunch of half-baked Astro OG libraries but none of them support using an Astro template for the image.

[jaunty plume]

Alternatively, is it feasible to port that library to Astro? I'm not seeing anything in the docs that would let me render a .Astro file myself from an integration.... Maybe injecting a route, rendering the HTML in Satori, and then deleting the rendered HTML? Could be a bit clunky though...

[jaunty plume]

This seems like a viable approach: https://github.com/kevinzunigacuellar/astro-satori/blob/main/src/pages/images/[id].png.ts

Not nearly as clean as being able to use an Astro template and an integration, but it should work for now. I'll post my thoughts here when I have a chance to try it.

[livid ember]

I should update this repo with astro v2 😅 but here is the new version https://github.com/kevinzunigacuellar/web/blob/main/src/pages/image/[slug].png.ts

[prime badge]

i would be great to have a simple, lean solution, without the complex satori approach, that looks like over-engineering. Since all the resources to produce a page we have it at build time, can we find a way to use those resources and produce OG images?
i will def need that, what you you think?

[livid ember]

I think its a great idea. I have seem other solutions that follow the approach that you mentioned. For example before Satori was released, some libraries used to build a page and then use a chromium runner to take a picture of the page.

I think this approach (using satori) is not that complicated, its about 100 lines of code but yes I could be made an integration if you would like to work on that.

[prime badge]

Let me just expand this discussion a bit.
Seen how Astro positions itself in the landscape,
read "a build tool for content heavy websites"
MISSING a BUILT-IN, easy simple way to read a front-matter declared image
and produce the OG metas necessary
to look decent when pasting links in chats and socials
IS A REAL BUMMER. 😫
Let's be realistic we can't declare to be content friendly when we miss that!

Sure when can use and integrate a zillion tools and services,
but aren't we forgetting the basics, are we?!

I would like to know what this community think about this,
are OG images not necessary?
Am i too dumb to get my blog:
https://magicgreen.junglestar.org/
some basic image into the Og metas?

[red rampart]

Is the question here about generating images based on some frontmatter or linking to an image URL provided in frontmatter? The linking approach is definitely possible and technically so is the generation approach although it has all the complexities you ran into above.

[prime badge]

my case is a pretty common one i guess,
i need to have an OG image for each post (.md),
using the image indicated in the frontmatter:

coverImage: '../../assets/p/aloe-vera/aloe-vera.jpg'

please note that i am using experimental assets and collections, specifically my images are inside: src/assets/p/

how do i get them into <meta property="og:image" content={?} /> ?

I am not expert, somebody here can help?! 🙏

btw the blog is open source if anyone want to have a look: https://github.com/realmagicgreen/magicgreenastro

[red rampart]

When you fetch the posts with getCollections, coverImage will be a resolved object including a src property you can use to link to the image. So each post has post.data.coverImage.src you could use here. I believe open graph images need to have an absolute URL, so you probably need to something like

<meta property="og:image" content={new URL(post.data.coverImage.src, Astro.site)} />

(assuming you set site in your Astro config file)

Couldn’t see the route where you’re using posts in the repo, but hope that helps!

[prime badge]

Hey Chris, i am afraid that is not gonna work, since i'm using experimental assets and after build my images are in siteurl/_astro/..., while your method will produce a different path like siteurl/src/assets/p/...

thanks for trying to help anyway,
problem remains,
Astro can't produce Og images for each post in an easy way,
even when posts have a front-matter declared image path,
and realising that is really disappointing with the immense appreciation i have for Astro!
Most Astro precursors do that out of the box ( 11ty, Jekyll...)
😫

[red rampart]

Are you using the image helper function in your schema? https://docs.astro.build/en/guides/assets/#update-content-collections-schemas

The intention is that that will resolve everything correctly and you'll get the src as needed for this. So if it's not working that would be a bug!