text: import React from 'react';
  import PropTypes from 'prop-types';
  import { Helmet } from 'react-helmet';
  import { graphql, useStaticQuery } from 'gatsby';
  
  export default function SEO({ children, location, description, title, image }) {
    const { site } = useStaticQuery(graphql`
      query {
        site {
          siteMetadata {
            title
            description
            twitter
          }
        }
      }
    `);
  
    return (
      <Helmet titleTemplate={`%s - ${site.siteMetadata.title}`}>
        <html lang="en" />
        <title>{title}</title>
        {/* Meta tags */}
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content={site.siteMetadata.description} />
        {/* Favicons */}
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <link rel="alternate icon" href="/favicon.ico" />
        {/* Open Graph */}
        {location && <meta property="og:url" content={location.href} />}
        <meta property="og:image" content={image || '/logo.svg'} />
        <meta property="og:title" content={title} key="ogtitle" />
        <meta
          property="og:site_name"
          content={site.siteMetadata.title}
          key="ogsitename"
        />
        <meta property="og:description" content={description} key="ogdesc" />
        {children}
      </Helmet>
    );
  }
  
  SEO.propTypes = {
    children: PropTypes.element,
    location: PropTypes.string,
    description: PropTypes.string,
    title: PropTypes.string.isRequired,
    image: PropTypes.string,
  };
  