vite-plugin-open-graph
Generate Open Graph meta tags with simple configuration for your Vite app.
Features
- Twitter Card and Facebook support.
- First-class type support.
Install
npm i vite-plugin-open-graph -Dimport { defineConfig } from 'vite';
import ogPlugin from 'vite-plugin-open-graph';
export default defineConfig({
plugins: [
ogPlugin({
// your Open Graph information config
})
],
});Example
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://lmmmmmm.me',
title: '_lmmmmmm',
type: 'image.png',
image: 'https://lmmmmmm.me/avatar.png',
determiner: 'auto',
description: '_lmmmmmm, Front-end Developer.',
locale: 'zh_CN',
localeAlternate: ['fr_FR', 'es_ES'],
siteName: '_lmmmmmm',
audio: {
url: 'audio url',
secureUrl: 'audio secure url',
type: 'video.movie',
},
video: 'video meta',
},
twitter: {
image: 'https://lmmmmmm.me/avatar.png',
imageAlt: 'twitter image alt',
player: 'player',
playerWidth: 1200,
playerHeight: 600,
playerStream: 'player stream',
app: {
name: {
iphone: 'iphone name',
ipad: 'ipad name',
googleplay: 'google play name',
},
id: {
iphone: 'iphone url',
ipad: 'ipad url',
googleplay: 'google play url',
},
url: {
iphone: 'iphone url',
ipad: 'ipad url',
googleplay: 'google play url',
},
},
},
facebook: {
appId: 123456,
},
};
export default defineConfig({
plugins: [ogPlugin(ogOptions)],
});<!-- this config will generated inside html head tag -->
<meta property="og:url" content="https://lmmmmmm.me">
<meta property="og:title" content="_lmmmmmm">
<meta property="og:type" content="image.png">
<meta property="og:image" content="https://lmmmmmm.me/avatar.png">
<meta property="og:determiner" content="auto">
<meta property="og:description" content="_lmmmmmm, Front-end Developer.">
<meta property="og:locale" content="zh_CN">
<meta property="og:locale:alternate" content="fr_FR">
<meta property="og:locale:alternate" content="es_ES">
<meta property="og:site_name" content="_lmmmmmm">
<meta property="og:audio:url" content="audio url">
<meta property="og:audio:secure_url" content="audio secure url">
<meta property="og:audio:type" content="video.movie">
<meta property="og:video" content="video meta">
<meta name="twitter:image" content="https://lmmmmmm.me/avatar.png">
<meta name="twitter:image:alt" content="twitter image alt">
<meta name="twitter:player" content="player">
<meta name="twitter:player:width" content="1200">
<meta name="twitter:player:height" content="600">
<meta name="twitter:player:stream" content="player stream">
<meta name="twitter:app:name:iphone" content="iphone name">
<meta name="twitter:app:name:ipad" content="ipad name">
<meta name="twitter:app:name:googleplay" content="google play name">
<meta name="twitter:app:id:iphone" content="iphone url">
<meta name="twitter:app:id:ipad" content="ipad url">
<meta name="twitter:app:id:googleplay" content="google play url">
<meta name="twitter:app:url:iphone" content="iphone url">
<meta name="twitter:app:url:ipad" content="ipad url">
<meta name="twitter:app:url:googleplay" content="google play url">
<meta name="fb:app_id" content="123456">Types
You can consult the .d.ts file to see more descriptions of the fields when develop.
// Base Plugin Config
interface Options {
basic?: BasicOptions;
twitter?: TwitterOptions;
facebook?: FacebookOptions;
}
interface BasicOptions {
title?: string;
type?: string;
image?: string | ImageOptions;
url?: string;
description?: string;
determiner?: 'a' | 'an' | 'the' | 'auto' | '';
locale?: string;
localeAlternate?: string[];
siteName?: string;
video?: string | VideoOptions;
}interface ImageOptions {
url?: string;
secureUrl?: string;
type?: string;
width?: number;
height?: number;
alt?: string;
}
type VideoOptions = Omit<ImageOptions, 'alt'>;// Twitter Open Graph Options
interface TwitterOptions {
card?: 'summary' | 'summary_large_image' | 'app' | 'player';
site?: string;
siteId?: string;
creator?: string;
creatorId?: string;
description?: string;
title?: string;
image?: string;
imageAlt?: string;
player?: string;
playerWidth?: number;
playerHeight?: number;
playerStream?: string;
app?: {
name?: {
iphone?: string;
ipad?: string;
googleplay?: string;
};
id?: {
iphone?: string;
ipad?: string;
googleplay?: string;
};
url?: {
iphone?: string;
ipad?: string;
googleplay?: string;
};
};
}export interface FacebookOptions {
appId: number;
}