Fat Buddha Designs

Affordable, Creative, Hand-Crafted Websites

Sitewide Metadata to reuse throughout a site.

Metadata, how to use it sitewide


Reading Time: (approx) 1 min

Tags that this post has been filed under.

The main content about Sitewide Metadata to reuse throughout a site.

When using Gridsome, if you aren’t using a CMS to edit website details or information you can store information in your gridsome.server.js under the load source store and use this metadata 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:-

   query {
     metadata {

And use it like this:-

{{ $static.metadata.company }}

Simple but effective.

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

Journal Index

Previous Article: Your Contract Termination Policy

Next Article: Manipulating Colours Using HSLA & CSS Variables