> ## Documentation Index
> Fetch the complete documentation index at: https://inertiajs.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Title & Meta
Since Inertia powered JavaScript apps are rendered within the document ``, they are unable to render markup to the document ``, as it's outside of their scope. To help with this, Inertia ships with a `` component which can be used to set the page ``, `<meta>` tags, and other `<head>` elements.
The `<Head>` component will only replace `<head>` elements that are not in your server-side root template.
The `<Head>` component is not available in the Svelte adapter, as Svelte already ships with its own `<svelte:head>` component.
## Head Component
To add `<head>` elements to your page, use the `<Head>` component. Within this component, you can include the elements that you wish to add to the document `<head>`.
<CodeGroup>
```vue Vue icon="vuejs" theme={null}
import { Head } from '@inertiajs/vue3'
<Head>
<title>Your page title
```
```jsx React icon="react" theme={null}
import { Head } from "@inertiajs/react";
Your page title
;
```
```svelte Svelte icon="s" theme={null}
Your page title
```
## Title Shorthand
If you only need to add a `` to the document `<head>`, you may simply pass the title as a prop to the `<Head>` component.
<CodeGroup>
```vue Vue icon="vuejs" theme={null}
import { Head } from '@inertiajs/vue3'
<Head title="Your page title" />
```
```jsx React icon="react" theme={null}
import { Head } from "@inertiajs/react";
<Head title="Your page title" />;
```
```js Svelte icon="s" theme={null}
// Not supported
```
</CodeGroup>
## Title Callback
You can globally modify the page `<title>` using the `title` callback in the `createInertiaApp` setup method. Typically, this method is invoked in your application's main JavaScript file. A common use case for the title callback is automatically adding an app name before or after each page title.
```js theme={null}
createInertiaApp({
title: (title) => `${title} - My App`,
// ...
});
```
After defining the `title` callback, the callback will automatically be invoked when you set a title using the `<Head>` component.
<CodeGroup>
```vue Vue icon="vuejs" theme={null}
import { Head } from '@inertiajs/vue3'
<Head title="Home">
```
```jsx React icon="react" theme={null}
import { Head } from '@inertiajs/react'
<Head title="Home">
```
```js Svelte icon="s" theme={null}
// Not supported
```
</CodeGroup>
Which, in this example, will result in the following `<title>` tag.
```html theme={null}
<title>Home - My App
```
The `title` callback will also be invoked when you set the title using a `` tag within your `<Head>` component.
<CodeGroup>
```vue Vue icon="vuejs" theme={null}
import { Head } from '@inertiajs/vue3'
<Head>
<title>Home
```
```jsx React icon="react" theme={null}
import { Head } from "@inertiajs/react";
Home
;
```
```js Svelte icon="s" theme={null}
// Not supported
```
## Multiple Head Instances
It's possible to have multiple instances of the `` component throughout your application. For example, your layout can set some default `` elements, and then your individual pages can override those defaults.
```vue Vue icon="vuejs" theme={null}
// Layout.vue import { Head } from '@inertiajs/vue3'
My app
// About.vue import { Head } from '@inertiajs/vue3'
About - My app
```
```jsx React icon="react" theme={null}
// Layout.js
import { Head } from "@inertiajs/react";
My app
;
// About.js
import { Head } from "@inertiajs/react";
About - My app
;
```
```js Svelte icon="s" theme={null}
// Not supported
```
Inertia will only ever render one `` tag; however, all other tags will be stacked since it's valid 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 example above for the `<meta name="description">` tag.
The code example above will render the following HTML.
```html theme={null}
<head>
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<title>About - My app
```
## Head Extension
When building a real application, it can sometimes be helpful to create a custom head component that extends Inertia's `` component. This gives you a place to set app-wide defaults, such as appending the app name to the page title.
```vue Vue icon="vuejs" theme={null}
```
```jsx React icon="react" theme={null}
// AppHead.js
import { Head } from "@inertiajs/react";
const Site = ({ title, children }) => {
return (
{title ? `${title} - My App` : "My App"}
{children}
);
};
export default Site;
```
```js Svelte icon="s" theme={null}
// Not supported
```
Once you have created the custom component, you can just start using it in your pages.
```vue Vue icon="vuejs" theme={null}
import AppHead from './AppHead'
```
```jsx React icon="react" theme={null}
import AppHead from './AppHead'
```
```js Svelte icon="s" theme={null}
// Not supported
```
## Server-Side Head Elements
You may wish to include default head elements like `` or `<meta>` tags in your root Blade template. This creates two challenges: preventing duplicates when [SSR](/v3/advanced/server-side-rendering) is active, and ensuring the client-side `<Head>` component may replace them during navigation.
### SSR Fallback
The `<x-inertia::head>` Blade component accepts fallback content via its slot. This content is only rendered in the initial HTML when [SSR](/v3/advanced/server-side-rendering) is not active. When SSR is active, the `<Head>` component already provides these elements as part of the server-rendered response, so the fallback is skipped.
```blade resources/views/app.blade.php theme={null}
<head>
@vite('resources/js/app.js')
<x-inertia::head>
<title>{{ config('app.name') }}
```
### The `data-inertia` Attribute
The client-side `` component tracks the elements it manages by marking them with a `data-inertia` attribute. By default, it leaves any other tags in your Blade template untouched. Since there may only be one `` tag, the `<Head>` component will always replace it. Other elements like `<meta>` and `<link>` may have multiple instances, so the component needs a way to identify which ones it should manage.
You may add the `data-inertia` attribute to elements in your Blade template to have the `<Head>` component adopt them. On the first client-side navigation, it will match these elements by key and replace or remove them as needed.
```blade resources/views/app.blade.php theme={null}
<head>
@vite('resources/js/app.js')
<title>{{ config('app.name') }}
```
The `data-inertia` value corresponds to the `head-key` property on your client-side `` elements.