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

Setup

Prerequisites

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

Config

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: [
    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
      },
    }),
  ],
});

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">
  <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.

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

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.

/astro-og-image/

    Package Sidebar

    Install

    npm i astro-og-image

    Weekly Downloads

    5

    Version

    1.0.7

    License

    MIT

    Unpacked Size

    6.12 kB

    Total Files

    4

    Last publish

    Collaborators

    • kendy205