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
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!!!
Getting to your problem, I’ve tried myself with:
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
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!
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
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!
Hope this places becomes more of a hub for things like this!
I hope so too, thank you for kickstarting this place
@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