Use page media for link previews (#1152)

[BittuBarnwal7479]

Details

Every page shared the same og:image, so links to release highlights and other pages with featured media previewed as generic site cards.

Set the Open Graph and Twitter card image per page: pages can point at one with the new ogImage frontmatter, otherwise the first image on the page is used (skipping code blocks, badges and SVGs), falling back to the site-wide image for pages without any images. Local images resolve to their built URLs so that width and height can be advertised too.

Fixes: #1152

[orhun]

Can you share example screenshots of how the og pages look like for e.g. release highlights, recipes, etc.?
Also what happens when there is only a gif in the page or no images at all?

[pinkforest]

The question is what degree of control would you like and would you be willing to pick the image yourself

Personally I would have well-formed predictable path / pattern for the exact OG image associated with each given page but that's just me

And then generate those preview rendered images for all the existing pages when plugging it in. IMO it would be feasible over just randomly picking something at semi-random that also makes it verbose and brittle when it has to guess what to show as preview.

After that all previews would get reviewed together across through every PR with blog etc things where it may be desirable to have custom deterministic image for the preview i.e. gif instead of just a random jpg

This PR's problem is that it doesn't show what the preview will be and it's hard to know what it will spit out

Other than that there seems to be few astro integrations if it's preferable to do DOM based render instead sans picking existing image either semi-random or as pre-defined.

Build time that uses DOM to render a preview:
https://github.com/shepherdjerred/monorepo/tree/main/packages/astro-opengraph-images

SaaS https://shotpipe.io/ to do the same via npm astro-shotpipe:
https://store.boilerplate.com/product/npm/YXN0cm8tc2hvdHBpcGU%3D

Though I have no idea how well the text based pages would work through that DOM render but the astro-opengraph-images seems to have 31k stars in the integrations page

Problem with DOM screenshots is that it will not present GIFs when it would be preferably (quite often) to show that

[BittuBarnwal7479]

yes, i agree preview examples will make this easier to review. I’ll check the easiest way to show the generated OG output, since I can’t directly preview the final social cards here.

For now the flow is:
ogImage → first suitable image → site-wide fallback.

I’ll also check and clarify the GIF/no-image cases.