Request: Add og:image to SEO/Metadata

[elijah-io]

As you can see, Facebook and Twitter's social card debugger isn't picking up any image(s) in the metadata (should be in the og:image format). The og:title and og:description seem to be pulling from the regular site metadata just fine. I hate to open an issue (a request) for this, but I have been banging my head against this issue for awhile now and can't seem to figure it out. The SEO.js file isn't in a format I'm familiar with even though I've worked with Gatsby before. I have even tried to add a meta tag manualy to the index.js layout to no avail. Sorry if this is lacking detail or isn't a feature you're looking to add – feel free to close if that's the case and I'll keep working on it/post a solution back here in a PR if I figure it out.

[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.