# next-static-og-images

> Generate static open graph images for Next.js at build time

Latest version **0.4.1** (published 2024-10-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install next-static-og-images
pnpm add next-static-og-images
yarn add next-static-og-images
bun add next-static-og-images
```

Provides the command `next-static-og-images`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.1 |
| Published | 2024-10-05 |
| First published | 2022-01-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 7 |
| Unpacked size | 15.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 9 |
| Maintainers | adam.hwang |
| Keywords | nextjs, open-graph, og, images |

## Links

- npm: https://www.npmjs.com/package/next-static-og-images
- Repository: https://github.com/adamhwang/next-static-og-images
- Homepage: https://github.com/adamhwang/next-static-og-images#readme
- Issues: https://github.com/adamhwang/next-static-og-images/issues
- npm.io page: https://npm.io/package/next-static-og-images

## Dependencies (7)

- [yargs](https://npm.io/package/yargs.md) ^17.7.2
- [dotenv](https://npm.io/package/dotenv.md) ^16.4.5
- [xml2js](https://npm.io/package/xml2js.md) ^0.6.2
- [bluebird](https://npm.io/package/bluebird.md) ^3.7.2
- [puppeteer](https://npm.io/package/puppeteer.md) ^21.11.0
- [tree-kill](https://npm.io/package/tree-kill.md) ^1.2.2
- [typescript](https://npm.io/package/typescript.md) ^5.6.2

## Alternatives

- [cli-color](https://npm.io/package/cli-color.md) — 3.4M weekly downloads
- [log](https://npm.io/package/log.md) — 1.3M weekly downloads
- [logstash-client](https://npm.io/package/logstash-client.md) — 4.5K weekly downloads
- [@nocobase/plugin-logger](https://npm.io/package/@nocobase/plugin-logger.md) — 2.0K weekly downloads
- [child-process-debug](https://npm.io/package/child-process-debug.md) — 695 weekly downloads

## Recent versions

- 0.4.1 (latest) — 2024-10-05
- 0.2.1 — 2024-02-17
- 0.2.0 — 2023-06-20
- 0.1.1 — 2023-02-05
- 0.1.0 — 2023-01-31
- 0.0.5 — 2022-01-25
- 0.0.4 — 2022-01-11
- 0.0.3 — 2022-01-11
- 0.0.2 — 2022-01-11
- 0.0.1 — 2022-01-11

## README

# next-static-og-images
Generate static Open Graph images for Next.js at build time

## Getting started

### Installation

```npm i -D next-static-og-images```

or

```yarn add -D next-static-og-images```

### Building Open Graph images

Add next-static-og-images to your postbuild script

```json
{
  "build": "next build",
  "postbuild": "next-sitemap && next-static-og-images"
}
```

The sitemap.xml is used to identify pages that need Open Graph images generated. next-static-og-images works best with a sitemap generator like `next-sitemap` and assumes that a sitemap.xml file is created in the public directory.

### Add og:image meta tags

Add the og:image tags to your `_app.js` or to reference the generated images.

```
<meta property="og:image" content="{`${host}/open-graph${asPath == "/" ? "/index" : asPath}.png`}" />
<meta property="og:image:alt" content="..." />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
```

## Configuration options

property|description|type
:-----|:-----|:-----
saveLocation|Directory where images should be saved. This directory will be cleared on each build. Default `"./public/open-graph"`|string
sitemapFilename|File path to the sitemap.xml location. Default `"./public/sitemap.xml"`|string
screenshotType|Specify screenshot type, can be either jpeg or png. Defaults to `"png"`.|string
width|Page width used to create screenshot. Default `1200`|number
height|Page height used to create screenshot. Default `630`|number
deviceScaleFactor|Page device scale factor used to create screenshot. See [devicePixelRatio](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio) for more info. Default `1`|number
ogImageSelector|If specified, screenshot will be based on the first instance a matching instance. If no elements match, the page will be used. Default `undefined`|string
waitUntil|When to consider navigation succeeded. See [waitUntil](https://pptr.dev/#?product=Puppeteer&version=v13.0.1&show=api-framewaitfornavigationoptions) for more info. Default `"networkidle2"`|string

Image sizes will match the page height and width unless an image selector is used.

## Contribution

PRs welcome

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