# astro-seo-images

> Use Astro templates to generate social images for your Astro build

Latest version **4.0.0** (published 2025-07-06) · ISC license · 0 weekly downloads

## Install

```sh
npm install astro-seo-images
pnpm add astro-seo-images
yarn add astro-seo-images
bun add astro-seo-images
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.0.0 |
| Published | 2025-07-06 |
| First published | 2022-08-13 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | David Warrington |
| Maintainers | davidwarrington |
| Keywords | astro, astro-integration |

## Links

- npm: https://www.npmjs.com/package/astro-seo-images
- Homepage: https://github.com/davidwarrington/astro-seo-images
- Issues: https://github.com/davidwarrington/astro-seo-images/issues
- npm.io page: https://npm.io/package/astro-seo-images

## Dependencies (2)

- [playwright](https://npm.io/package/playwright.md) ^1.53.2
- [playwright-cluster](https://npm.io/package/playwright-cluster.md) ^1.0.7

## Recent versions

- 4.0.0 (latest) — 2025-07-06
- 3.0.0 — 2024-08-31
- 2.0.0 — 2024-01-16
- 1.0.0 — 2022-08-13

## README

# Astro SEO Images

Use Astro templates to generate social images for your Astro build

## Usage

## Install

```bash
pnpm install --save-dev astro-seo-images

# or if you prefer yarn
yarn add --dev astro-seo-images

# or if you prefer npm
npm install --save-dev astro-seo-images
```

### Create your template(s)

This example is at `/src/pages/blog/[slug]/card.astro`. You can visit this page whilst running in dev mode to check how it will look.

You can create any template you like here. Import CSS, JavaScript and images to your hearts content.

```astro
---
// /src/pages/blog/[slug]/card.astro
export async function getStaticPaths() {
  return ['a', 'b', 'c'].map(slug => {
    return {
      params: { slug },
      props: { title: slug },
    },
  });
}

interface Props {
  title: string;
}

const { title } = Astro.props;
---

<h1>
  {title}
</h1>

```

## Add the integrations

Add the integration to your Astro config. The `routes` property is required. For any file you wish to use as a template just remove `/src/pages` from the beginning of the filepath, and the `.astro` extension, and that will be your route. `routes` accepts an array so if you have multiple templates you wish to use this should work.

```ts
import { defineConfig } from 'astro/config';
import socialImages from 'astro-seo-images';

export default defineConfig({
  integrations: [
    socialImages({
      routes: ['/blog/[slug]/card'],
    }),
  ],
});
```

## Build your site

On creating a production build PNG images will be generated at the routes you provided. In the example above this would mean I could expect to see images at `/dist/blog/a/card.png`, `/dist/blog/b/card.png` and `/dist/blog/c/card.png`.

---
_Source: https://npm.io/package/astro-seo-images · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._