Title & meta

Since JavaScript apps are rendered within the document <body>, they are unable to render markup to the document <head>, as it's outside of their scope. To help with this, Inertia ships with an <inertia-head> component, which can be used to set the page <title>, <meta> tags, and other <head> elements.

Note, the <inertia-head> component is not available in the Svelte adapter, as Svelte already ships with a <svelte:head> component.

Head component

To add <head> elements to your page, use the <inertia-head> component:

<inertia-head>
  <title>Your page title</title>
  <meta name="description" content="Your page description">
</inertia-head>
The <inertia-head> component is automatically registered by the Inertia plugin.

Title shorthand

You can also pass through the page title as a prop to the <inertia-head> component:

<inertia-head title="Your page title" />

Multiple instances

It's possible to have multiple instances of the <inertia-head> component throughout your application. For example, your layout can set defaults, and then your pages can overide those defaults.

<!-- Layout.vue -->

<inertia-head>
  <title>My app</title>
  <meta head-key="description" name="description" content="This is the default description" />
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
</inertia-head>

<!-- About.vue -->

<inertia-head>
  <title>About - My app</title>
  <meta head-key="description" name="description" content="This is a page specific description" />
</inertia-head>

Inertia will only ever render one <title> tag, however all other tags will be stacked, since it's possible to have multiple instances of them. To avoid duplicate tags in your <head>, you can use the head-key property, which will make sure the tag is only rendered once. This is illustrated in the above example for the <meta name="description"> tag.

Here is the resulting HTML for this example:

<head>
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
  <title>About - My app</title>
  <meta name="description" content="This is my about page description" />
</head>

Extending

In a real app, it can be helpful to create a custom head component that uses the <inertia-head> component. This gives you a place to set app-wide defaults, such as appending the app name to the page title. Here's a simple example of what this could look like.

<template>
  <inertia-head :title="title ? `${title} - My App` : 'My App'">
    <slot />
  </inertia-head>
</template>

<script>
export default {
  props: {
    title: String,
  },
}
</script>

And then use this custom component in your pages:

<site-head title="About" />