Gatsby Image Path to og:image for SEO

Question

I'm using markdown pages to generate my pages on Gatsby. I'm defining the image path inside the .md file.

---
slug: "/blog/my-blog-post"
date: "2022-01-11"
title: "My title"
image: /images/blog/my-image-1.png
---
![image-alt](/images/blog/my-image-1.png)
# My content header

My content

{MarkdownRemark.frontmatter__slug}.js

import React from "react"
import { Helmet } from "react-helmet"
import BaseController from "../base-controller"
import { graphql } from "gatsby"
import { getSrc } from "gatsby-plugin-image"
const baseUrl = 'https://pppx.com';
export default function Template({
  data, // this prop will be injected by the GraphQL query below.
}) {
  const { markdownRemark } = data // data.markdownRemark holds your post data
  const { frontmatter, html } = markdownRemark
  const image = getSrc(frontmatter.image); // image returns as undefined.
  console.log("image",image);
  return (
    <BaseController>
      <Helmet>
        <title>{frontmatter.title}</title>
        <meta name="title" content={frontmatter.title} />
        <!-- this line doesn't work as expected -->
        <meta property="og:image" content={frontmatter.image} />
      </Helmet>
      <section>
        <div class="container">
          <div class="row justify-content-center">
              <div class="col-md-12 col-lg-12" dangerouslySetInnerHTML={{ __html: html }}>
              </div>
          </div>
        </div>
      </section>
    </BaseController>
  )
}

export const pageQuery = graphql`
  query og($id: String!) {
    markdownRemark(id: { eq: $id }) {
      html
      frontmatter {
        slug
        title
        image
      }
    }
  }
  `

Here I need og:image as the url that is generated by Gatsby. But I couldn't do that.

By the way,

const image = getSrc(frontmatter.image); // image returns as undefined.
console.log("image",image);

returns undefined. so getSrc doesn't help me.

Is there way to get og:image working?

Ferran Buireu · Accepted Answer · 2022-01-24T06:05:19.457

Your getSrc is returning undefined because your GraphQL query is not returning all the data that is supposed to return.

That said, getSrc is a helper function that helps you to write cleaner code and it's not mandatory at all. Using the docs as a fallback:

Get the default image src as a string. This will be the fallback, so usually jpg or png. Accepts the same types as getImage.

And if you look at getImage example:

const image = getImage(data.avatar)
// This is the same as:
const image = data?.avatar?.childImageSharp?.gatsbyImageData

The problem here is that you query ends in image without querying childImageSharp nor gatsbyImageData. Your query should look like:

export const pageQuery = graphql`
  query og($id: String!) {
    markdownRemark(id: { eq: $id }) {
      html
      frontmatter {
        slug
        title
        image {
         childImageSharp {
            gatsbyImageData(
              width: 200
              placeholder: BLURRED
              formats: [AUTO, WEBP, AVIF]
            )
          }
        }
      }
    }
  }
  `

The fact that is allowing you to query image without warnings or breaking the code because it should bother about the inside nodes, points me to think that your filesystem maybe it's not been properly set, so Gatsby is not able to create the data nodes for the images. So before that, you should test your query in the GraphiQL playground (localhost:8000/___graphql) in order to check that you are querying the mandatory data nodes, otherwise, your getSrc will never work because it doesn't contain the needed data. Use something like:

{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `blogImaghes`,
    path: `${__dirname}/src/images/blog/`,
  },
},

Gatsby Image Path to og:image for SEO

1 Answers1