gatsby-plugin-og-images
v1.2.0
Published
Generate OG images for your statically generated pages
Downloads
29
Maintainers
Readme
Description
Easly get dynamically generated open graph images for your markdown pages out of a custom template of your own and use the nifty component to pass to your pages SEO ready og images.
How to install
yarn add gatsby-plugin-og-images
ornpm i gatsby-plugin-og-images
- Place your config options in your main
gatsby-config.js
as mentioned below.
Sample gatsby-config.js
configuration:
plugins: [
{
resolve: 'gatsby-plugin-og-images',
options: {
template: 'og',
domain: process.env.GATSBY_DOMAIN,
debug: true
}
}
];
Available options
| option | value | description |
| -------- | --------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
| template | string (required) | Provide here the template you want to use as the OG image page (from the /templates
folder |
| domain | string (required, unless hosted on Netlify) | Provide here the url of your website, you can obviously store it in a .env variable and ie. process.env.GATSBY_DOMAIN |
| debug | boolean (otional) | Log the generated og images |
In-built SEO component
In combo with og image generation the plugin provides a component that in combo with react-helmet
provides SEO friendly og:images.
To use it:
...
import OgImage from 'gatsby-plugin-og-images'
....
const Og = ({ data }) => {
const { id } = data.markdownRemark
return (
<div>
...
<OgImage id={id} />
</div>
)
}
export const og = graphql`
query og($id: String!) {
markdownRemark(id: { eq: $id }) {
id
}
}`