CODEWITHSUNDEEP
javascriptreactjsgatsby
Aid19801
Aid19801

Reputation: 1166

Why can't Gatsby / Facebook find my og:image

I have a Gatsby app setup.

src/

---images/foo.jpg // <--- the img i want on my facebook shareable URL (og:image).

---images/ // <-- note, there are loads of PNG files i'm using that seem to trip/default onto the FB image/share.

---assets/ // <--- loads of SVGs i'm using that

---components/seo.js // component embedded at top of each page

---pages/index.js // page that uses <SEO />

Inside index.js:


function Home() {

    return (
        <React.Fragment>

            <SEO />

Inside SEO:


const SEO = ({ title, description, image, article }) => {

  const { pathname } = useLocation()
  const { site } = useStaticQuery(query)

  const {
    defaultTitle,
    titleTemplate,
    defaultDescription,
    siteUrl,
    defaultImage, // <-- defaultImage is destructured from GQL result
    twitterUsername,
  } = site.siteMetadata

 const seo = {
    title: title || defaultTitle,
    description: description || defaultDescription,
    image: `${siteUrl}${image || defaultImage}`, // <--placed into object with path to it
    url: `${siteUrl}${pathname}`,
  }

  return (
    <Helmet title={seo.title} titleTemplate={titleTemplate}>
     
      ...
      ...
      ...

      {seo.image && <meta property="og:image" content={seo.image} />}

      {seo.image && <meta property="og:image:type" content="image/jpeg" />}
      {seo.image && <meta property="og:image:alt" content="amazing cat" />}
       ...

    </Helmet>
   )

}

const query = graphql`
  query SEO {
    site {
      siteMetadata {
        defaultTitle: title
        titleTemplate
        defaultDescription: description
        siteUrl: url
        defaultImage: image // <-- default image 
        twitterUsername
      }
    }
  }
`

in my config:

module.exports = {
  siteMetadata: {
    title: `Title Fine`,
    description: `This is fine and coming through okay`,
    url: `https://my-url.com`,
    image: `/images/foo.jpeg`,
    titleTemplate: `This is also fine`
  },

Facebook debugger just keeps saying "https://my-url.com/images/foo.jpeg" could not be processed as an image because it has an invalid content type. But it is a JPEG. I'm citing it as a JPEG in my meta tags.

I've added in

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

thinking maybe it just couldn't find the file, but nothing's changed.

If i do hit https://my-url.com/images/foo.jpeg - it doesnt load anything in the browser.

If i look in Dev Tools "sources" tab, i see /static/ folder and it's not in there. But the other files from /images/ are.

I'm puzzled!

Does anyone know what i'm doing wrong? Or is there a tutorial / blog for Gatsby setup, that makes it clear how to get og:image and twitter cards working nicely?

Upvotes: 7

Views: 2432

Answers (3)

ksav
ksav

Reputation: 20840

Gatsby doesn't know about this file, so it hasn't been included in your build. If you want to include a file in your build that you haven't explicitly imported or queried, you should add it to the ./static folder.

Adding assets outside of the module system

You can create a folder named static at the root of your project. Every file you put into that folder will be copied into the public folder. E.g. if you add a file named sun.jpg to the static folder, it’ll be copied to public/sun.jpg

Upvotes: 0

Kelei Ren
Kelei Ren

Reputation: 387

Here is another workaround Gatsby Plugin: Open Graph Images

In this solution the "domain" is added before the open graph image path like so:

  <meta property="og:image" content={domain + "/og-image/index.png"} />

The final domain should be prefixed by the siteUrl which begins with http:// or https://.

Upvotes: 1

Patrik Rikama-Hinnenberg
Patrik Rikama-Hinnenberg

Reputation: 1610

The way I solved this was by adding the default image via import to the SEO component. This way the source plugin forced it to be found via the static folder after build. And after scraping again for the meta-image via the facebook developer page https://developers.facebook.com/tools/debug/ it was found right away.

Seo component:

import metaImage from '../images/headzup-meta-image-2.jpg';
const siteImage = image || metaImage;

Otuput:

<meta data-react-helmet="true" property="og:image" content="/static/headzup-meta-image.jpg>

Upvotes: 1

Related Questions