https://github.com/rspack-contrib/rsbuild-plugin-open-graph

An Rsbuild plugin to generate Open Graph meta tags.
https://github.com/rspack-contrib/rsbuild-plugin-open-graph

plugin rsbuild rspack

Last synced: 3 months ago
JSON representation

An Rsbuild plugin to generate Open Graph meta tags.

• Host: GitHub
• URL: https://github.com/rspack-contrib/rsbuild-plugin-open-graph
• Owner: rspack-contrib
• License: mit
• Created: 2024-03-25T02:50:45.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2024-03-25T03:48:55.000Z (3 months ago)
• Last Synced: 2024-03-26T03:48:23.864Z (3 months ago)
• Topics: plugin, rsbuild, rspack
• Language: TypeScript
• Homepage:
• Size: 8.79 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-rspack - rsbuild-plugin-open-graph

README

        
# 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({

  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

  

    

    

    

    

    

    

    

  

  

```

## Options

Here are the available options:

```ts

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:

- [The Open Graph protocol](https://ogp.me/)

- [The Open Graph of Twitter](https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards)

- [The Open Graph of Meta / Facebook](https://developers.facebook.com/docs/sharing/webmasters)

## License

[MIT](./LICENSE).