Gatsby SEO image keeps rendering objects instead of images in the meta image tag

Question

So I am using react-helmet plugin to add meta tags to the head of the HTML when the page is rendered, every other tag is working properly except the image tag which keeps on rendering objects instead of the image itself. Here is the code of my SEO component:

SEO.js

import React from "react";
import { graphql, useStaticQuery } from "gatsby";
import { Helmet } from "react-helmet";
import { useLocation } from "@reach/router";

function SEO(props) {
  const { site, images } = useStaticQuery(graphql`
    query SeoMetaData {
      site {
        siteMetadata {
          description
          title
          siteUrl
          twitterUsername
        }
      }
      images: file(
      absolutePath: { glob: "**/src/images/preview-icon.png"}
      ) {
        childImageSharp {
          gatsbyImageData(layout: FIXED, width: 1200)
        }
      }
    }
  `);

  const location = useLocation();
  const seo = {
    title: props.title
      ? `${props.title} - ${site.siteMetadata.title}`
      : site.siteMetadata.title,
    description: props.description || site.siteMetadata.description,
    images: props.images ?? images?.childImageSharp?.gatsbyImageData,
    twitterUsername: site.siteMetadata.twitterUsername,
  };

  return (
    <Helmet>
      <title>{seo.title}</title>
      <meta property="og:title" content={seo.title} />
      <meta name="description" content={seo.description} />
      <meta property="og:description" content={seo.description} />
      <meta
        name="keywords"
        content={"health, fitness, healthy living, WhatsApp tv, blog, menstrual pain, exercise, health guru, healthguru"}
      />
      <meta name="image" content={seo.images} />
      <meta property="og:image" content={seo.images} />
      <meta property="og:type" content="website" />
      <meta property="og:url" content={`${site?.siteMetadata?.siteUrl}${location.pathname}`} />
      <meta name="og:url" content={`${site?.siteMetadata?.siteUrl}${location.pathname}`} />
      <meta name="twitter:card" content="summary_large_image" />
      <meta name="twitter:title" content={seo.title} />
      <meta name="twitter:description" content={seo.description} />
      <meta name="twitter:image" content={seo.images} />
      <meta name="twitter:creator" content={seo.twitterUsername} />
    </Helmet>
  );
  
}

export default SEO;

When I console.log(images.childImageSharp.gatsbyImageData); I am getting an object that contains the image that I want to add, how will I make that image src display in the meta tag?

Answer 1

As you pointed out, gatsbyImageData is an object that contains data that is used by GatsbyImage component to display the image hence you can't use it as unless you point to a specific property inside it.

You probably want to do something like:

  const seo = {
    title: props.title
      ? `${props.title} - ${site.siteMetadata.title}`
      : site.siteMetadata.title,
    description: props.description || site.siteMetadata.description,
    images: props.images ?? images?.childImageSharp?.gatsbyImageData?.images?.fallback?.src,
    twitterUsername: site.siteMetadata.twitterUsername,
  };

Note: check the correct internal structure of gatsbyImageData but in the end, you need to point to the source of the image rather than the image object itself.