00:00 I know that some of you are seeing this and you're thinking, my app doesn't need SEO because it's an internal app or something. But no, you definitely don't skip this exercise. This is important for you as well. It's not just about SEO. It's also about when you share things within your corporate network,

00:19 or when the user is looking at your page, you're going to have some important metadata that you need to configure your application with. So it's not just about SEO. So what we're going to be doing is making it so that the title is useful. So here we have Cody's notes. If I click on one of the notes,

00:39 then we're going to have the title of the note. If we look at our elements tab here, we can look in the head and we'll see we have a description here that's also useful. We go back to the index and we see that we have that content laid out here that even shows the number of notes that we're looking at, which can be quite helpful,

00:58 especially for social sharing and SEO. But there are other things here as well. So we have the chart set and the viewport and all of that configured too. So the way that this works in the web is you have your head, and in your head, you render the title and meta tags.

01:18 This configures your webpage and configures the browser to behave in a specific way. So the title, of course, that's going to show up at the top. Your description, that's not going to show up anywhere as far as the user can see on the site. But when they share it to social media or when they're looking it up

01:36 on search engines, they're going to see that description. So that's also important. Then the viewport is useful for mobile devices in particular. So if you've ever opened up a page where everything was way zoomed out or something, it's probably because they missed this configuration. Then the chart set, the UTF-8,

01:57 this is the default for most browsers. So it's normally not totally necessary, but occasionally it does come up as a problem. And so you need to have that encoding. So to do this in Remix, we have our app component. So you might think, oh, we can just render it all directly in there, but you might want to customize the title and the description

02:15 based on some of the data on the page and like on a route per route basis, which is exactly what we've got. So, or what you're going to have when you're done with this exercise. So with each route, you have the opportunity to export a meta function. And once you have that exported,

02:33 you add a special meta component to your application. And then you can use those things that you export here will be added as meta. But there's some interesting things with the way that it's like, things are overridden and stuff like that, that we'll get into. So with this sort of thing,

02:51 if we had things configured the way that we're going to, then we'd get the title and the description. And then we'd keep the charset and the viewport. So what we're going to do, that's the way it's going to get it set up. And then we also have the ability, and it's very common to want to have our metadata

03:09 be derived from the loader data. And so you also have the ability to do that, which is how we're able to determine how many notes the user has and have the user's name in the title as well. So we're going to learn about all that stuff. We're also going to talk about, well, what if this route, this child route, doesn't even have a loader,

03:29 but its parent has all the data that we need. How are we going to access that data? So we're going to get into that. It's going to get pretty deep. It's going to be awesome. I think you're going to have a good time. So yeah, go forth and get started on step one.