Gatsby: og:image tag in Helmet not returning path to image

[jonathancary]

Trying to get og:image working, with Helmet, but having some issues. The blog-post.js file is below and is modified from the Gatsby Starter Blog. Basically it keeps returning:

<meta property="og:image" content="https://www.example.com/[object Object]" data-react-helmet="true">

instead of

<meta property="og:image" content="https://www.example.com/image-path.jpg" data-react-helmet="true">

Tried const image = post.frontmatter.featuredImage and some different variations of this like const image = post.frontmatter.featuredImage.childImageSharp.fluid but haven't gotten anything to work so not sure I'm on the right track. Thanks for the help!

import React from 'react'
import Img from 'gatsby-image'
import Helmet from 'react-helmet'
import { graphql } from 'gatsby'
import get from 'lodash/get'

import Layout from '../components/layout'

class BlogPostTemplate extends React.Component {
  render() {
    const post = this.props.data.markdownRemark
    const siteTitle = get(this.props, 'data.site.siteMetadata.title')
    const siteUrl = get(this.props, 'data.site.siteMetadata.siteUrl')
    const image = post.frontmatter.featuredImage

    return (
      <Layout location={this.props.location}>
        <Helmet>
          <title itemProp="name" lang="en">{`${post.frontmatter.title} | ${siteTitle}`}</title>
          <meta name="description" content={`${post.frontmatter.description}`} />

          <meta name="twitter:card" content="summary" />
          <meta name="twitter:site" content="" />
          <meta name="twitter:title" content={`${post.frontmatter.title}`} />
          <meta name="twitter:description" content={`${post.frontmatter.description}`} />  

          <meta property="og:title" content={`${post.frontmatter.title}`} />
          <meta property="og:type" content="article" />
          <meta property="og:description" content={`${post.frontmatter.description}`} /> 
          <meta property="og:image" content={`${siteUrl}${image}`} /> 
        </Helmet>
        <Img className="mainImage blogHeaderImage" sizes={post.frontmatter.featuredImage.childImageSharp.fluid} alt="" />
        <div className="site-body">
          <div className="grid grid-gutters grid-justifyCenter">
            <div className="grid-cell">               
              <div className="blogTitle singleBlog">          
                <h1>{post.frontmatter.title}</h1>
                <h6>{post.frontmatter.date}</h6>
              </div>
              <div className="blogContent" dangerouslySetInnerHTML={{ __html: post.html }} />
            </div>
          </div>
        </div>
      </Layout>
    )
  }
}

export default BlogPostTemplate

export const pageQuery = graphql`
  query BlogPostBySlug($slug: String!) {
    site {
      siteMetadata {
        title
        author
        siteUrl
      }
    }
    markdownRemark(fields: { slug: { eq: $slug } }) {
      id
      excerpt
      html
      frontmatter {
        title
        date(formatString: "MMMM DD, YYYY")
        description
        featuredImage {
          childImageSharp{
              fluid(maxWidth: 1500) {
                  ...GatsbyImageSharpFluid
              }
          }
        }
      }
    }
  }
`

[LekoArts]

Hi!

Did you try your query on GraphiQL (localhost:8000/___graphql)? It will show you that the response from frontmatter.featuredImage is an object (hence [object Object]) and not a string. What you're looking for is frontmatter.featuredImage.childImageSharp.fluid.src.

Or better: Use a second query to pass a different image to your og:image tag than you pass to your featured image -- because the former should always have the same size and not be 1500px wide (at max).

featuredImage {
  childImageSharp{
    fluid(maxWidth: 1500) {
      ...GatsbyImageSharpFluid
    }
    resize(width: 900, quality: 90) {
      src
    }
  }
}

Then it will be:

const image = post.frontmatter.featuredImage.childImageSharp.resize.src

Closing this as answered, hope this helps!

[jonathancary]

Ah okay, that solved things. Thanks!

[fabianrios]

this should be highlighted in the gatsbyjs plugin documentation.