rspress-plugin-og

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

pnpm add -D rspress-plugin-og

Usage

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

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

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

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:

<svg width="1200" height="630" viewBox="0 0 1200 630" xmlns="http://www.w3.org/2000/svg">
  <!-- Background -->
  <rect width="1200" height="630" fill="#1e1e1e" />

  <!-- Title -->
  <text x="60" y="200" font-family="Arial" font-size="80" fill="#ffffff">
    <tspan x="60" dy="0">{{line1}}</tspan>
    <tspan x="60" dy="100">{{line2}}</tspan>
    <tspan x="60" dy="100">{{line3}}</tspan>
  </text>
</svg>

Sponsors

License

MIT License © 2025-PRESENT Estéban Soubiran