Missing og: tags with HelmetDatoCms

When sharing a gatsby site on facebook that is using HelmetDatoCms I get the following error:

I am using the seo-module in datocms - both globally and on the different relevant models

Thank you very much @anders for being the first to post in this new community!!! :slight_smile:

Getting to your problem, I’ve tried myself with:

  • Gatsby v2.9.11
  • gatsby-source-datocms v2.1.10

and If I do this for example:

<HelmetDatoCms seo={data.datoCmsWork.seoMetaTags} />

(from the demo porfolio project) it prints:

<meta property="og:image" content="https://www.datocms-assets.com/604/1479910348-free-corporate-identity-mockup.jpg" data-react-helmet="true">

and the other meta tags.

I’ve also used this: Sharing Debugger - Meta for Developers to test it and it works fine to me. Can you maybe share the URL of the page you are testing and a code snippet that could help me?

It’s on this page https://coffeecollective.dk

And the code snippet to handle this is:

<HelmetDatoCms seo={seoMetaTags} favicon={faviconMetaTags}>
                <html lang={locale} style={htmlStyle} />
                {title && <title>{title}</title>}
                {description && (
                    <meta name="description" content={description} />
                )}
            </HelmetDatoCms>

I tried something simplified, like this:

<HelmetDatoCms seo={data.datoCmsWork.seoMetaTags}>
  <html lang="en" />
  <title>test</title>
  <meta name="description" content="test" />
</HelmetDatoCms>

and works fine here, can you please share what’s inside seoMetaTags?

{
  "tags": [
    {
      "tagName": "title",
      "content": "Coffee Collective ",
      "attributes": null
    },
    {
      "tagName": "meta",
      "content": null,
      "attributes": {
        "property": "og:title",
        "content": "Coffee Collective ",
        "name": null
      }
    },
    {
      "tagName": "meta",
      "content": null,
      "attributes": {
        "property": null,
        "content": "Coffee Collective ",
        "name": "twitter:title"
      }
    },
    {
      "tagName": "meta",
      "content": null,
      "attributes": {
        "property": null,
        "content": "Transparency in every aspect of the coffee journey bringing utterly delicious coffee to you",
        "name": "description"
      }
    },
    {
      "tagName": "meta",
      "content": null,
      "attributes": {
        "property": "og:description",
        "content": "Transparency in every aspect of the coffee journey bringing utterly delicious coffee to you",
        "name": null
      }
    },
    {
      "tagName": "meta",
      "content": null,
      "attributes": {
        "property": null,
        "content": "Transparency in every aspect of the coffee journey bringing utterly delicious coffee to you",
        "name": "twitter:description"
      }
    },
    {
      "tagName": "meta",
      "content": null,
      "attributes": {
        "property": null,
        "content": "summary",
        "name": "twitter:card"
      }
    },
    {
      "tagName": "meta",
      "content": null,
      "attributes": {
        "property": "article:modified_time",
        "content": "2019-06-18T16:42:20Z",
        "name": null
      }
    },
    {
      "tagName": "meta",
      "content": null,
      "attributes": {
        "property": "article:published_time",
        "content": "2019-03-06T11:46:37Z",
        "name": null
      }
    },
    {
      "tagName": "meta",
      "content": null,
      "attributes": {
        "property": "og:locale",
        "content": "en_EN",
        "name": null
      }
    },
    {
      "tagName": "meta",
      "content": null,
      "attributes": {
        "property": "og:type",
        "content": "article",
        "name": null
      }
    }
  ]
}

I’m afraid I cannot replicate your issue @anders :frowning:

But if you check the portfolio demo, here: gatsby-portfolio/src/components/layout.js at master · datocms/gatsby-portfolio · GitHub looks very much like your situation, where the home page itself doesn’t have a SEO image, and it should fall back to the global SEO setting for the image.

Here in my seoMetaTags object I have this:

 {
      "tagName": "meta",
      "content": null,
      "attributes": {
        "property": "og:image",
        "content": "https://www.datocms-assets.com/604/1479918022-Screenshot2016-11-2317.18.52.png",
        "name": null
      }
    },

which is what is lacking in yours.

Can you maybe try upgrading also your dependencies as we fixed this recently: Fix SEO field item · datocms/js-datocms-client@984862f · GitHub that might impact you?

That was odd. When I upgrade to the latest version I got this:

error Plugin gatsby-source-datocms returned an error


  TypeError: Cannot read property 'format' of undefined

  - faviconTagsBuilder.js:80
    [client]/[datocms-client]/lib/utils/faviconTagsBuilder.js:80:38

  - Array.map

  - faviconTagsBuilder.js:72 icon
    [client]/[datocms-client]/lib/utils/faviconTagsBuilder.js:72:30

  - faviconTagsBuilder.js:93
    [client]/[datocms-client]/lib/utils/faviconTagsBuilder.js:93:18

  - Array.reduce

  - faviconTagsBuilder.js:92 faviconTagsBuilder
    [client]/[datocms-client]/lib/utils/faviconTagsBuilder.js:92:34

  - buildFaviconMetaTagsNode.js:11
    [client]/[gatsby-source-datocms]/hooks/sourceNodes/createNodeFromEntity/site/buildFa
    viconMetaTagsNode.js:11:17

  - buildNode.js:13 module.exports
    [client]/[gatsby-source-datocms]/hooks/sourceNodes/createNodeFromEntity/utils/buildN
    ode.js:13:3

  - buildFaviconMetaTagsNode.js:9 buildFaviconMetaTagsNode
    [client]/[gatsby-source-datocms]/hooks/sourceNodes/createNodeFromEntity/site/buildFa
    viconMetaTagsNode.js:9:10

  - index.js:45
    [client]/[gatsby-source-datocms]/hooks/sourceNodes/createNodeFromEntity/site/index.j
    s:45:27

  - buildNode.js:13 module.exports
    [client]/[gatsby-source-datocms]/hooks/sourceNodes/createNodeFromEntity/utils/buildN
    ode.js:13:3

  - index.js:22
    [client]/[gatsby-source-datocms]/hooks/sourceNodes/createNodeFromEntity/site/index.j
    s:22:20

  - Array.map

  - index.js:18 Object.buildSiteNode [as site]
    [client]/[gatsby-source-datocms]/hooks/sourceNodes/createNodeFromEntity/site/index.j
    s:18:77

warn The gatsby-source-datocms plugin has generated no Gatsby nodes. Do you need it?

@anders I assume you did the usual gatsby clean, just checking.

If so, I guess then next step would be to give me access to your repo so that I can debug everything together. If that’s possible, can you invite me or give me the details over support@datocms.com ?

Thanks!

You should have access now,.

Just a quick one @anders we have found two bugs that we affecting you. I’m going to release a fix for both later today and I’ll update you here. Thank you for helping us with this!

1 Like

Hello again @anders!

Your problem should be fixed in gatsby-source-datocms v2.1.11 and datocms-client v2.0.3.

Please make sure you update both of them. You should make it by just running yarn upgrade

Let me know though if you need more help :slight_smile:

I’ts weird - I see the tags in the code now, but facebook doesn’t recognise them

I think it’s fine, if you have a look here: https://developers.facebook.com/tools/debug/sharing/?q=https%3A%2F%2Fcoffeecollective.dk%2F

it says that the og:image is missing, but the preview is correct and the og:image is shown below. I think it might only be a caching issue on their side?

If you try sharing the link work as expected, right?

Yes. It is weird. But okay - thanks for the assist! :slight_smile:

Hope this places becomes more of a hub for things like this!

1 Like

I hope so too, thank you for kickstarting this place :wink:

@mat_jack1 So this suddenly popped up as an issue again. I just updated gatsby-source-datocms but it doesnt seem to do anthing.

This is the page in question: https://coffeecollective.dk/stories/coffee-collective-styrkes-med-to-markante-profiler/

We didn’t change anything recently on the site, so perhaps facebook did? Either way we are using your plugin entirely to create the metadata so It’s a bit weird that it’s not working.

Can you share any ideas or insights?

hey @anders I can see the meta appearing there:

Maybe they are not created statically but only by the user’s browser?

Yes I can see it too, but facebook can’t.

How would you change it, if they are only user-created? And why would that happen? It’s a normal gatsby solution I’m running and using gatsby-source-datocms.

I have no idea if it’s relevant, but have a look at this: Meta tags generated by react-helmet are not placed directly in the HTML · Issue #10414 · gatsbyjs/gatsby · GitHub

In general I think it might be something to do with how you use the react-helmet? Maybe we can have a look if you can share your code, but it will happen next week, sorry