Request: Add og:image to SEO/Metadata about gatsby-serif-theme

[elijah-io]

Sorry, I think I might just be an idiot lol.

So, Helmet already enables this, I think I was just confused by the syntax at first.

So, I added a unique og:image to my homepage by adding this to my index.js file:

<meta property="og:image" content="/example-image.png"/>

This was added underneath the <meta name="description" content="..." part within <Helmet></Helmet> of the index.js file (around line 14 from this repo).

To add a dynamic og:image on the individual service pages, for example:

1. Import Helmet to the service.js template (templates/service.js) like so: import Helmet from 'react-helmet';
2. Create a Helmet like so, below the <Layout bodyClass="page-service"> opening around line 12:

<Helmet>
        <meta property="og:image" content={ image }/>
        <meta property="og:image:width" content="1200"/>
        <meta property="og:image:height" content="630"/>
</Helmet>

3. Don't forget to include it in your graphql query (just add "image" underneath title or path).

This takes advantage of the specified images already in the individual service .md files.

It's important to include the og:image:width and :height because of some issue with Facebook not being able to render it otherwise. I went kinda quick and forgot/can't find the exact error message it gave me, but the specified width/height fixes it.