astro-opengraph-image

> (hopefully) the easiest way to generate OpenGraph images from your Astro site

Define your OpenGraph image with HTML/CSS, inline in your Astro components.

!the Astro toolbar with a preview of an OpenGraph image

Getting Started

``sh


First, run this command to install the integration:

npx astro add @sumitgohil/astro-opengraph-image

Next, you will want one or more fonts to use in your images,

I like the fonts available at https://www.npmjs.com/org/fontsource, e.g.:

npm install @fontsource/inter
`

`javascript
// Then, update your astro.config.{mjs|ts} file to configure the integration:
import { defineConfig } from "astro/config";
import opengraphImage from "@sumitgohil/astro-opengraph-image";
import { readFile } from "node:fs/promises";

export default defineConfig({
integrations: [
opengraphImage({
// what color do you want your background to be?
background: "#000000",

// what size do you want your images to be?
// 1200x630 is a good default across platforms,
// and 3x scale is a convenient choice.
width: 1200,
height: 630,
scale: 3,

// the fonts you picked before. you will have to include the particular
// weights and variants you want to use.
fonts: [
{
name: "Inter",
data: await readFile(
"node_modules/@fontsource/inter/files/inter-latin-400-normal.woff",
),
style: "normal",
weight: 400,
},
{
name: "Inter",
data: await readFile(
"node_modules/@fontsource/inter/files/inter-latin-700-normal.woff",
),
style: "normal",
weight: 700,
},
],
}),
],
});
`

`astro
---
// Lastly, inside your , render the OgImage component to
// specify what you want in your image:

import { OgImage } from "@sumitgohil/astro-opengraph-image/components";
---




...



the page

this is the page

...

...

`

You can also specify a custom filename for your OpenGraph image:

`astro



The page with custom image name




`

> [!NOTE]
>
> Your image is only influenced by code inside the tag.
> This means all relevant styles must live inside the tag.
>
> Additionally, your styles must always have the is:inline` attribute to convince Astro
> not to modify or hoist them.

> [!NOTE]
>
> astro-opengraph-image uses the Satori HTML layout engine
> and therefore supports the subset of HTML/CSS that Satori implements.