https://github.com/tomaskebrle/astro-og-image

An astro integration to generate static Open Graph images, at build time
https://github.com/tomaskebrle/astro-og-image

astro og-image seo

Last synced: 13 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/tomaskebrle/astro-og-image
• Owner: tomaskebrle
• Created: 2022-06-27T16:02:05.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-06-03T13:57:00.000Z (over 1 year ago)
• Last Synced: 2024-10-19T03:22:31.855Z (26 days ago)
• Topics: astro, og-image, seo
• Language: TypeScript
• Homepage: https://npmjs.com/package/astro-og-image
• Size: 152 KB
• Stars: 47
• Watchers: 1
• Forks: 14
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# :rocket: 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](https://www.npmjs.com/package/astro-og-image).

```bash

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

```typescript

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.

```html

  

    

    

    

    Document

  

  

    
@title

  


```

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

```md

---

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

```astro

---

const { title, description, publishDate, slug } = content; // Destructure 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._

```astro

---

export interface Props {

	title: string;

	description: string;

	slug: string;

}

const { title, description, slug, publishDate } = Astro.props;

---

```

## 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](https://www.opengraph.xyz/).