Dato globalSeo doesn't work with HelmetDatoCms

[ndom91]

Due to the globalCms having a different shape, it doesn't seem to work with the HelmetDatoCms component.

For example:

Query to get page and global seo tags:

query HomeQuery($locale: String!) {
   site: datoCmsSetting(locale: { eq: $locale }) {
      ctaEmail
      ctaPhone
      ctaActionText
      seoMetaTags {
        tags {
          tagName
          content
          attributes {
            property
            content
            name
          }
        }
      }
    }
    global: datoCmsSite {
      globalSeo {
        siteName
        titleSuffix
        twitterAccount
        facebookPageUrl
        fallbackSeo {
          title
          description
          image {
            url
          }
         twitterCard
        }
      }
    }
  }

The format of the globalSeo return value is totally different, no array full of neat objects of tags with attribute name / value, so i think we'd have to build a totally separate handler for if the user passes in global seo tags, instead of the page based ones.

See:

gatsby-source-datocms/src/index.js

Lines 10 to 29 in 1ee87cb

	(seo ? seo.tags : [])
	.concat(favicon ? favicon.tags : [])
	.map((item, i) =>
	React.createElement(
	item.tagName,
	objectAssign(
	{ key: `helmet-datocms-${i}` },
	objectEntries(item.attributes || {}).reduce(
	(acc, [name, value]) => {
	if (value) {
	acc[name] = value;
	}
	return acc;
	},
	{},
	),
	),
	item.content,
	),
	)

What do you guys think?

EDIT: Put together an initial PR to explore this idea: #117

[matjack1]

Thank you @ndom91 for the issue and the PR! We'll have a look at this as soon as possible and get back to you :)

[stefanoverna]

Hey @ndom91 thanks for the PR, but globalSeo is not meant to be used with HelmetDatoCms. To use HelmetDatoCms, you should use the seoMetaTags graphql fields: https://github.com/datocms/gatsby-source-datocms#seo-meta-tags

Meta tags are generated merging the values present in the record's SEO meta tags field together with the Global SEO settings.

[ndom91]

Okay understand, but then how do you recommend we work with the globalSeo info from Dato? Should we just manually link it up to link and meta tags using react-helmet or something similar?

[stefanoverna]

If you just want to use globalSeo then yes, go ahead adding custom children to the component:

<HelmetDatoCms>
  <title>{/* use your globalSeo here! */}</title>
</HelmetDatoCms>

It's not a good practice to use the same SEO information everywhere in the site, so we'd rather not facilitate doing this. Would be better to create a single-instance model for every website page and add a SEO field in it, so that editors can customize SEO differently for each page. Does it make any sense to you?

[ndom91]

Yeah that makes sense, I just wanted to have a base set of Seo tags, default title, fb Url, twitter Url, etc. which don't change from page to page, and only overwrite certain tags based on the page.

[stefanoverna]

Then I would suggest you to have a single-instance model (maybe Homepage, or something else) with a SEO field, and use seoMetaTags with it inside the Layout. Then override with a new HelmetDatoCms component within the single specific pages! 👍