rsbuild-plugin-open-graph's Introduction

rsbuild-plugin-open-graph

An Rsbuild plugin to generate Open Graph meta tags.

Usage

Install:

npm add rsbuild-plugin-open-graph -D

Add plugin to your rsbuild.config.ts:

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

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

Example

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>

Options

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;
  };
};