vite-plugin-open-graph

2.0.6 verified Mon Apr 27 auth: no javascript

A Vite plugin that automatically generates Open Graph meta tags into your HTML head based on a configuration object. Current stable version is 2.0.6, targeting Vite 5+ (requires Node >=16). It supports Twitter Card, Facebook app ID, and full Open Graph protocol fields with TypeScript types included. Differentiators: simple declarative config, no runtime overhead (build-time injection), and first-class type support. Release cadence is irregular, mostly bug fixes and minor feature additions.

Common errors

error Module not found: Error: Can't resolve 'vite-plugin-open-graph' ↓

cause Plugin not installed or not in node_modules.

fix

Run 'npm install vite-plugin-open-graph --save-dev' (or yarn/pnpm equivalent).

error TypeError: ogPlugin is not a function ↓

cause Named import used instead of default import.

fix

Use 'import ogPlugin from 'vite-plugin-open-graph'' (default import).

error Options is not exported from 'vite-plugin-open-graph' ↓

cause Trying to import Options at runtime instead of type-only.

fix

Use 'import type { Options } from 'vite-plugin-open-graph''.

error Cannot find module 'vite-plugin-open-graph' or its corresponding type declarations. ↓

cause Missing types or incorrect module resolution.

fix

Ensure TypeScript is configured with 'moduleResolution': 'node' (or 'bundler') and that the package is installed.

error Error: generateMetaTags is not defined or similar runtime error ↓

cause Misunderstanding of plugin API; no separate generateMetaTags function.

fix

The plugin automatically injects meta tags during build. No manual generation needed.

Warnings

breaking v2.0.0 dropped support for Vite 4 and below; requires Vite 5 or higher. ↓

fix Upgrade Vite to version 5 or higher.

breaking Node 16 is the minimum required engine since v2.0.3-beta.1; older Node versions are not supported. ↓

fix Ensure Node version is >=16.

deprecated The 'basic' configuration field remains the primary way to set OG meta; no deprecation yet. ↓

fix No action needed.

gotcha If you use the plugin in a monorepo, ensure all dependencies are hoisted or installed properly; v2.0.4 fixed a monorepo deps issue. ↓

fix Install the plugin in the root node_modules or use workspaces correctly.

gotcha The 'type' field in 'basic' is the Open Graph type, not the HTML meta content type. It should be a valid OG type (e.g., 'website', 'article'). ↓

fix Set 'basic.type' to a valid OG type; see https://ogp.me/#types.

gotcha The 'image' field expects a URL string, not a buffer or file path. ↓

fix Provide a fully qualified URL (absolute or relative to the site base).

Install

npm install vite-plugin-open-graph

yarn add vite-plugin-open-graph

pnpm add vite-plugin-open-graph

Imports

default export

wrong

import { ogPlugin } from 'vite-plugin-open-graph'

correct

import ogPlugin from 'vite-plugin-open-graph'

The plugin is exported as default. Named export 'ogPlugin' does not exist.

Options

wrong

import { Options } from 'vite-plugin-open-graph'

correct

import type { Options } from 'vite-plugin-open-graph'

Options is a type-only export; use 'import type' to avoid runtime import.

ogVitePlugin

wrong

import ogVitePlugin from 'vite-plugin-open-graph'; // not recommended, but works

correct

import ogPlugin from 'vite-plugin-open-graph'

The default export is the plugin function. You can rename it when importing.

Quickstart

Configures the plugin with basic OG meta, Twitter Card, and Facebook app ID, generating appropriate <meta> tags in the HTML head.

import { defineConfig } from 'vite';
import ogPlugin from 'vite-plugin-open-graph';
import type { Options } from 'vite-plugin-open-graph';

const ogOptions: Options = {
  basic: {
    url: 'https://example.com',
    title: 'Example Site',
    type: 'website',
    image: 'https://example.com/og-image.png',
    description: 'A description of the site',
    locale: 'en_US',
    localeAlternate: ['fr_FR'],
    siteName: 'Example',
  },
  twitter: {
    card: 'summary_large_image',
    image: 'https://example.com/twitter-image.png',
  },
  facebook: {
    appId: 123456789,
  },
};

export default defineConfig({
  plugins: [ogPlugin(ogOptions)],
});