An astro integration to generate static Open Graph images, at build time
You will need an astro site with a blog. And then you need to install astro-og-image package.
npm i astro-og-image
pnpm add astro-og-image
yarn add astro-og-imageNow you will need to import the integration into your astro config
import {defineConfig} from "astro/config";
import astroOGImage from "astro-og-image";
export default defineConfig({
integrations: [
astroOGImage({
config: {
path: "/posts", // change this value to the folder where your posts are
// NOTE: index.md file will not get proccesed, so please avoid it
},
}),
],
});As I stated before the image will be created by screenshotting an HTML page. The integration will load the HTML from og-image.html file, so create one in the root directory and put your template inside.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>@title</h1>
</body>
</html>Note that the @title will then be replaced by the title of your post.
First of all you will need to add the slug property to your markdown files something like this
---
title: My first
publishDate: 28 Jun 2022
description: The very first post on my new blog
slug: my-post // <-- NOTE: slug must be the same as file name
---Then in your blogpost layout modify the BaseHead component to accept the slug as a parameter
---
const { title, description, publishDate, slug } = content; // Destructure it here
---
<html lang={content.lang || 'en'}>
<head>
<BaseHead {title} {description} {slug} {publishDate} /> <!-- Pass it here -->And modify the BaseHead component meta tags. I recomennd that you use a fallback image for all the non posts pages, and in case something goes wrong.
---
export interface Props {
title: string;
description: string;
slug: string;
}
const { title, description, slug, publishDate } = Astro.props;
---
<meta property="og:image" content={slug !== undefined ? `/assets/your-posts-folder/${slug}.png` : `/assets/fallback-image.png`} />
<meta property="twitter:image" content={slug !== undefined ? `/assets/your-posts-folder/${slug}.png` : `/assets/fallback-image.png`} />Great now you should be done!🎉 Deploy your site and test it out. Great site for testing this out is Open Graph previewer.