Gatsby: Facebook Sharing Debugger not picking up meta tags

[btahir]

Hello -

Facebook is not picking up my meta tags for some reason?

I can clearly see my meta tags on my site: https://9gans.com

But Facebook is not scraping them: https://developers.facebook.com/tools/debug/sharing/?q=9gans.com

I tried a few things including refreshing with ?fbrefresh=blahblah so its not a caching issue like previous questions.

Is there any thing I need to do on my end for Facebook to recognize all the og tags?

Thanks!

[coreyward]

I don't know what you're doing, but it looks like you've deployed the development version of your website. The actual source of your website doesn't include content or your SEO-related meta tags. Indeed, you can confirm this is what Facebook is seeing for your website using the debugger (direct link) by clicking on “See exactly what our scraper sees for your URL” near the bottom of the page you linked.

[btahir]

Development? I just deployed it on Zeit (with the command now) following the Gatsby instructions?

[coreyward]

@btahir Ah, didn't see that you're using the offline plugin. View-source doesn't work with it.

[btahir]

Took out the gatsby-plugin-offline. No difference. :(

[btahir]

It looks like this issue is also in some of the Starter templates: https://gatsby-starter-blog-demo.netlify.com/

Scrape results: https://developers.facebook.com/tools/debug/sharing/?q=https%3A%2F%2Fgatsby-starter-blog-demo.netlify.com%2F

[LekoArts]

Hi!

Sorry to hear you're running into an issue. To help us best begin debugging the underlying cause, it is incredibly helpful if you're able to create a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

The starter blog doesn't have some of the tags so they don't show up in the debugger. The tags work on all of my projects (and they use the offline plugin) so there is probably a problem with your site.

[bakeruk]

@btahir are you deploying the output of gatsby build?

Facebook sees the same content which is in your public/index.html when you build. Could you show us your version of that file please?

[DSchau]

Your meta tags are as follows:

<meta name="generator" content="Gatsby 2.3.31"/>
<link rel="preconnect dns-prefetch" href="https://www.google-analytics.com"/>
<meta name="theme-color" content="#ffffff"/>
<link rel="apple-touch-icon" sizes="180x180" href="/favicons/fav180.png"/>
<title data-react-helmet="true">9 GANS | 9 GANS</title><link data-react-helmet="true" rel="fav" sizes="180x180" href="/favicons/fav180.png"/>
<link data-react-helmet="true" rel="icon" type="image/png" sizes="32x32" href="/favicons/fav32.png"/>
<link data-react-helmet="true" rel="icon" type="image/png" sizes="16x16" href="/favicons/fav16.png"/>
<meta data-react-helmet="true" name="description" content="An AI Generated Art Gallery"/>
<meta data-react-helmet="true" property="og:title" content="9 GANS"/>
<meta data-react-helmet="true" property="og:image" content="https://9gans.com/images/header.jpg"/>
<meta data-react-helmet="true" property="og:description" content="An AI Generated Art Gallery"/>
<meta data-react-helmet="true" property="og:type" content="website"/>
<meta data-react-helmet="true" name="twitter:card" content="summary_large_image"/>
<meta data-react-helmet="true" name="twitter:image" content="https://9gans.com/images/header.jpg"/>
<meta data-react-helmet="true" name="twitter:creator" content="9gans"/>
<meta data-react-helmet="true" name="twitter:title" content="9 GANS"/>
<meta data-react-helmet="true" name="twitter:description" content="An AI Generated Art Gallery"/>
<meta data-react-helmet="true" name="msapplication-TileColor" content="#da532c"/>
<meta data-react-helmet="true" name="theme-color" content="#ffffff"/

Weirdly it does seem like your tags aren't being parsed (e.g. og:title and og:description are not being picked up). Could you share a reproduction and/or more info as to how you're creating the meta tags? Perhaps Facebook's parser is choking on other content prior to the meta tags? Not sure--hard to tell!

Thanks!

[btahir]

I will work to get a simple reproduction.

I am using this as my starter so it's very similar: https://github.com/parmsang/gatsby-starter-ecommerce

Here is the my SEO file in the mean while:

/* eslint-disable react/require-default-props */
/* eslint-disable react/forbid-prop-types */
import React from 'react'
import PropTypes from 'prop-types'
import {Helmet} from 'react-helmet'
import {useStaticQuery, graphql, withPrefix} from 'gatsby'

function SEO({description, lang, meta, keywords, socialImage, title}) {
  const {site} = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadata {
            title
            description
            siteUrl
            author
            image
          }
        }
      }
    `,
  )

  const image = socialImage || `${site.siteMetadata.siteUrl}${site.siteMetadata.image}`
  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: site.siteMetadata.title,
        },
        {
          property: `og:image`,
          content: image,
        },        
        {
          property: `og:description`,
          content: metaDescription,
        },
        {
          property: `og:type`,
          content: `website`,
        },
        {
          name: `twitter:card`,
          content: `summary_large_image`,
        },
        {
          name: `twitter:image`,
          content: image,
        },        
        {
          name: `twitter:creator`,
          content: '9gans',
        },
        {
          name: `twitter:title`,
          content: site.siteMetadata.title,
        },
        {
          name: `twitter:description`,
          content: metaDescription,
        },
        {name: 'msapplication-TileColor', content: '#da532c'},
        {name: 'theme-color', content: '#ffffff'},
      ]
        .concat(
          keywords.length > 0
            ? {
                name: `keywords`,
                content: keywords.join(`, `),
              }
            : [],
        )
        .concat(meta)}
    >
      <link
        rel="fav"
        sizes="180x180"
        href={withPrefix('/favicons/fav180.png')}
      />
      <link
        rel="icon"
        type="image/png"
        sizes="32x32"
        href={withPrefix('/favicons/fav32.png')}
      />
      <link
        rel="icon"
        type="image/png"
        sizes="16x16"
        href={withPrefix('/favicons/fav16.png')}
      />
    </Helmet>
  )
}

SEO.defaultProps = {
  lang: `en`,
  meta: [],
  keywords: [],
}

SEO.propTypes = {
  description: PropTypes.string,
  lang: PropTypes.string,
  meta: PropTypes.array,
  image: PropTypes.string,
  keywords: PropTypes.arrayOf(PropTypes.string),
  title: PropTypes.string.isRequired
}

export default SEO

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[btahir]

OK I apologize I just didn't have the time to recreate the example and it was just easier for me to start from scratch. Feel free to close this issue.
I will say that this issue is not specific to my code and plagues a few of your starter templates (mentioned above) and you might want to come back to it whenever you have some free time.

[taigfs]

Hi @btahir, how did you fix it?

[btahir]

Started with another project from scratch - not the ideal solution I know but I was doing enough different things to warrant a version 2.

[wahlforss]

@btahir @taigfs @DSchau I am having this problem with my site

https://www.bemlo.se/companies/agila

facebook debugger

It is not picking up the og tags! It falls back to bemlo.se. I am using netlify, Contentful and gatsby.

[seba1342]

bump on this one ☝️
Dynamic page meta tags don't seem to be loading, it falls back to the defaults. I have a feeling this may be something to do with the crawler, because it works fine on the twitter card validator.

[taigfs]

@wahlforss In my case it was a matter of time/cache.

There was cache somewhere (my guess is the nginx server) and it started to work 2 days after.

I just opened your link and it's working now, right? Same thing there?

[wahlforss]

@taigfs
Yes and we also didn't set the canonical urls correct!

[yastrebovb]

The same issue... Works perfectly with Twitter and Telegram but not Facebook

[winstonma]

I got the same issue and solved by using gatsby-plugin-react-helmet plugin. See if this solves your problem.