configure social share image

src/components/seo.js

@@ -12,7 +12,7 @@ import { useStaticQuery, graphql } from "gatsby"
 
 import favicon from '../images/mountains.svg';
 
-function SEO({ description, lang, meta, title }) {
+function SEO({ description, lang, meta, title, imageShare }) {
   const { site } = useStaticQuery(
     graphql`
       query {
@@ -21,6 +21,7 @@ function SEO({ description, lang, meta, title }) {
             title
             description
             author
+            siteUrl
           }
         }
       }
@@ -53,6 +54,10 @@ function SEO({ description, lang, meta, title }) {
           property: `og:type`,
           content: `website`,
         },
+        {
+          property: `og:image`,
+          content: `${site.siteMetadata.siteUrl}${imageShare}`,
+        }
       ].concat(meta)}
       link={[
         { rel: 'shortcut icon', type: 'image/png', href: `${favicon}` }
@@ -65,13 +70,15 @@ SEO.defaultProps = {
   lang: `en`,
   meta: [],
   description: ``,
+  imageShare: '/default.jpeg',
 }
 
 SEO.propTypes = {
   description: PropTypes.string,
   lang: PropTypes.string,
   meta: PropTypes.arrayOf(PropTypes.object),
   title: PropTypes.string.isRequired,
+  imageShare: PropTypes.string,
 }
 
 export default SEO

src/posts/devil_of_the_highlands.md

@@ -2,6 +2,7 @@
 path: "/posts/devil-o-the-highlands"
 date: "2023-08-22"
 title: "Devil o' the Highlands Footrace"
+imageShare: ../images/devil-of-the-highlands/finish_line.jpeg
 ---
 
 ![Smiles at Cow Hill](../images/devil-of-the-highlands/smiles_at_cow_hill.jpeg "📷 Michael Philp")

src/templates/post-template.js

@@ -10,9 +10,10 @@ export default function Template({
   const { markdownRemark } = data // data.markdownRemark holds your post data
   const { frontmatter, html } = markdownRemark
 
+  const imageShare = frontmatter.imageShare ? frontmatter.imageShare.publicURL : '/default.jpeg';
   return (
     <Layout>
-      <SEO title={frontmatter.title} />
+      <SEO title={frontmatter.title} imageShare={imageShare} />
       <div className="blog-post-container">
       <div className="blog-post">
         <h1>{frontmatter.title}</h1>
@@ -36,6 +37,9 @@ export const pageQuery = graphql`
         date(formatString: "MMMM DD, YYYY")
         path
         title
+        imageShare {
+          publicURL
+        }
       }
     }
   }