For Astro there is astro-og-canvas, a nice and useful Astro plugin that utilizes Canvas to create dynamic OG images.

In this post, I’ll walk you through how to generate dynamic OG images for your Astro site, inspired by Aidan Kinzett’s excellent post.
I’ll also share some odds and learned lessons.

Step 1: Set Up `astro-og-canvas`

First, install the package:

npm install astro-og-canvas

Create a new file at src/pages/og/[...routes].ts.
This will dynamically generate images for your content.
Here’s how I set it up for my newsletter collection:

import { OGImageRoute } from "astro-og-canvas";
import { getCollection } from "astro:content";

// Fetch all newsletter entries
const newsletters = await getCollection("newsletter");

// Map newsletters to OG image configurations
const pages = {
  ...Object.fromEntries(
    newsletters.map((newsletter) => [
      newsletter.data.slug,
      {
        data: {
          title: newsletter.data.title,
          description: newsletter.data.newsletter.parts
            .map((part) => `${part.emoji.icon} ${part.title}`)
            .join(" • "),
        },
        slug: newsletter.data.slug,
      },
    ])
  ),
};

export const { getStaticPaths, GET } = OGImageRoute({
  param: "route",
  pages,
  getImageOptions: async (_, { data, slug }) => ({
    title: `Ivo's Ecotainment Newsletter: ${data.title}`,
    description: data.description,
    bgGradient: [
      [255, 221, 0], // Yellow (from logo)
      [255, 255, 255], // White
    ],
    logo: {
      path: "./public/Ivos-Ecotainment-Newsletter_Salamander.png",
      size: [1080],
    },
    border: {
      color: [83, 174, 90], // Green accent
      width: 2,
      side: "inline-start",
    },
    font: {
      title: {
        size: 42,
        weight: "Bold",
        families: ["Noto Sans", "Noto Color Emoji"],
        color: [0, 0, 0],
      },
      description: {
        size: 20,
        weight: "Normal",
        families: ["Noto Sans", "Noto Color Emoji"],
        color: [0, 0, 0],
        lineHeight: 1.4,
      },
    },
    fonts: [
      "./public/fonts/Noto_Sans/NotoSans-VariableFont_wdth,wght.ttf",
      "./public/fonts/Noto_Color_Emoji/NotoColorEmoji-Regular.ttf",
    ],
    padding: 50,
  }),
});

Some learned lessons:
1. Logos: SVGs won’t work here. Use PNGs instead.
2. Fonts: Add font files, if you use fonts.
3. Emojis: If you use emojis in your content, include an emoji font (like “Noto Color Emoji”) to ensure they render correctly.

Step 2: Integrate with astro-seo

I use the astro-seo component in my main Layout component to handle SEO metadata.

For the OG image I add a prop to be passed from the respective page:

const { title, description, ogImage } = Astro.props;

<SEO
  title={title}
  description={description}
  openGraph={{
    basic: {
      title,
      type: "website",
      image: ogImage || `${Astro.site}Ivos-Ecotainment-Newsletter_big.png`, // Fallback
    },
  }}
/>

In Your Content Pages:
Construct the OG image path and pass it to your layout:

const ogImage = `${Astro.site?.href || ""}og/${entry.data.slug}.png`;

<Layout title={entry.data.title} description={description} ogImage={ogImage}>
  {/* Post content */}
</Layout>

Astro Odds:

A bit odd is if your astro.config.mjs has trailingSlash: "always", you’ll need to add a trailing slash to OG image URLs in development:
http://localhost:4321/og/${entry.data.slug}.png/

In prod (no trailing slash needed) so you can just pass it as: http://localhost:4321/og/${entry.data.slug}.png

3. Testing OG Images

As recommend in the Blog post of Aidan Kinzett: Use opengraph.xyz to preview your OG images before sharing links.
Very good tool!

Here is how the OG image looks like with logo, title and description with emojis:

Happy hacking!

Thats great, but it has some caveats, which i like to describe while introducing the silverstripe opengraph module by Damian Mooyman.

The module is pretty well done and delivers most content prefilled. So just install it and the rest comes automatically through the $MetaTags var in your template.
In the backend you can insert some information like locality and your facebook app id.

You should further add a default 200x200px image in your config:

OpenGraphPageExtension::$default_image = '/themes/myTheme/images/og_image.png';

and add the opengraph namespace var in your html tag:

<html lang="en" $OGNS>

Thats basically it, wow!

But of course you have to do some finetuning to represent your content best.
So these questions you should ask yourself for each site where you would like to implement the metatags:

Why should you use opengraph metatags?
To have control over the content of the sharer snippets.

Where should you use opengraph metatags?
Where you can control / predict the content.
Its not always a good idea to preselect the image.
F.E when you have RichText HTML Field where the Content Manager can insert images. Then those images might be good to be shared.
But with a preselected image via the og:image tag, the facebook share box will not list the other images.
So on some pagetypes it might be better to not use the og tags and let the facebook parser do its dirty work.
This you can achieve with overwriting the getOGType function in your pagetype:

NonOGPage extends Page
{
    function getOGType() {
        return null;
    }
}

(thanx Damian)

How should you use it?
Treat your content right. So if you have a structured page type, think of which content fits and overwrite the resp. function of the module to serve the content you would like to see.
F.E. if you have multiple images and you want the user to choose from while in the share dialog then do something like that:

PageWithImages extends Page {
     function OGImage() {
        $imgs = array();
        if ($this->Images()) {
            $images = $this->Images();

            foreach ($images as $value) {
                $og_img = $value->Thumb()->CroppedImage(200, 200);
                $imgs[] = $og_img->Url;
            }
        }
        if(empty($imgs)){
            $imgs[] = Director::absoluteURL(OpenGraphPageExtension::$default_image);
        }
        return $imgs;
    }
}

Who uses the opengraph metatags?
– Facebook of course.
– Google+ seems to prefer schema.org annotation but uses opengraph as fallback and then meta tags and then content.
– Pinterest also seems to use it, partly.
Here is a interesting discussion about it:
http://stackoverflow.com/questions/6536213/are-there-tags-to-specify-the-google-1-story-format-in-google-like-og-meta-for
– and probably some more…

And at last here is the facebook debug tool to check your opengraph contents.