(hopefully) the easiest way to generate OpenGraph images from your astro site
npm install 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
Complete with a helpful toolbar app to display your image in development.
``shFirst, run this command to install the integration:
npx astro add astro-opengraph-image
`javascript
// Then, update your astro.config.{mjs|ts} file to configure the integration:
import { defineConfig } from "astro/config";
import opengraphImage from "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 "astro-opengraph-image/components";
---
...
the page
this is the page
...
...
`> [!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> [!NOTE]
>
> astro-opengraph-image uses the Satori HTML layout engine
> and therefore supports the subset of HTML/CSS that Satori implements.