text: import * as React from 'react';
  import { Helmet } from 'react-helmet';
  import { useStaticQuery, graphql } from 'gatsby';
  
  import favicon from '../images/favicon.jpg';
  
  const Seo = ({ description = '', lang = 'en', meta = [], title, image }) => {
    const { site } = useStaticQuery(
      graphql`
        query {
          site {
            siteMetadata {
              title
              description
            }
          }
        }
      `
    );
  
    const metaDescription = description || site.siteMetadata.description;
    const defaultTitle = site.siteMetadata?.title;
  
    return (
      <Helmet
        htmlAttributes={{
          lang,
        }}
        title={title}
        defaultTitle={defaultTitle}
        titleTemplate={defaultTitle ? `%s | ${defaultTitle}` : null}
        meta={[
          {
            name: `description`,
            content: metaDescription,
          },
          {
            name: `image`,
            content: image,
          },
          {
            property: `og:title`,
            content: title,
          },
          {
            property: `og:description`,
            content: metaDescription,
          },
          {
            property: `og:type`,
            content: `website`,
          },
          {
            property: `og:image`,
            content: image,
          },
          {
            name: `twitter:card`,
            content: `summary_large_image`,
          },
          {
            name: `twitter:creator`,
            content: site.siteMetadata?.social?.twitter || ``,
          },
          {
            name: `twitter:title`,
            content: title,
          },
          {
            name: `twitter:description`,
            content: metaDescription,
          },
        ].concat(meta)}
      >
        <link rel="shortcut icon" href={favicon} type="image/x-icon" />
      </Helmet>
    );
  };
  
  export default Seo;
  