Gatsby: Accessing siteMetadata (gatsby-config.js)

[kbariotis]

I have added a property siteUrl in gatsby-config.js and I am trying to access it in two places.

1) layouts/index.js: where I need to set OG tags, etc..
2) templates/blog-post.js: where I need to set share urls

What's the preferred way to access it in these places?

Thank you! Great work btw! 😎

[danoc]

Hi @kbariotis – just ran into this myself and came here to find an answer. 😃

After poking around I've realized that it can be queried like this:

{
  site {
    siteMetadata {
      siteURL
      siteName
    }
  }
}

A corresponding gatsby-config.js would look like this:

module.exports = {
  siteMetadata: {
    siteURL: 'https://danoc.me/',
    siteName: 'Daniel O\'Connor',
  },
};

A little more info here:
https://www.gatsbyjs.org/docs/migrating-from-v0-to-v1/#configtoml-is-now-gatsby-configjs

[kbariotis]

Thank you @danoc ! Is there a working example?

[KyleAMathews]

Search the example sites. We query siteMetadata a number of times.

[luketeaford]

I have searched the example sites and don't understand how siteMetadata is used. For example, in the starter site it looks to me like src/layouts/index.js has a hardcoded title. I am working around this like so:

import GatsbyConfig from '../../gatsby-config

<Helmet
  title={GatsbyConfig.siteMetadata.title}

That feels like it's not what is intended. I also read the migration guide and attempted to export a query as a constant. I get errors that props is not defined.

[oliverbenns]

What is the benefit of using graphql for this? I'm also importing like @luketeaford as it's clear and simple, though I'm not sure on the consequences of doing so.

[KyleAMathews]

gatsby-config.js is used in node so trying to import it into the browser could potentially pull in very large node libraries depending on what else you add to your gatsby-config.js

If you want to import a metadata module, I'd suggest using a different file from gatsby-config.js e.g. data.yaml or whatever.

[Undistraction]

Got to say I find the docs for this very confusing - in the tutorial you hard-code the title direct from the metadata, but what is really needed is a way to define different metadata for different pages. Last time I checked, using the same title and description across multiple pages is an SEO disaster. Obviously Helmet provides a nice solution for updating meta on the fly but it would make sense to me to offer a mechanism for defining all meta in a separate metadata.json or similar. At the moment I'm adding a pages prop on the metadata object in the Gatsby config and declaring per-page meta there, but it makes more sense to just load directly into the page from a json/yml file.

It seems to me that something that is as fundamental a metadata would benefit from having a simple api included. This kind of standardisation makes moving between projects much easier.

Rather than the site metadata query resolving to an object taken from within gatsby-config.js it should pull in a config.yml file containing a keyed list of pages. Something like:

pages:
  - 
    id:   home
    title:   Site / Home Page
    description:  The home page of the site
    keywords: home, site
  - 
    id:   about
    title:   Site / About Page
    description:  The about page of the site
    keywords: about, site

global: 
  siteName: Example,
  startYear: 2017 // For copyright smallprint.

[KyleAMathews]

Closing out older issues — please open a new issue if you need more help!