React SEO.md

React SEO

SEO.js

import React from "react";
import PropTypes from "prop-types";
import { Helmet } from "react-helmet";
import { useStaticQuery, graphql } from "gatsby";

const SEO = ({ title, description }) => {
  const {
    site: {
      siteMetadata: {
        author,
        siteDesc,
        image,
        siteUrl,
        siteTitle,
        twitterUsername,
      },
    },
  } = useStaticQuery(query);

  const imgURL = `${siteUrl}${image}`;
  const fullTitle = title ? `${title} | ${siteTitle}` : siteTitle;

  return (
    <Helmet htmlAttributes={{ lang: "en" }} title={fullTitle}>
      <meta name="description" content={description || siteDesc} />
      <meta name="image" content={image} />
      {/* Twitter card */}
      <meta name="twitter:card" content="summary_large_image" />
      <meta name="twitter:site" content={twitterUsername} />
      <meta name="twitter:creator" content={twitterUsername} />
      <meta property="og:title" content={siteTitle} />
      <meta property="og:description" content={siteDesc} />
      <meta property="og:image" content={imgURL} />
      {/* <meta name="twitter:title" content={siteTitle} />
      <meta name="twitter:description" content={siteDesc} />
      <meta name="twitter:image" content={imgURL} /> */}
    </Helmet>
  );
};

const query = graphql`
  {
    site {
      siteMetadata {
        author
        siteDesc: description
        image
        siteUrl
        siteTitle: title
        twitterUsername
      }
    }
  }
`;

SEO.propTypes = {
  title: PropTypes.string.isRequired,
  description: PropTypes.string.isRequired,
};

export default SEO;