Skip to content

tomaskebrle/astro-og-image

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

An astro integration to generate static Open Graph images, at build time

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published