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:
- Install the necessary dependencies:
npm i react-helmet-async gatsby-plugin-react-helmet- async
react-helmet-asyncis a dependency that manages all the changes that are made to your document head. - Include the
gatsby-plugin-react-helmet-asyncplugin in yourgatsby-config.jsfile:module.exports = { // rest of config plugins: [ `gatsby-plugin-react-helmet-async`, // other plugins ] }This plugin updates your
gatsby-browser.jsfile so that it wraps the root element inHelmetProvider, like this (you do not need to do this step yourself):import React from "react"; import { HelmetProvider } from...