7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 10Length: 1.2 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.3 Modifying Metadata

Gatsby sites are 100% dynamic. So if we want to change the page's title or add meta tags, we have to do so dynamically with the react-helmet plugin. You'll install and configure this plugin in this lesson.

2.3 Modifying Metadata

Now that we have a consistent look and feel thanks to our layout, we need to turn our attention to some smaller details like the title of our pages. We don't have a title, and so the browser is just showing the URL of that page and that's not very helpful. We want to have some text so that the user knows what Is that page. So that is of course inside of the head element. But we haven't seen anything as far as head elements are concerned. If we look at our pages, they are just very simple components, nothing there. And of course our layouts doesn't have anything as far as our head is concerned. So how do we do that? Well, let's take a look at the source code in the browser. And we see some markup, but it's not anywhere representative as to what's actually rendered in the browser. And that is of course because we are using react, everything is loaded dynamically. So all that is sent to the browser is just the markup. For bootstrapping react so that react can then load everything dynamically with JavaScript. So if we are going to manipulate the head element, we're gonna have to do so dynamically. Now let's first of all, just look at where this page is coming from, or at least this markup. Let's go to the public folder, and then there's index HTML. And you can see that this markup is exactly the same As well. We have inside of the browser, and we can prove that by just changing some of that. So let's add an H1 at the end of the document, some text and we will of course see that rendered. In the document, there we go. So you might think, Okay, well, we can make our changes here inside of this index HTML. But no, we don't want to do that because every time we start our application, it's going to overwrite that file. So that's not an option. So instead, we need to use React to manage our head element because while react is doing everything else, it might as well dynamically manage our head elements and we do that with a component called react helmet. So we're going to install react helmet, but there's also a Gatsby plugin. So we will use that plugin, we will need to tell our application that we are using that plugin. And then we will be able to actually use it to manage the head. So first thing we want to use npm to install We're going to save these. And the first is going to be gatsby-plugin-react-helmet. And then we also want react-helmet, because that's what's actually going to be doing all of the work. So as that stuff is installing, we need to go to the Gatsby config. And there's already some code here. It's just exporting an object with nothing there. So we want to add the plugins. And we want to specify that we are going to be using Gatsby plugin React helmet. And then once everything is installed and we start our application, we will have helmets available to us so that we can start using that. In fact, let's just go ahead and do that while that is still installing. So the great thing about helmet is that we can use it anywhere really we can add it to our layout page. If we wanted to, we can also add it to the individual pages. I think it's a good idea to do both because the layout page is going to serve kind of as the default so that if we have a page and forget to use helmet to add a title Then that's okay. It's going to fall back to our layouts. So let's import helmet from react helmet. This is going to give us the helmet component so that we can then add in anything that we want to inside of the head. So we will have helmet and we want the title. So this is the layout. Let's say that this is going to be our Gatsby website. And so by default every page is going to have this title. And now that we have helmet and the plugin installed, we can start back up our application that will rebuild everything and then we will see the new title. In the browser, so let's refresh the page. Our title is now our Gatsby website. And it doesn't matter which page we go to which of course we only have two, but we can see that the title is the same So let's say for the about page, we want an about title. So let's add a helmet there as well. Let's just copy and paste and then inside of layouts, we will use helmet once again We will set the title to about us. And now the about page is going to have its own title. And if we go back home, we have our Gatsby website. And as I mentioned, this is for manipulating the head of the page. So if we have any meta tags that we wants to add, we can do that right here. All we have to do is make it a child of helmet and it's going to work just fine. So things are starting to come together quite nicely. And in the next lesson we are going to look at dynamically generating pages using static data.

Back to the top