thinkstream

タイトルと メタ

Inertia で構築された JavaScript アプリはドキュメントの <body> 内でレンダリングされるため、そのスコープ外にあるドキュメントの <head> にマークアップをレンダリングすることができません。これを補うために、Inertia には <Head> コンポーネントが同梱されており、ページの <title>、<meta> タグ、その他の <head> 要素を設定するために使用できます。

<Head> コンポーネントは、サーバーサイドのルートテンプレートに含まれていない <head> 要素のみを置き換えます。

<Head> コンポーネントは Svelte アダプターでは利用できません。Svelte にはすでに独自の <svelte:head> コンポーネントが用意されているためです。

Head コンポーネント

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

タイトルの省略記法

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

タイトルコールバック

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

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

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

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

html
<title>Home - My App</title>

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

複数の Head インスタンス

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

Inertia は常に 1 つの <title> タグのみをレンダリングします。一方で、その他のタグは複数存在しても有効であるため、すべて積み重ねてレンダリングされます。<head> 内で重複したタグを避けるには、head-key プロパティを使用してください。これにより、そのタグが 1 度だけレンダリングされることが保証されます。上記の例では、<meta name="description"> タグでこの仕組みが示されています。

上記のコード例は、次の HTML をレンダリングします。

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 コンポーネントを作成すると便利な場合があります。これにより、ページタイトルにアプリ名を付加するなど、アプリ全体のデフォルト設定をまとめて管理できます。

カスタムコンポーネントを作成したら、ページ内でそれを使い始めるだけです。

要素における Inertia 属性

Inertia はこれまで、ドキュメントの <head> 内の要素を追跡・管理するために inertia 属性を使用してきました。しかし現在では、より標準に準拠した data-inertia 属性を使用するオプションを選択できます。HTML 仕様では、将来の HTML 標準との衝突を避けるため、カスタム属性には data- プレフィックスを付けることが推奨されています。

これを有効にするには、アプリケーションのデフォルト設定 で future.useDataInertiaHeadAttribute オプションを設定してください。

js
createInertiaApp({
    // resolve, setup, etc.
    defaults: {
        future: {
            useDataInertiaHeadAttribute: true,
        },
    },
})