This course has been updated! We now recommend you take the Introduction to Gatsby, v2 course.
Transcript from the "Rendering Site Metadata" Lesson
[00:00:00]
>> Jason Lengstorf: To actually use this, we want to be able to modify the title of our site. So we have to do a couple of pieces of boilerplate first. And what we're going to do is get back in here, we're gonna stop our server, and then I'm going to install gatsby-plugin-react-helmet and react-helmet.
[00:00:23] So React Helmet is a library for modifying the head of an HTML document in React. It allows us to set the title, meta tags, if you wanted to do Open Graph descriptions or Twitter Cards, you would set those in here. It's also how you can set the language attribute on your HTML tag.
[00:00:44] And a whole bunch of other things that are really good for making accessible and full-featured SEO friendly websites. So let's get those installed. I guess I actually need to install them.
>> Jason Lengstorf: And now that we have these installed, I'm going to get back into the config file here.
[00:01:16] And I just need to add gatsby-plugin-react-helmet. This is so that we can do server side rendering with Helmet. But again, you shouldn't have to configure that, you shouldn't have to worry about it at all. So you add the plugin and you're off to the races. Next, we can go back into our layout file, and our layout file is also going to be where we set our SEO.
[00:01:44] So I'm going to import Helmet from react-helmet, and,
>> Jason Lengstorf: Let's get into, let's see, where are we gonna put this? How about right below our global styles? So I'm gonna set Helmet, and let's add a language attribute for accessibility,
>> Jason Lengstorf: I'm also going to add a title. And right now, we don't have access to that GraphQL yet, so let's just make sure that this works.
[00:02:22]
>> Jason Lengstorf: And then we also wanna add a meta name description, and the content will be site description. So we need to actually load this data, but for now, we just wanna make sure that this is doing what we expected.
>> Jason Lengstorf: So let's save that.
>> Jason Lengstorf: And now when I restart the server,
[00:02:51]
>> Jason Lengstorf: What we'll see is that,
>> Jason Lengstorf: Now we get a title. And if inspect the head, I can also see that the lang attribute is set, and we've got the title here. And let's poke down, there it is, the description, so our description is showing up as well.
[00:03:17] So everything that we wanted to happen is showing up, but it's not using the data that we added to our site config yet. So there are lot of ways that we can get this data. The easiest one is to just grab this out as is. And I'm gonna create a convenience method.
[00:03:35] Now, in a typical website, you'd probably end up using the site metadata in a bunch of places. Because this is a pretty limited scale app, we're not. But I'm still gonna show you the abstraction because it's really useful. I'm gonna write a React Hook. So I'm gonna create a folder called hooks.
[00:03:51] And in, it I'm going to create use-sitemetadata.js. And the Hook that we wanna use is actually not gonna use any React at all. So this is kind of a fun thing to do. Instead, we're going to import GraphQL and a Gatsby Hook called useStaticQuery from Gatsby. Let me hide that so we can see what's going on.
[00:04:20]
>> Jason Lengstorf: And then we're gonna define our Hook, so useSiteMetadata, doesn't take any arguments.
>> Jason Lengstorf: And what we're going to do is we're gonna just create a variable.
>> Student: You've got a typo there on useSiteMetadata.
>> Jason Lengstorf: Metadata, okay, perfect. So we have a useStaticQuery. And then inside of useStaticQuery, we're gonna write a GraphQL query.
[00:04:49] So we use Gatsby's GraphQL template tag, and then we can just paste in that query that we already wrote.
>> Jason Lengstorf: And the data that comes back is just gonna be an object that matches this structure. So basically this becomes the JSON object. So we're gonna have data.site.siteMetadata.title. For convenience, we don't wanna have to type data.site.siteMetadata every time, we just wanna return the metadata.
[00:05:25] So we can return data.site.siteMetadata.
>> Jason Lengstorf: And now we can export default useSiteMetadata.
>> Jason Lengstorf: And then in our layout,
>> Jason Lengstorf: We can grab that Hook, so import useSiteMetadata from hooks/use-sitemetadata. And then we're gonna have to refactor this a little bit. Right now we're using the implicit return, that's what this parentheses is for.
[00:06:06] So I'm going to just highlight the whole thing, wrap it in a curly brace, and then we're gonna return, down here. And then I'm going to do, we want the title and description from useSite, oops, no, not from, = useSiteMetadata. Okay, so what we're doing is in useSiteMetadata, we're just grabbing that metadata object.
[00:06:35] And then here we're able to just destructure it and get only what we need, so just the pieces that we're actually gonna use come out of that data. And then down here, I can reset this to just use the pieces that we wanted to use.
>> Jason Lengstorf: So we've got our title and description using the title and description that we're loading from our site's metadata.
[00:07:03]
>> Jason Lengstorf: And,
>> Jason Lengstorf: That's got a new query in it, so I'm gonna stop and restart the page. We're working on improvements for that in the Gatsby Core. But at the moment, when you change your GraphQL queries, a lot of times you're gonna need to stop and restart the page just to make sure that it picks those up.
[00:07:22] And now you can see our Frontend Masters Gatsby workshop is being loaded, and also our description is being loaded as well. So with a combination of GraphQL to get this data, and then React Hooks to make it really easy to access this data, we have a really powerful solution for tossing data around inside of our app.
[00:07:50] This is a really nice workflow. And the great thing about it is that as your site scales, you don't have to go and refactor that query in a bunch of places, you're going to use site metadata. You're like, we added an author page, cool, now it's available to the entire app.
[00:08:07] So it's a really scalable way to manage that data access.