rsbuild-plugin-open-graph

An Rsbuild plugin to generate Open Graph meta tags.

Usage

Install:

``bash
npm add rsbuild-plugin-open-graph -D
`

Add plugin to your rsbuild.config.ts:

`ts
// rsbuild.config.ts
import { pluginOpenGraph } from 'rsbuild-plugin-open-graph';

export default {
plugins: [
pluginOpenGraph({
// options
}),
],
};
`

Example

- Config:

`ts
pluginOpenGraph({
// Note, title is page-specific
title: 'Rsbuild Home Page',
// While site name is site wide
siteName: 'Rsbuild',
type: 'website',
url: 'https://rsbuild.rs/',
image: 'https://rsbuild.rs/og-image.png',
description: 'The Rspack-based build tool',
twitter: {
site: '@rspack_dev',
card: 'summary_large_image',
},
});
`

- Generated HTML:

`html













`

Options

Here are the available options:

`ts
type PluginOpenGraphOptions = {
url?: string;
type?: string;
title?: string;
siteName?: string;
image?: string;
audio?: string;
video?: string;
locale?: string;
determiner?: 'a' | 'an' | 'the' | 'auto' | '';
description?: string;
twitter?: {
site?: string;
card?: string;
title?: string;
image?: string;
player?: string;
creator?: string;
description?: string;
};
};
`

See the following documents for details:

- The Open Graph protocol
- The Open Graph of Twitter
- The Open Graph of Meta / Facebook

Multi Page Application

If you are using a multi-page application, you can pass a function to the plugin options. The function will be called with the entryName as the argument, and you can return the options for each entry.

`ts
pluginOpenGraph(({ entryName }) => {
const commonOptions = {
type: 'website',
url: 'https://rsbuild.rs/',
image: 'https://rsbuild.rs/og-image.png',
description: 'The Rspack-based build tool',
twitter: {
site: '@rspack_dev',
card: 'summary_large_image',
},
};

if (entryName === 'index') {
return {
...commonOptions,
title: 'Index',
};
}
if (entryName === 'about') {
return {
...commonOptions,
title: 'About',
url: 'https://rsbuild.rs/about',
};
}
});
``

License

MIT.