00:00 So to update our title and our description for this route, we need to go to that route, that's the username route, and we'll add a meta export. This is actually pretty similar to the links export, but there are a couple important differences that we'll talk about. So we're going to export const meta, and this is a meta function, which we'll bring in from RemixRunReact,

00:19 and then we are going to return an array. So again, pretty similar to the way that links work. And each one of these will be a meta tag. Title is kind of special though, because with title, we can see right here,

00:35 we have a title and then the children of the title element are what the title are. And then the rest of these are just meta tags with attributes. And so title is a little special, we just say as the property title, and then here we'll say, yeah, profile epic notes. But then for the description,

00:55 yeah, copilot also is lost on this one. The description actually will be similar to this, except it needs to be properties of the meta tag. So we'll say name is description, and content is check out this profile on epic notes. So here we see the content property there.

01:13 So with that, we will save that, and we get not the right thing. Okay, and the reason that we're not getting what we want is because remember, we're responsible for everything between the opening and closing HTML. We have not done anything to say,

01:29 hey, take all of the meta elements or the meta exports from all of our active routes and put them in the head. So we gotta go to our root again here, and we need to add the meta export, which is responsible for doing that. So we'll save this, and now we have what we're looking for. We have profile, and then we have our description,

01:49 but we've got another problem. We still have a title and a description right here, but we can't just remove those, because if we do, that takes care of it here, but if I go over to the homepage, they're gone. So what we need to do is we're gonna add an export to the root route as well. So let's say export const meta is a meta function

02:09 from RemixRunReact. And then we will return a similar thing to what we had from our other route. So we have our title, and then we have the name, description, and a note taking up. I think the way that we did this was your captain's log,

02:27 so we're gonna use that. There we go. All right, solid. And so now those get added, and those will be there as a default. And then if we go to the profile page, we're gonna see the profile exports. So this is one place where things are a little bit different between meta and links,

02:45 whereas with links, you export this array of links, and all of those will be active on the page. And then you add links to other routes, and they will just be merged together. So it'll just render them all to the page. In the meta export, it doesn't really make sense to do that because we don't wanna have multiple of the same meta tags.

03:04 So we don't want multiple descriptions. We don't want multiple titles. And so the way that meta works is it will only take the meta exports from the leaf route. So the lowest level route that is available. And so you can think of the higher level routes

03:23 or the parent routes as kind of like the fallback in case the children routes don't have a meta export. But as soon as you have a meta export, then that is what is going to be rendered by the meta component. And so this is just an important distinction between links and meta, but this is actually also the reason

03:42 why we are not gonna move these two down. And it's because if we move those down, then this will get overwritten by any child route meta. And so we either have to somehow merge them, which you can actually do if you need to. That's not very common, but you can do it. Or you'd use the matches,

04:01 which we'll actually talk about later. Or you would just have to specify these two meta tags everywhere that you have a meta export, which is not very fun. And so what I do is I just have my global meta tags that I want on every single page to show up here. And then I have my fallback meta exports

04:21 that's like if they don't specify a meta, then we want at least a title and a description. And so then I'll put those here. And then all the children exports or children routes will export a meta for specifying the specific meta exports. And this is where you'll typically find your OG image

04:41 and Twitter image and different things like that for your social sharing stuff. You'll put it in these child routes. So that's how you add a meta export to a route.