rspress-plugin-og

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]

Automatically generate Open Graph images for your Rspress pages.

- 🖼️ Generates OG images from an SVG template
- 🚀 Integrates with Rspress
- 🧩 Bring your own SVG template

Installation

``bash
pnpm add -D rspress-plugin-og
`

Usage

Add the plugin to your Rspress configuration file (rspress.config.ts):

For Rspress v2:

`ts
import { defineConfig } from '@rspress/core'
import pluginOg from 'rspress-plugin-og'

export default defineConfig({
plugins: [
pluginOg({
domain: 'https://example.com',
// ...other options
}),
],
})
`

For Rspress v1:

This is a plugin that is compatible with both V2 and V1, but when used in V1, there may be type errors.

`ts
import pluginOg from 'rspress-plugin-og'
import { defineConfig } from 'rspress/config'

export default defineConfig({
plugins: [
pluginOg({
domain: 'https://example.com',
// ...other options
}) as any,
],
})
`

Configuration

| Option | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| domain | string | Required | The domain to use for the generated OG image URLs. |
| outDir | string | 'og' | Output directory for the generated OG images (inside public). |
| ogTemplate | string | 'og-template.svg' | The path to the OG image template file. |
| maxTitleSizePerLine | number | 30 | Maximum number of characters per line in the title. |

Template

Create an SVG template at og-template.svg (or your configured path). Use {{line1}}, {{line2}}, and {{line3}} placeholders for the title lines.

Example:

`xml






{{line1}}
{{line2}}
{{line3}}


``

Sponsors

License

MIT License © 2025-PRESENT Estéban Soubiran

[npm-version-src]: https://img.shields.io/npm/v/rspress-plugin-og/latest.svg?style=flat&colorA=000&colorB=171717
[npm-version-href]: https://npmjs.com/package/rspress-plugin-og

[npm-downloads-src]: https://img.shields.io/npm/dm/rspress-plugin-og.svg?style=flat&colorA=000&colorB=171717
[npm-downloads-href]: https://npmjs.com/package/rspress-plugin-og

[license-src]: https://img.shields.io/npm/l/rspress-plugin-og.svg?style=flat&colorA=000&colorB=171717
[license-href]: https://npmjs.com/package/rspress-plugin-og