Learn Inertia
This episode is for members only

Sign up to access "Learn Inertia" right now.

Get started
Already a member? Sign in to continue
Playing
04. Page titles and meta data

Episodes

0%
Your progress
  • Total: 2h 20m
  • Played: 0m
  • Remaining: 2h 20m
Join or sign in to track your progress

Transcript

00:00
We touched on this head component in the last episode, but let's dive a little bit more deeply into what this is. For every single page that you create, you're going to want to give out a page title. Now, because we're working with a single page application,
00:15
this can't be set in the standard way by just using a title tag. Even in a normal Laravel application without a view front end, you would have to do some clever stuff to get each of these page titles set anyway. Now, first of all, what is this head component?
00:30
This comes directly from Inertia. And you can see that this is imported just up here. Almost everything that we use within Inertia will come from this InertiaJS Vue 3 package, unless, of course, you're using something like React on the front end.
00:45
So we've imported this head component. And with this head component, we can give the title of the page. If we head over, sure enough, this does work. But we've got this hyphen and then Laravel at the end of this.
00:57
Now, let's dive into that quick before we look at what else head can do. You can see here that the title can actually be set when we create our Inertia app. That's going to be bound into the title tag within our HTML. And remember, that is within app.blade.php.
01:13
So we've got a title just in here. You can customize this. You can get rid of the app name if you want to. It doesn't really matter.
01:20
But this is going to go ahead and set that title in place of this title just here for you. And this component can be placed anywhere on the page. If we get rid of it, we're just going to end up with, of course, nothing in there. But you could put this at the bottom if you want.
01:33
As long as it's within your template element, it doesn't really matter where it lives. Let's actually go ahead and check out the source of this, not by right-clicking a viewing source because we're working with a single-page application. The markup is not going to technically exist on the page because it gets injected in.
01:48
But if we look in the head section here and we find title, you can see, sure enough, this has been set inside of here. So the title is actually rendering out. Once you've fully learned Inertia and you're ready to dive into server-side rendering,
02:01
you will actually be able to get a real title output on the page rather than it just being injected in. OK, let's look at what else head can do here because this can be pretty useful. Let's say that we wanted a meta description on the page.
02:16
We know that that would normally go within app.blade.php. So we would add this in like the other meta tags that have been defined here. But we wouldn't want a global meta tag in here with a description because this varies from page to page.
02:31
So in this case, what we're going to do is actually take this tag and we're going to open this component up and we're going to put this content inside of here. So the slot in here will go ahead and add that to your head. So we could say comments index just to keep things simple.
02:48
And if we head over now, of course, we're not going to see anything different on the page. But if we inspect this and we head up to the head section, you can see, sure enough, we have got our meta description in here now. So overall, this head component makes it really convenient to add
03:03
stuff to your single page apps that normally would be a little bit more tricky. And remember, we just import this on any pages that we want to use it and either use the shorthand just with the title or open this up and add anything else we need to add to the head of that page.

Episode summary

In this episode, we take a closer look at handling page titles and meta data in our Laravel + Inertia single-page application. While we briefly introduced the Head component from Inertia in the previous episode, here we dive deeper into how it works and why it's essential for managing things like the page title dynamically.

We start by exploring why you can't just use a regular <title> tag in a SPA setup, and how Inertia's Head component helps to solve this problem. You’ll see that you can set the page title easily using this component, and there's even a default app name (like "Laravel") tacked on that you can customize or remove if you want.

Next, we roll up our sleeves and see how the Head component can be used for more than just titles—like adding meta tags. Instead of defining things like meta descriptions globally (which wouldn’t make sense for every page!), we show how you can insert page-specific meta tags right in your component.

Finally, you’ll see all this in action by checking out the browser’s head section and verifying that your meta tags are there as expected. By the end of this episode, you'll know exactly how to set unique titles and meta info for each page in your Inertia-powered app, making your site more SEO-friendly and user-friendly too.

Episode discussion

No comments, yet. Be the first!