https://github.com/lmmmmmm-bb/vite-plugin-open-graph
Generate Open Graph meta tags with simple configuration.
https://github.com/lmmmmmm-bb/vite-plugin-open-graph
metatag open-graph open-graph-generator open-graph-protocol seo vite-plugin
Last synced: 9 months ago
JSON representation
Generate Open Graph meta tags with simple configuration.
- Host: GitHub
- URL: https://github.com/lmmmmmm-bb/vite-plugin-open-graph
- Owner: Lmmmmmm-bb
- License: mit
- Created: 2022-09-30T15:56:55.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2025-04-16T06:55:41.000Z (10 months ago)
- Last Synced: 2025-04-29T22:24:28.904Z (9 months ago)
- Topics: metatag, open-graph, open-graph-generator, open-graph-protocol, seo, vite-plugin
- Language: TypeScript
- Homepage:
- Size: 625 KB
- Stars: 7
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vite-plugin-open-graph
[](https://github.com/Lmmmmmm-bb/vite-plugin-open-graph/blob/main/LICENSE)
[](https://github.com/Lmmmmmm-bb/vite-plugin-open-graph/releases)
Generate Open Graph meta tags with simple configuration for your Vite app.
## Features
- Twitter Card and Facebook support.
- First-class type support.
## Install
```bash
npm i vite-plugin-open-graph -D
```
```ts
import { defineConfig } from 'vite';
import ogPlugin from 'vite-plugin-open-graph';
export default defineConfig({
plugins: [
ogPlugin({
// your Open Graph information config
})
],
});
```
Example
```ts
import type { Options } from 'vite-plugin-open-graph';
import { defineConfig } from 'vite';
import ogPlugin 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)],
});
```
```html
```
## Types
You can consult the `.d.ts` file to see more descriptions of the fields when develop.
```ts
// 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;
}
```
```ts
interface ImageOptions {
url?: string;
secureUrl?: string;
type?: string;
width?: number;
height?: number;
alt?: string;
}
type VideoOptions = Omit;
```
```ts
// 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;
};
};
}
```
```ts
export interface FacebookOptions {
appId: number;
}
```
## Reference
- [Open Graph protocol](https://ogp.me/)
- [Open Graph of Twitter Card](https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards)
- [Open Graph of Facebook](https://developers.facebook.com/docs/sharing/webmasters/)
## License
[**MIT**](./LICENSE) License © 2022 [\_lmmmmmm](https://github.com/Lmmmmmm-bb)