TypeScript icon, indicating that this package has built-in type declarations

1.0.7 • Public • Published

🚀 Astro Open Graph Image

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-image


Now 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: [
      config: {
        path: "/posts", // change this value to the folder where your posts are
        // NOTE: file will not get proccesed, so please avoid it

Creating template for the image

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">
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

Note that the @title will then be replaced by the title of your post.

Adding the Open Graph image property to your BaseHead

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'}>
		<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`} />

Final steps

Great now you should be done!🎉 Deploy your site and test it out. Great site for testing this out is Open Graph previewer.


npm i astro-og-image

DownloadsWeekly Downloads






Unpacked Size

6.12 kB

Total Files


Last publish


  • kendy205