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: https://github.com/datocms/gatsby-source-datocms/blob/1ee87cbee4e3bc37d7add8287672efe2f3f072b4/src/index.js#L10-L29

What do you guys think?

EDIT: Put together an initial PR to explore this idea: https://github.com/datocms/gatsby-source-datocms/pull/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! :+1: