Social Cards with Gatsby problems

Question

I am trying to get social cards to turn up on my site. I am pulling data from the contentful using graphQL this gives me back my images - for example i will get backgroundImage.fluid and put this into gatsby and it works fine.

However when I try and put this image into the SEO card it does not work as expected and nothing shows up - I think because the meta description does not recognize it as an image as Gatsby image is doing something smart.

Here is the SEO component

function SEO({ description, lang, meta, title, mainImage, pathname , defaultImage}) {
  const { site } = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadata {
            title
            description
            author
            siteUrl
            defaultImage

          }
        }
      }
    `
  )

  const metaDescription = description || site.siteMetadata.description


  return (
    <Helmet
      htmlAttributes={{
        lang,
      }}
      title={title}
      titleTemplate={`%s | ${site.siteMetadata.title}`}

      meta={[
        {
          name: `description`,
          content: metaDescription,
        },
        {
          property: `og:title`,
          content: title,
        },
        {
          property: `og:image`,
          content: mainImage,
        },
        {
          property: `og:description`,
          content: metaDescription,
        },
        {
          property: `og:type`,
          content: `website`,
        },
        {
          name: `twitter:card`,
          content: `summary`,
        },
        {
          name: `twitter:creator`,
          content: site.siteMetadata.author,
        },
        {
          name: `twitter:title`,
          content: title,
        },
        {
          name: `twitter:image`,
          content: mainImage,
        },
        {
          name: `twitter:description`,
          content: metaDescription,
        },

      ]

        .concat(meta)}
    />
  )}

Here is the component


    <SEO
          title={name}
          mainImage={mainImage.fluid.src}
        />

This would work on the page using gatsby-image




   <Img fluid={mainImage.fluid} imgStyle={{
          objectFit: "contain",
        }} />

Anyone have any ideas?

Where are you expecting the image to show up? An SEO image should be an absolute paths to the image. — ksav
@ksav want it to show up when you share something on twitter / whatsapp etc — Marcus Petty-Saphon

coreyward coreyward · Accepted Answer · 2020-04-23T14:16:08

Depending on the source plugin creating the image node for mainImage, you could be getting back a relative path that does not contain the domain name. This is what gatsby-transformer-sharp does because the plugin doesn't know about your deployment. Since OpenGraph images need a full url this won't work by itself.

The fix is pretty simple in this case: just prepend the protocol and domain name to the mainImage.fluid.src string, like this:

<SEO
  title={name}
  mainImage={`https://www.example.org${mainImage.fluid.src}`}
/>

Social Cards with Gatsby problems

1 Answers