Creating an SEO component

Every site on the web has meta tags. Meta tags are snippets of text and image content that provide a summary of a web page. This data gets rendered in the browser whenever someone shares your site or when it appears within a search engine. Let's create an SEO component so that we can have rich previews that entice users to visit our site:

1. Install the necessary dependencies:

   npm i react-helmet-async gatsby-plugin-react-helmet-
   async

   react-helmet-async is a dependency that manages all the changes that are made to your document head.

2. Include the gatsby-plugin-react-helmet-async plugin in your gatsby-config.js file:

   module.exports = {
     // rest of config
     plugins: [
       `gatsby-plugin-react-helmet-async`,
   // other plugins
     ]
   }

   This plugin updates your gatsby-browser.js file so that it wraps the root element in HelmetProvider, like this (you do not need to do this step yourself):

   import React from "react";
   import { HelmetProvider } from...