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

Chapters

00:00 - Introducing Inertia's Head Component
01:20 - Inertia's Global Title Method
02:15 - Adding Our First Page Title and Meta Description
03:19 - Inertia Meta Tag Attribute
04:33 - An Updated Note on SSR Titles
06:37 - Creating An AppHead Component

👋 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

So, so far our login and register page just have /adonisjs being used as our page title.
So if we click between our login and register, you can see it just maintains /adonisjs. But if we go to our homepage, it does actually use homepage/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. And 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 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, inertia layout, 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 -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 -appname, which is defaulting to AdonisJS. It will first attempt to find a Vt app 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 Vt app name equals,
block my course, jump back into our browser. And now you'll see that that just replaced -adonisjs with -plot my course, because during build,
Vt will automatically swap out at that build time, anything that is prefixed with Vt 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 Vt, 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 @inertia-vue3. 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 account, 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 InertiaJS, 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. So future Tom interjecting here to point out one additional thing that shoto5536 pointed out to me
on the YouTube comment of this video. So it's in relation to server-side rendering. So if we right click Inspect inside of our browser, take a look at the Network tab and refresh our page
to get all of our network requests pointed out here. Let's take a look at the network request for our document and specifically the response and the raw response. What you'll notice here is that we have two titles.
We have the one coming from our Edge page and we have the one coming from our View page via Inertia. Now, ultimately, if we Inspect, go into the head and take a look
at the head elements that we have, the client-side app will strip out that extra title for us, but at server time, whenever we're sending this response back,
we do have that extra title in there. So for that reason, it would be good to jump into our Inertia layout, which ultimately renders our Inertia application,
and just remove that title altogether if you're going to specify one inside of your Inertia application. Additionally, if we jump back into the browser,
scroll back up and take a look at the raw response for our document request, you'll notice that this title is just Login, whereas the title that we see in our Browser tab
has the hyphen PlotMyCourse appended onto it. As we saw earlier in this lesson, if we hide that browser back away, scroll back up to our app.ts file,
we have this title tag being appended into our Create Inertia app. Well, we actually aren't applying that on the server side. So if we give that line there a copy,
jump over to our ssr.ts, we're not applying it over here, but we want to. So if we paste that in, we also need to go grab that app name line from our app.ts,
so let's do that real quick as well. Jump over to our ssr and paste that in above our render function there. Give that a save. If at this point we jump back into our browser,
take a look at the Login raw response, you'll see now our title's coming through as intended and as it is on our client side.
So the server sent HTML will now match the metadata and titles that we have from our server side. Thanks again to Shoto5536 for pointing that out to me.
Now back to the original lesson. 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 apphead.view.
Inside of here, we'll add our script, setup lang of ts. And we can go ahead and import the head component from @inertia_view3 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. And our unplug in view components will automatically import the head component
register it 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 bot my course 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 bot my course 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 is 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 plot my course account. Awesome. So that's all working.

Building with AdonisJS & Inertia

91 Lessons

14h 5m

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.