Create an Accessible SEO Component using React Helmet
Add metadata to your gatsby-config file and query it using the useStaticQuery hook and the GraphQL template function.
React Helmet is a component that lets you control your document head using their React component. Install gatsby-plugin-react-helmet and use the Helmet component from react-helmet to pass in necessary information such as title, description, language, and titleTemplate.
Finally, use the meta keyword to add an array with targeted og and Twitter information.
Instructor: [0:01] Install two plugins -- gatsby-plugin-react-helmet and react-helmet itself. In your Gatsby config file, add gatsby-plugin-react-helmet to your plugins array.
[0:25] While you're here let's update the site metadata. Instead of the automatic directory name, we'll give it something a bit cleaner for the title. We'll add a description and a Twitter handle.
[0:48] Next, create an SEO file in your components directory. Import React from 'react', and import { Helmet } from 'react-helmet'.
[1:12] Navigate to your graphical explorer, which is available at localhost___GraphQL. Look at the site query, site metadata and toggle description, title and Twitter. We'll see that this is a valid query.
[1:34] In your project, import { useStaticQuery, graphql } from 'gatsby'. We'll create an SEO component that we export like the other components we've created thus far.
[2:05] Inside of it, we're going to create a site object that will come from our useStaticQuery hook, which will execute a query using the GraphQL template key. Inside this key, we'll put a template literal, which we'll grab from our query in the graphiql-explorer.
[2:40] Now we can return something from our component. We're going to use the Helmet component we've already imported. The Helmet component takes a number of different key value pairs.
[2:54] We'll start with title. We'd like to pass in a title to this SEO component, so we'll add it to the parameters that we would normally pass it. We'll also add description that we'll use a bit later.
[3:18] Next, we're going to use a key called htmlAttributes. This key takes an object. We're going to set lang to English. This is important for accessibility. We'll also add a template title. This template title will take the title of our page and depend it to the site metadata title that we're grabbing from our gatsby-config file.
[3:58] Next, we're going to add an array called meta. We're going to add a number of objects that allow us to be performant in SEO. First, we'll add description. We always want there to be a description for our page. However, if we don't pass one, we already have one in our gatsby-config file.
[4:26] We'll create a new variable called metaDescription, which takes the description we pass in. If it doesn't exist, it uses the description that we've queried from our site metadata. We'll add that as the content.
[4:54] Next, we'll use the property og:title. This is a title for all SEO searches. We can also add a number of other fields that we'll do quickly here -- og:description, which will use the metadata description for, og:type, which in our case should be website.
[5:37] We also want specific metadata for Twitter, so we'll use twitter:title and twitter:creator using the handle we've defined in our gatsby-config file. We always want this to exist, but if we happen not to pass it, we'll add an empty string.
We can add twitter: [6:04] Description, again using our meta description. Finally, a twitter:card type. In this case, summary.
[6:22] We want to concatenate the array called meta. Just in case it doesn't exist, we should default it to an empty array, so we don't have issues.
[6:40] Now, we can import our SEO component from components/SEO. We'll use it and, in the case of our main page, pass a title -- Home page. If we look at our metadata on our page inside the head tag, we can see all of this information.