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: processenvGATSBY_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 = datamarkdownRemark return <div> ... <OgImage = /> </div> const og = graphql`query og($id: String!) { markdownRemark(id: { eq: $id }) { id }}`