An Rsbuild plugin to generate Open Graph meta tags.
Install:
npm add rsbuild-plugin-open-graph -DAdd plugin to your rsbuild.config.ts:
// rsbuild.config.ts
import { pluginOpenGraph } from 'rsbuild-plugin-open-graph';
export default {
plugins: [
pluginOpenGraph({
// options
}),
],
};- Config:
pluginOpenGraph({
title: 'Rsbuild',
type: 'website',
url: 'https://rsbuild.dev/',
image: 'https://rsbuild.dev/og-image.png',
description: 'The Rspack-based build tool',
twitter: {
site: '@rspack_dev',
card: 'summary_large_image',
},
});- Generated HTML:
<html>
<head>
<meta property="og:url" content="https://rsbuild.dev/" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Rsbuild" />
<meta property="og:image" content="https://rsbuild.dev/og-image.png" />
<meta property="og:description" content="The Rspack-based build tool" />
<meta property="twitter:site" content="@rspack_dev" />
<meta property="twitter:card" content="summary_large_image" />
</head>
<body></body>
</html>Here are the available options:
type PluginOpenGraphOptions = {
url?: string;
type?: string;
title?: 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:
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.
pluginOpenGraph(({ entryName }) => {
const commonOptions = {
type: 'website',
url: 'https://rsbuild.dev/',
image: 'https://rsbuild.dev/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.dev/about',
};
}
});MIT.
![@renovate[bot]](https://avatars.githubusercontent.com/in/2740?s=64&v=4){kind=small}