Simple question about metadata

How do I use the MetaData component in the TryGhost Gatsby Starter.

import React from 'react'

import PropTypes from 'prop-types'

import { StaticQuery, graphql } from 'gatsby'

import url from 'url'

import config from '../../../utils/siteConfig'

import ArticleMeta from './ArticleMeta'

import WebsiteMeta from './WebsiteMeta'

import AuthorMeta from './AuthorMeta'

/**

 * MetaData will generate all relevant meta data information incl.

 * JSON-LD (schema.org), Open Graph (Facebook) and Twitter properties.

 *

 */

const MetaData = ({ data, settings, title, description, image, location }) => {

    const canonical = url.resolve(config.siteUrl, location.pathname)

    const { ghostPost, ghostTag, ghostAuthor, ghostPage } = data

    settings = settings.allGhostSettings.edges[0].node

    if (ghostPost) {

        return <ArticleMeta data={ghostPost} canonical={canonical} />

    }

    if (ghostTag) {

        return (

            <WebsiteMeta data={ghostTag} canonical={canonical} type="Series" />

        )

    }

    if (ghostAuthor) {

        return <AuthorMeta data={ghostAuthor} canonical={canonical} />

    }

    if (ghostPage) {

        return (

            <WebsiteMeta

                data={ghostPage}

                canonical={canonical}

                type="WebSite"

            />

        )

    }

    title = title || config.siteTitleMeta || settings.title

    description =

        description || config.siteDescriptionMeta || settings.description

    image = image || settings.cover_image || null

    image = image ? url.resolve(config.siteUrl, image) : null

    return (

        <WebsiteMeta

            data={{}}

            canonical={canonical}

            title={title}

            description={description}

            image={image}

            type="WebSite"

        />

    )

}

MetaData.defaultProps = {

    data: {},

}

MetaData.propTypes = {

    data: PropTypes.shape({

        ghostPost: PropTypes.object,

        ghostTag: PropTypes.object,

        ghostAuthor: PropTypes.object,

        ghostPage: PropTypes.object,

    }).isRequired,

    settings: PropTypes.shape({

        allGhostSettings: PropTypes.object.isRequired,

    }).isRequired,

    location: PropTypes.shape({

        pathname: PropTypes.string.isRequired,

    }).isRequired,

    title: PropTypes.string,

    description: PropTypes.string,

    image: PropTypes.string,

}

const MetaDataQuery = (props) => (

    <StaticQuery

        query={graphql`

            query GhostSettingsMetaData {

                allGhostSettings {

                    edges {

                        node {

                            title

                            description

                        }

                    }

                }

            }

        `}

        render={(data) => <MetaData settings={data} {...props} />}

    />
)

export default MetaDataQuery

I’ve seen it used like this