Sitewide Metadata to reuse throughout a site.

Posted By Will Moody On , Reading Time - 1 minutes

Code

Metadata, how to use it sitewide

When using Gridsome, if you aren't using a CMS to edit site information you can store information in your gridsome.server.js under the loadsource store and use this throughout your website.

This is my store section of the gridsome.server.js:-

api.loadSource(async (store) => {
   store.addMetadata('company', 'Gridsome Goodliness'),
   store.addMetadata('slogan', 'Gridsome Snippets & Ideas'),
    store.addMetadata('author', 'Will Moody'),
    store.addMetadata('mobile', 'tel:07841300999'),
    store.addMetadata('mobileDisplay', '07841 300999'),
    store.addMetadata('telephone', 'tel:01607717999'),
    store.addMetadata('telephoneDisplay', '01607 717999'),
    store.addMetadata('address', '201 Blofield Road'),
    store.addMetadata('village', 'Blofield Heath'),
    store.addMetadata('city', 'Norwich'),
    store.addMetadata('county', 'Norfolk'),
    store.addMetadata('postcode', 'NR13 5EJ')
})

You can then do a static query like this on any page, layout or component:-

<static-query>
   query {
     metadata {
       company
       slogan
     }
   }
</static-query>

And use it like this:-

{{ $static.metadata.company }}

Simple but effective.

Just remember if you change any deta in the gridsome.server.js file you will need to stop and then restart the server for the changes to take to be reflected in your pages etc.