vitepress-plugin-og

Automatically generate Open Graph images for your VitePress pages.

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

Installation

pnpm add -D vitepress-plugin-og

Usage

Add the plugin to your VitePress configuration file (.vitepress/config.ts):

import { defineConfig } from 'vitepress'
import { addOgImage } from 'vitepress-plugin-og'

export default defineConfig({
  // ...
  async transformPageData(pageData, context) {
    await addOgImage(pageData, context, {
      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 | '.vitepress/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 .vitepress/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