Specifying Page Titles & Meta Tags

In This Lesson

We'll learn how we can append information into the head of our document with Inertia on a per-page basis. We'll then create our own head component, wrapping Inertia's, to allow easier global changes.

Created by: @tomgobich
Published: 1 year ago

👋 Hey all, just a heads up that an updated note regarding SSR and page titles was added to this lesson on Sept 28, 2024. You can find it a 04:33.

Join the Discussion 0 comments

Be the first to comment!

Transcript

just have slash AdonisJS being used as our page title. So if we click between our login and register, you can see it just maintains slash AdonisJS. But if we go to our homepage,
it does actually use homepage slash AdonisJS. So our goal in this lesson is to talk about how that's happening. So let's go ahead and hide our browser back away. Now let's start by taking a look at our homepage
because that's the one that's slightly different. And you'll see that it has added a head component to our page title. So let's go ahead and click on that. And you'll see that it has added a head component
within the template for the page. And it has the title homepage applied to it. This head component comes from InertiaJS. And this head component is how we can actually apply
metadata and page titles to our document on a per-page basis. We just specify the head component. We can provide in a title,
as well as any other metadata as child content to the head component. And it will automatically swap that out inside of our document's head. And this is being set up, if we scroll down and go into our resources,
InertiaLayout by that Inertia head tag that we have inside of our edge page. Going back to our homepage, it's using the shorthand to set the title, but we could also switch this
to provide it as a direct child content. So we can provide in our head there with title homepage, and it will be provided just the same as it did with that same shorthand
that we saw a moment ago right here. Now that takes care of why we see homepage on this one, but what about the hyphen AdonisJS that we see on our login and register pages?
Well, that comes back to our app.ts file. Within here, we have that title property, which provides a callback function, accepting in the title, and there is the hyphen app name,
which is defaulting to AdonisJS. It will first attempt to find a vapp name from our environment variables, and if it does, it will use that instead of the AdonisJS. So if we wanted to,
we could scroll down to our .env file and provide in a vapp name equals .mycourse, jump back into our browser, and now you'll see that that just replaced
hyphen AdonisJS with hyphen .mycourse, because during build, Vite will automatically swap out at that build time, anything that is prefixed with Vite
inside of our environment throughout our client side application whenever we make reference to it via import meta.env. And since we have this prefixed with Vite, it is being replaced at build time.
Okay, let's go ahead and now apply an actual title value inside of our login and register pages. So the first thing that we're gonna wanna do is import head.
So we'll import head from at inner attribute three. Now, just like our link component, you can also register this globally. We're not gonna do that here because we're actually going to create an alternative at the end of this lesson,
but that's totally an option if you'd prefer to go that way. And we just need to add that head component into our template, and then we can apply a title or you can use the shorthand like we saw on our homepage
to say that this is our login page. And if we wanted to apply a meta description to here as well, we can do that too. So meta name description, and then apply the content
as login to your plot my course accounts, and then end that meta tag. If we give that a save, jump back into our browser, our login page refreshed.
Let's go ahead and refresh it to get that fixed. And now we can see up in our title bar that we have login hyphen plot my course being applied. Furthermore, if we take a look at our inspect panel and take a look at our head,
we can see our title right here, which is working a-okay. But if we look up a little bit further at our meta tags, there's our meta description being applied there too.
And Inertia is adding in an Inertia attribute so that it knows that it can be swapped out via Inertia itself, because Inertia will not overwrite anything
that you write inside of your actual document outside of your Inertia application. For example, if we were to go into our Inertia layout page
and apply in meta name description content, this is a description, jump back into our browser, give it a refresh just for sanity sake here
and take a look at our head again. You'll see that we now have two meta descriptions in here. We have our meta name description, this is my description and meta name description login to your plot my course account. Since we're setting this meta description
at our server level inside of our root template for Inertia.js, it has not applied an Inertia attribute to it telling itself that it cannot overwrite that meta description,
but it has a meta description to apply. Therefore it is applying that second one right up here, which does have an Inertia tag. So it's saying that as you request subsequent pages,
it can swap this particular meta tag out. So do keep that in mind. If you set a meta description inside of your Inertia layout here, Inertia will not be able to change it
and it may add a duplicate to your document. So we don't want it there. You wanna maintain it on a per page basis. So we'll leave it in our view pages rather than at the Inertia layout level.
Okay, so last thing to do here, in most applications, it's pretty common that you might have a number of different tags that you would want some kind of normalization for and applied throughout most of your pages,
maybe not all, but most. So we can extract this out and simplify that use case for us into a component rather than using the head component in each and every one of our pages.
So we can scroll up here to our Inertia directory, go into our components, right-click it, add new file, and we'll call this component maybe app-head.vue.
Inside of here, we'll add our script setup lang of TS. And we can go ahead and import the head component from at Inertia view three, and then apply in our template,
making use of that head component. And we're gonna keep things simple for our application. We're not gonna have too much inside of the head to worry about. So we're just gonna apply a title,
and then we'll also add in a meta name description as well. What we wanna do is define props here. So define props and allow ourselves to provide values for these in.
So we'll have a title of type string and a description of type string there as well. For the title, we just provide it into the title tag. And for the description,
we need to just provide it into the content attribute, just like so. And with that, now we can make use of our head component in any one of our pages. In our Unplugin view components, we'll automatically import the head component
registered globally for us as we make use of it throughout our pages. And then we can do any global normalizations that we want to our meta information directly inside of this head component at any point in time.
So jump back into our login page. We can get rid of our head import right up there, and we can replace our head component with the app head component and provide in a title of login
and a description of login to your BotMyCourse account. And that component and get rid of the head altogether. Let's also go ahead and give that line there a copy
and jump over to our register page. And let's paste it into our template here as well. This one will want to change the text to register and we'll change the description here to something like start plotting
and planning your courses with ease by creating your BotMyCourse account today. Give that a save and it should break it down into separate lines. There we go.
And let's go ahead and jump back into our browser and check everything out. So we can see, we still see login here for our login page. For register, we see register. If we take a look at our head element,
there's start plotting and planning, yada, yada, yada for our meta description. And if we jump back to our login, we see that swaps out with login to your PlotMyCourse account. Awesome, so that's all working okay.

Building with AdonisJS & Inertia

91 Lessons

14h 3m

Getting Started

The Basics

Working with Forms

Database & Project Scaffolding

Authentication & Onboarding

The User's Organizations

Difficulties, Statuses, & Access Levels

Courses

Modules & Lessons

Settings

Organization Members

Authorization

InertiaJS 2

Stop losing your best ideas!

Use our integrated note feature to capture and organize your key insights. Take a note at any timestamp and jump instantly back to that moment in the video with a single click.