import React from 'react' import PropTypes from 'prop-types' import Helmet from 'react-helmet' import { StaticQuery, graphql } from 'gatsby' export function Head({ description, lang, meta, keywords, title }) { return ( <StaticQuery query={detailsQuery} render={data => { const metaDescription = description || data.site.siteMetadata.description return ( <Helmet htmlAttributes={{ lang, }} title={title} titleTemplate={`%s | ${data.site.siteMetadata.title}`} meta={[ { name: `description`, content: metaDescription, }, { property: `og:title`, content: title, }, { property: `og:description`, content: metaDescription, }, { property: `og:type`, content: `website`, }, ] .concat( keywords.length > 0 ? { name: `keywords`, content: keywords.join(`, `), } : [] ) .concat(meta)} > <meta name="google-site-verification" content={data.site.siteMetadata.gsc} /> </Helmet> ) }} /> ) } Head.defaultProps = { lang: `en`, meta: [], keywords: [], } Head.propTypes = { description: PropTypes.string, lang: PropTypes.string, meta: PropTypes.array, keywords: PropTypes.arrayOf(PropTypes.string), title: PropTypes.string.isRequired, } const detailsQuery = graphql` query DefaultSEOQuery { site { siteMetadata { title description author gsc } } } `