text: import React from "react";
  import PropTypes from "prop-types";
  import { Helmet } from "react-helmet";
  import { useLocation } from "@reach/router";
  import { useStaticQuery, graphql } from "gatsby";
  
  const SEO = ({ children, title, description, image, article, ogImage }) => {
    const { pathname } = useLocation();
    const { site } = useStaticQuery(query);
    const {
      defaultTitle,
      defaultDescription,
      siteUrl,
      defaultImage,
      defaultOgImage,
      twitter,
    } = site.siteMetadata;
    const seo = {
      title: title || defaultTitle,
      description: description || defaultDescription,
      image: `${siteUrl}${image || defaultImage}`,
      url: `${siteUrl}${pathname}`,
      ogImage: ogImage || defaultOgImage,
    };
    return (
      <Helmet>
        <html lang="en" />
        <title>{title}</title>
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <link rel="alternate icon" href="/favicon.ico" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta charSet="utf-8" />
        <meta name="description" content={seo.description} />
        <meta name="image" content={seo.image} />
        {seo.url && <meta property="og:url" content={seo.url} />}
        {(article ? true : null) && <meta property="og:type" content="article" />}
        {seo.title && (
          <meta property="og:title" content={seo.title} key="ogtitle" />
        )}
        <meta property="og:site_name" content={seo.title} key="ogsitename" />
        {seo.description && (
          <meta
            property="og:description"
            content={seo.description}
            key="ogdesc"
          />
        )}
        <meta property="og:image" content={seo.ogImage} />
        <meta name="twitter:card" content="summary_large_image" />
        {twitter && <meta name="twitter:creator" content={twitter} />}
        {seo.title && <meta name="twitter:title" content={seo.title} />}
        {seo.description && (
          <meta name="twitter:description" content={seo.description} />
        )}
        {seo.image && <meta name="twitter:image" content={ogImage} />}
        {children}
      </Helmet>
    );
  };
  export default SEO;
  SEO.propTypes = {
    title: PropTypes.string,
    description: PropTypes.string,
    image: PropTypes.string,
    article: PropTypes.bool,
  };
  SEO.defaultProps = {
    title: null,
    description: null,
    image: null,
    article: false,
  };
  const query = graphql`
    query SEO {
      site {
        siteMetadata {
          defaultTitle: title
          titleTemplate
          defaultDescription: description
          url: siteUrl
          defaultImage: image
          twitter
          facebook
          defaultOgImage: ogImage
        }
      }
    }
  `;
  