text: /**
   * SEO component that queries for data with
   *  Gatsby's useStaticQuery React hook
   *
   * See: https://www.gatsbyjs.org/docs/use-static-query/
   */
  
  import React from 'react';
  import PropTypes from 'prop-types';
  import Helmet from 'react-helmet';
  import {useStaticQuery, graphql} from 'gatsby';
  
  function Seo({description, lang, meta, title, canonical}) {
    const {site} = useStaticQuery(
      graphql`
        query {
          site {
            siteMetadata {
              title
              description
              author
              url
              image
              twitterUsername
            }
          }
        }
      `
    );
  
    const metaDescription = description || site.siteMetadata.description;
    const metaTitle = title ? title : site.siteMetadata.title;
  
    return (
      <Helmet
        htmlAttributes={{
          lang,
        }}
        title={metaTitle}
        titleTemplate={title ? `%s | ${site.siteMetadata.title}` : `%s`}
        link={canonical ? [{rel: 'canonical', key: canonical, href: canonical}] : []}
        meta={[
          {
            name: `description`,
            content: metaDescription,
          },
          {
            property: `og:title`,
            content: metaTitle,
          },
          {
            property: `og:description`,
            content: metaDescription,
          },
          {
            property: `og:type`,
            content: `website`,
          },
          {
            property: `og:url`,
            content: site.siteMetadata.url,
          },
          {
            property: `og:image`,
            content: `${site.siteMetadata.url}${site.siteMetadata.image}`,
          },
          {
            name: `twitter:card`,
            content: `summary`,
          },
          {
            name: `twitter:creator`,
            content: site.siteMetadata.author,
          },
          {
            name: `twitter:title`,
            content: metaTitle,
          },
          {
            name: `twitter:description`,
            content: metaDescription,
          },
          {
            name: `twitter:image`,
            content: `${site.siteMetadata.url}${site.siteMetadata.image}`,
          },
          {
            name: `twitter:creator`,
            content: site.siteMetadata.twitterUsername,
          },
        ].concat(meta)}
      />
    );
  }
  
  Seo.defaultProps = {
    lang: `en`,
    meta: [],
    description: ``,
  };
  
  Seo.propTypes = {
    description: PropTypes.string,
    lang: PropTypes.string,
    meta: PropTypes.arrayOf(PropTypes.object),
    canonical: PropTypes.string,
  };
  
  export default Seo;
  