Registry / web-framework / vite-plugin-open-graph

vite-plugin-open-graph

library2.0.6jsnpmunverified

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.

web-framework devops

npm install vite-plugin-open-graph

github ↗package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-OPEN-G

vite-plugin-open-graph

web-frameworkjavascriptv2.0.6

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default export

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

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

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

Options

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

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

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

ogVitePlugin

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

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

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

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)], });

Debug

Known issues

breakingv2.0.0 dropped support for Vite 4 and below; requires Vite 5 or higher.

fix

Upgrade Vite to version 5 or higher.

affects: >=2.0.0

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

fix

Ensure Node version is >=16.

affects: >=2.0.3-beta.1

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

fix

No action needed.

affects: >=1.0.0

gotchaIf 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.

affects: >=2.0.0

gotchaThe '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.

affects: *

gotchaThe '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).

affects: *

Errors

Common errors & fixes

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

Plugin not installed or not in node_modules.

fix

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

TypeError: ogPlugin is not a function

Named import used instead of default import.

fix

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

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

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

fix

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

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

Missing types or incorrect module resolution.

fix

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

Error: generateMetaTags is not defined or similar runtime error

Misunderstanding of plugin API; no separate generateMetaTags function.

fix

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

Upgrade

Version history

2.0.6latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

24 hits · last 30 days

node

Bingbot

OpenAI (training)

Resources

githubhttps://github.com/Lmmmmmm-bb/vite-plugin-open-graph ↗

packagehttps://www.npmjs.com/package/vite-plugin-open-graph ↗