タイトルとメタデータ

Inertia を利用した JavaScript アプリは、ドキュメントの <body> 内でレンダリングされるため、ドキュメントの <head> にマークアップをレンダリングすることができません。これは、<body> のスコープ外になるためです。これを解決するため、Inertia には、ページの <title>、<meta> タグ、その他の <head> 要素を設定するために使用できる <Head> コンポーネントが付属しています。 <title>、<meta> タグ、およびその他の<head> 要素を設定するために使用できます。

<Head> コンポーネントは、サーバーサイドのルートテンプレートにない <head> 要素のみを置き換えます。サーバーサイドのルートテンプレートにない要素のみを置き換えます。
<Head> コンポーネントは、Svelte アダプターでは利用できません。Svelte には独自の <svelte:head> コンポーネントがすでに含まれているためです。

Head コンポーネント

ページに <head> 要素を追加するには、<Head> コンポーネントを使用します。このコンポーネント内には、ドキュメントの <head> に追加する要素を含めることができます。

import { Head } from '@inertiajs/vue3'

<Head>
  <title>Your page title</title>
  <meta name="description" content="Your page description">
</Head>

タイトルの短縮記法

ドキュメントの <head> に <title> を追加するだけでよい場合は、<Head> コンポーネントに title を props として渡すだけで済みます。

import { Head } from '@inertiajs/vue3'

<Head title="Your page title" />

タイトルのコールバック

アプリケーションの createInertiaApp の設定メソッドで、title コールバックを使用することで、ページの <title> をグローバルに変更できます。 createInertiaApp の設定メソッドで、title コールバックを使用することで、ページの <title> をグローバルに変更できます。通常、このメソッドはアプリケーションのメイン JavaScript ファイルで呼び出されます。タイトルコールバックの一般的な使用例は、各ページタイトルの前または後にアプリ名を自動的に追加することです。

createInertiaApp({
  title: title => `${title} - My App`,
  // ...
})

title コールバックを定義すると、<Head> コンポーネントを使用してタイトルを設定するときに、コールバックが自動的に呼び出されます。

import { Head } from '@inertiajs/vue3'

<Head title="Home">

この例では、次の <title> タグが生成されます。

<title>Home - My App</title>

title コールバックは、<Head> コンポーネント内の <title> タグを使用してタイトルを設定した場合にも呼び出されます。

import { Head } from '@inertiajs/vue3'

<Head>
  <title>Home</title>
</Head>

複数の Head インスタンス

アプリケーション全体で <Head> コンポーネントの複数のインスタンスを持つことが可能です。たとえば、レイアウトでデフォルトの <Head> 要素を設定し、個々のページでこれらのデフォルトを上書きできます。

// Layout.vue

import { Head } from '@inertiajs/vue3'

<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" />
</Head>

// About.vue

import { Head } from '@inertiajs/vue3'

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

Inertia は <title> タグを 1 つだけレンダリングしますが、他のすべてのタグは複数インスタンスを持つことが有効であるため、積み重ねられます。 <head> に重複したタグを表示しないようにするには、head-key プロパティを使用します。これにより、タグが 1 回だけレンダリングされるようになります。これは、上記の例の <meta name="description"> タグで示されています。

上記のコード例では、次の HTML がレンダリングされます。

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

Head の拡張機能

実際のアプリケーションを構築する場合、Inertia の <Head> コンポーネントを拡張するカスタム Head コンポーネントを作成すると便利な場合があります。これにより、アプリ名とページタイトルを連結するなど、アプリ全体のデフォルト設定を行う場所を作成できます。

<!-- AppHead.vue -->

<script setup>
import { Head } from '@inertiajs/vue3'

defineProps({ title: String })
</script>

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

カスタムコンポーネントを作成したら、ページでカスタムコンポーネントの使用を開始できます。

import AppHead from './AppHead'

<AppHead title="About" />