1/** 2 * SEO component that queries for data with 3 * Gatsby's useStaticQuery React hook 4 * 5 * See: https://www.gatsbyjs.org/docs/use-static-query/ 6 */ 7 8import React from 'react' 9import PropTypes from 'prop-types' 10import Helmet from 'react-helmet' 11import { useStaticQuery, graphql } from 'gatsby' 12 13function SEO ({ description, lang, meta, title }) { 14 const { site } = useStaticQuery( 15 graphql` 16 query { 17 site { 18 siteMetadata { 19 title 20 description 21 author 22 } 23 } 24 } 25 ` 26 ) 27 28 const metaDescription = description || site.siteMetadata.description 29 30 return ( 31 <Helmet 32 htmlAttributes={{ 33 lang 34 }} 35 title={title} 36 titleTemplate={`%s | ${site.siteMetadata.title}`} 37 meta={[ 38 { 39 name: 'description', 40 content: metaDescription 41 }, 42 { 43 property: 'og:title', 44 content: title 45 }, 46 { 47 property: 'og:description', 48 content: metaDescription 49 }, 50 { 51 property: 'og:type', 52 content: 'website' 53 }, 54 { 55 name: 'twitter:card', 56 content: 'summary' 57 }, 58 { 59 name: 'twitter:creator', 60 content: site.siteMetadata.author 61 }, 62 { 63 name: 'twitter:title', 64 content: title 65 }, 66 { 67 name: 'twitter:description', 68 content: metaDescription 69 } 70 ].concat(meta)} 71 /> 72 ) 73} 74 75SEO.defaultProps = { 76 lang: 'en', 77 meta: [], 78 description: '' 79} 80 81SEO.propTypes = { 82 description: PropTypes.string, 83 lang: PropTypes.string, 84 meta: PropTypes.arrayOf(PropTypes.object), 85 title: PropTypes.string.isRequired 86} 87 88export default SEO 89