Gatsby: Sourcing frontmatter image for Twitter meta tag

[d-ivashchuk]

Summary

I am trying to use Helmet to get twitter card functionality to my blog, but for some reason it's not working properly.

Relevant information

I have tried different things but it seems like following is not working because it just returns path and not image:

...
frontmatter {
      featuredImage {
        childImageSharp {
          sizes(maxWidth: 630) {
              ...GatsbyImageSharpSizes
          }
          resize(width: 1800) {
          src
          width
          height
        }
        }
...

<Helmet
          htmlAttributes={{ lang: 'en' }}
          meta={[{ name: 'description', content: siteDescription },
          { name: "twitter:card", content: "summary_large_image" },
          { name: "twitter:site", content: "@DivDev_" },
          { name: "twitter:title", content: post.frontmatter.title },
          { name: "twitter:description", content: post.frontmatter.description },
          { name: "twitter:image", content: post.frontmatter.featuredImage.childImageSharp.resize.src }]}
          title={`${post.frontmatter.title} | ${siteTitle} `}
        />



md5-ce778fdde43e669ddd7d838bd46a4069



  System:
    OS: macOS Sierra 10.12.6
    CPU: x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.13.0 - /usr/local/bin/node
    npm: 6.4.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 70.0.3538.102
    Firefox: 63.0.1
    Safari: 12.0.1
  npmPackages:
    gatsby: ^2.0.19 => 2.0.19 
    gatsby-image: ^2.0.15 => 2.0.15 
    gatsby-plugin-feed: ^2.0.8 => 2.0.8 
    gatsby-plugin-google-analytics: ^2.0.5 => 2.0.5 
    gatsby-plugin-hotjar: ^1.0.1 => 1.0.1 
    gatsby-plugin-layout: ^1.0.4 => 1.0.4 
    gatsby-plugin-manifest: ^2.0.5 => 2.0.5 
    gatsby-plugin-offline: ^2.0.5 => 2.0.5 
    gatsby-plugin-react-helmet: ^3.0.0 => 3.0.0 
    gatsby-plugin-sharp: ^2.0.6 => 2.0.6 
    gatsby-plugin-styled-components: ^3.0.0 => 3.0.0 
    gatsby-plugin-typography: ^2.2.0 => 2.2.0 
    gatsby-remark-copy-linked-files: ^2.0.5 => 2.0.5 
    gatsby-remark-images: ^2.0.4 => 2.0.4 
    gatsby-remark-prismjs: ^3.0.0 => 3.0.0 
    gatsby-remark-responsive-iframe: ^2.0.5 => 2.0.5 
    gatsby-remark-smartypants: ^2.0.5 => 2.0.5 
    gatsby-source-filesystem: ^2.0.2 => 2.0.2 
    gatsby-source-graphcms: ^1.0.0-alpha.3 => 1.0.0-alpha.3 
    gatsby-transformer-remark: ^2.1.6 => 2.1.6 
    gatsby-transformer-sharp: ^2.1.3 => 2.1.3 
  npmGlobalPackages:
    gatsby-cli: 2.4.3

Thanks for help!

[LekoArts]

@d-ivashchuk Closing an issue without a comment is bad for people coming from Google who maybe have the same problem. Please always give the solution/reason, thanks!

[d-ivashchuk]

@LekoArts thanks for pointing out!

I was not sure if my solution is a good pattern to follow but here is it:

There inmeta image tag you need to specify absolute path to the image, that’s why I’ve just appended the web address to the relative source of image like https://www.yoursitename.com/ + post.frontmatter.imageName.childImageSharp.resize.src
You can also get the address by querying site metadata in grahpQL

[LekoArts]

Yeah, that's the commonly used solution for this.

[marktrobinson]

Cheers mate! @d-ivashchuk worked an absolute treat