バージョン: 13.x

Laravel Head

Introduction
Installation
Quickstart
Resolution Precedence
Defining Metadata
Open Graph
- X / Twitter Cards
Theme Colors
Application Metadata and Icons
Progressive Web Apps
Performance and Discovery
Custom Tags
Schemas
Rendering
- Blade
- Livewire
- Inertia

Introduction

Laravel Head は、アプリケーションのドキュメント <head> 要素を管理するための fluent API を提供します。タイトルや meta タグ、Open Graph メタデータ、canonical URL、robots ディレクティブ、パフォーマンスヒント、構造化データなどを扱えます。Blade、Livewire、Inertia で利用できます。

Installation

Composer パッケージマネージャを使って Laravel Head をインストールできます。

composer require laravel/head

Quickstart

サービス全体のデフォルトをサービスプロバイダに登録します。

use Laravel\Head\Facades\Head;
use Laravel\Head\HeadBuilder;

Head::defaults(fn (HeadBuilder $head) => $head
    ->title('Laravel', suffix: ' - Laravel')
    ->description('Build something great.'));

ページごとのメタデータを実行時に設定します：

Head::title($post->title)
    ->description($post->description);

レイアウトで解決済みのタグをレンダリングします。

<head>
    @head
</head>

Resolution Precedence

ページメタデータは、優先度の低いものから高いものへ、次の5つのレイヤーで解決されます。

ページのデフォルト設定
ルートグループのメタデータ
ルートのメタデータ
ランタイムのメタデータ
エラーのメタデータ

上位レイヤーは、フィールド単位で下位レイヤーを置き換えます。たとえば、実行時のタイトルを設定するとルートのタイトルは置き換わりますが、ルートの説明は置き換わりません。以降のセクションでは、各レイヤーでメタデータを設定する方法を説明します。解決されたメタデータを Blade、Livewire、Inertia でレンダリングする方法については、Renderingを参照してください。

Defining Metadata

Laravel Head では、サイト全体のデフォルト値、ルートのメタデータ、実行時の呼び出し、エラーページの定義を使ってメタデータを定義できます。

Defaults

サービスプロバイダでページのデフォルト値を登録します。

use Laravel\Head\Enums\OgType;
use Laravel\Head\Facades\Head;
use Laravel\Head\HeadBuilder;

Head::defaults(function (HeadBuilder $head) {
    $head
        ->title('Laravel', suffix: ' - Laravel')
        ->description('Build something great.')
        ->canonical()
        ->og(siteName: 'Laravel', type: OgType::Website)
        ->searchableByRobots()
        ->preconnect('https://fonts.example.com');
});

デフォルトは、ページメタデータの中で最も優先度の低い層です。ルート、ランタイム、エラーメタデータのいずれによってもタイトルが設定されていない場合、Laravel はそのまま表示されます。上位の層でページタイトルを設定すると、継承されたサフィックスが適用されるため、Head::title('About') は About - Laravel として表示されます。継承されたプレフィックスまたはサフィックスを無視するタイトルには、exact: true を渡してください。

Head::canonical() を呼び出すと、現在のリクエスト URL を使って canonical URL を生成します。明示的な URL を設定するには、Head::canonical('/about') のように文字列を渡します。canonical URL はデフォルトで https に正規化されます。リクエストのスキームを維持するには、forceHttps: false を渡してください。

Robots ディレクティブは、文字列として直接渡すことも、RobotsRule の enum ケースとして渡すことも、両方を組み合わせたリストとして渡すこともできます。リストはカンマ区切りのディレクティブとして出力されるため、Head::robots([RobotsRule::NoIndex, RobotsRule::NoFollow]) は noindex, nofollow として出力されます。

便宜上、searchableByRobots メソッドは all を出力し、hiddenFromRobots メソッドは none を出力します。

Route Metadata

ルート上でメタデータを直接定義できます。これは、メタデータがあらかじめわかっている準静的なページで特に便利です。

Routes and Groups

Route::view('/contact', 'contact')
    ->name('contact')
    ->withHead(
        title: 'Contact Us',
        description: 'Get in touch.',
    );

共有するルートメタデータは、チェーン内の任意の位置でグループに適用できます。

Route::withHead(robots: 'noindex, nofollow')
    ->prefix('admin')
    ->name('admin.')
    ->group(function () {
        Route::get('/dashboard', DashboardController::class)
            ->name('dashboard')
            ->withHead(title: 'Dashboard');
    });

リソースルートとシングルトンルートのメタデータも定義できます。

Route::resource('posts', PostController::class)->withHead(
    robots: 'index, follow',
);

Route::singleton('profile', ProfileController::class)->withHead(
    title: 'Your Profile',
);

withHead メソッドは、Laravel のネイティブなルートメタデータ API を通じて単純な配列を保存します。これは、属性を head キーの下にネストして metadata メソッドを呼び出すのと同じであるため、メタデータはキャッシュ済みルートとの互換性を維持します。

名前付き引数は、エディタや静的解析で名前のスペルミスを検出できるよう、Laravel Head に組み込まれたルートプロパティに意図的に限定されています。カスタムタグビルダが登録したルート属性は、extensions を通じて渡せます。

Route::get('/article', ArticleController::class)->withHead(
    title: 'Article',
    extensions: ['readingTime' => 4],
);

Supported Properties

サポートされているルートプロパティは、フルーエントビルダーメソッドと同じ名前にマッピングされます。

カテゴリ	プロパティ
ドキュメント	`title`, `description`, `canonical`, `robots`
アプリケーションメタデータ	`themeColor`, `applicationName`, `colorScheme`, `referrer`, `viewport`, `appleWebAppTitle`, `webAppCapable`, `appleWebAppStatusBarStyle`
ソーシャル	`og`, `ogImage`, `ogVideo`, `ogAudio`, `twitter`, `twitterImage`
パフォーマンス	`preload`, `prefetch`, `preconnect`, `dnsPrefetch`
検出	`alternates`, `feed`, `icon`, `favicon`, `appleTouchIcon`, `appleTouchStartupImage`, `maskIcon`, `manifest`
構造化データ	`schema`
カスタムタグ	`meta`, `link`

ネストしたオプション名には、forceHttps、siteName、secureUrl のように、fluent API と同じ camelCase 命名規則を使用します。

ogImage、preload、feed、schema、icon、appleTouchStartupImage などの複数指定可能なプロパティには、単一の値またはリストを指定できます。

Runtime Metadata

リクエストが届くまで値がわからない場合、たとえば閲覧中の投稿のタイトルなどは、実行時に設定できます。

use Laravel\Head\Facades\Head;

public function __invoke(Post $post): Response
{
    Head::title($post->title);

    // ...
}

Head ファサードを介して実行するランタイム呼び出しは、リクエストに依存するデータのルートメタデータを上書きします。こうした呼び出しを行う場所として最も一般的なのは、コントローラとアクションです。

use App\Models\Post;
use Laravel\Head\Facades\Head;

public function show(Post $post)
{
    Head::title($post->title)
        ->description($post->description);

    return view('posts.show', ['post' => $post]);
}

複数のランタイム呼び出しは、実行された順序でマージされます。title、description、canonical URL、robots ディレクティブなどの単一値フィールドでは、後から実行された呼び出しが優先されます。繰り返し可能なフィールドでは複数のエントリが保持されますが、同じキーを再度追加すると、それ以前のエントリが更新されます。ogImage メソッドでは、URL がキーになります。

Head::ogImage('/images/cover.jpg', alt: 'Draft cover')
    ->ogImage('/images/gallery.jpg', alt: 'Gallery image')
    ->ogImage('/images/cover.jpg', alt: 'Final cover', width: 1200, height: 630);

<meta property="og:image" content="/images/cover.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Final cover">
<meta property="og:image" content="/images/gallery.jpg">
<meta property="og:image:alt" content="Gallery image">

デフォルトから継承した Open Graph のメディアはフォールバックとして機能します。ルート、ランタイム、またはエラーのメタデータで同じタイプのメディアが独自に定義されている場合、デフォルトのメディアはマージされずに置き換えられるため、ページの og:image がサイト全体のデフォルト画像より優先されます。

条件付きメタデータは、when メソッドと unless メソッドを使って定義できます。

Head::title($post->title)
    ->when($post->isDraft(), fn ($head) => $head->hiddenFromRobots());

Error Pages

通常、アプリケーションの AppServiceProvider クラスの boot メソッド内でエラーメタデータを登録します。

use Laravel\Head\ErrorPages;
use Laravel\Head\Facades\Head;

/**
 * Bootstrap any application services.
 */
public function boot(): void
{
    Head::errors(function (ErrorPages $errors) {
        $errors->defaults(robots: 'noindex, follow');

        $errors->status(
            404,
            title: 'Page Not Found',
            description: 'The page you are looking for could not be found.',
        );
    });
}

defaults メソッドと status メソッドも、Head::defaults() で使用するものと同じ fluent builder のコールバックを受け取れます。

use Laravel\Head\ErrorPages;
use Laravel\Head\Facades\Head;
use Laravel\Head\HeadBuilder;

Head::errors(function (ErrorPages $errors) {
    $errors->status(404, fn (HeadBuilder $head) => $head
        ->title('Page Not Found')
        ->description('The page you are looking for could not be found.'));
});

登録済みのエラーステータスに対してレスポンスをレンダリングする場合、そのメタデータが他のすべてのレイヤーより優先されます。

Laravel は、エラービューをレンダリングするときや、Inertia の handleExceptionsUsing() メソッドのようなレスポンスフェーズのフックを実行するときに、レスポンスのステータスを自動的に検出します。$exceptions->render() コールバック内でエラーレスポンスをレンダリングする場合は、レンダリング前に Head::status(404) を呼び出して、エラーのメタデータが適用されるようにしてください。

Open Graph

og メソッドを使用して、Open Graph プロパティを設定できます。繰り返し指定できるメディアは、名前付き引数を直接受け取るトップレベルメソッドを使用して追加できます。

use Laravel\Head\Enums\ImageType;
use Laravel\Head\Enums\OgType;

Head::og(type: OgType::Article, title: $post->title)
    ->ogImage($post->hero_image_url)
    ->ogImage(
        $post->gallery_image_url,
        alt: $post->gallery_image_alt,
        width: 1200,
        height: 630,
        type: ImageType::Jpeg,
    );

ogImage、ogVideo、ogAudio メソッドは、最初の引数として URL を受け取ります。また、Open Graph 仕様でサポートされている場合は、alt、width、height、type、secureUrl などの名前付き引数も任意で指定できます。

API が画像の type を受け付ける箇所では、ImageType::Svg、ImageType::Png、ImageType::Jpeg、ImageType::Webp などの ImageType enum ケースとして画像の MIME タイプを渡せます。

ドキュメントの title と description は、不足している og:title と og:description の値を自動的に補完します。

他の属性を指定せず、Open Graph 画像を1つだけ設定する場合は、og メソッドに名前付き引数 image を渡します。

Head::og(
    type: OgType::Website,
    title: $page->title,
    description: $page->description,
    image: $page->og_image_url,
);

og(image: ...) と ogImage(...) の呼び出しは同じ内部の画像リストに書き込むため、呼び出し箇所でより表現力の高い方を使用できます。商品や記事のプロパティなど、カスタムの Open Graph 拡張には meta メソッドを使用できます。

X / Twitter Cards

Open Graph で使用するタイトル、説明、画像と同じ内容で X / Twitter カードを表示するには、デフォルト設定に twitter() を登録します。

use Laravel\Head\Enums\TwitterCard;
use Laravel\Head\Facades\Head;
use Laravel\Head\HeadBuilder;

Head::defaults(fn (HeadBuilder $head) => $head->twitter(
    card: TwitterCard::SummaryWithLargeImage,
));

次に、ページレベルのメタデータを設定します。

Head::title('Introducing Laravel Head')
    ->description('A fluent API for Laravel document head metadata.')
    ->ogImage('https://example.com/social.jpg', alt: 'Introducing Laravel Head');

これは一致する Twitter タグをレンダリングします。

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Introducing Laravel Head">
<meta name="twitter:description" content="A fluent API for Laravel document head metadata.">
<meta name="twitter:image" content="https://example.com/social.jpg">
<meta name="twitter:image:alt" content="Introducing Laravel Head">

Twitter の値を明示的に指定して、個別のページをカスタマイズできます。

Head::twitter(title: $post->social_title)
    ->twitterImage($post->social_image_url, alt: $post->title);

ルートメタデータは twitter と twitterImage を受け付けます。

Theme Colors

テーマカラーは、グローバル、ルートごと、または実行時に設定できます。

Head::themeColor('#0f172a');

これにより、<meta name="theme-color"> タグがレンダリングされます。メディアに応じたテーマカラーには、Media enum を使用できます。

use Laravel\Head\Enums\Media;

Head::themeColor('#ffffff', media: Media::Light)
    ->themeColor('#111827', media: Media::Dark);

Media enumには Portrait と Landscape も含まれます。media 引数にはカスタムメディアクエリ文字列も渡せます。

ルートメタデータでは、同じ camelCase キーを使って単一のテーマカラーを指定できます。

Route::view('/dashboard', 'dashboard')->withHead(
    themeColor: '#0f172a',
);

Application Metadata and Icons

Laravel Headには、一般的なブラウザおよびアプリケーションのメタデータを扱うメソッドが用意されています。

use Laravel\Head\Enums\ImageType;
use Laravel\Head\Enums\Media;

Head::applicationName('Laravel')
    ->colorScheme('light dark')
    ->referrer('strict-origin-when-cross-origin')
    ->viewport('width=device-width, initial-scale=1')
    ->appleWebAppTitle('Laravel')
    ->webAppCapable()
    ->appleWebAppStatusBarStyle('black')
    ->favicon('/favicon.svg', type: ImageType::Svg)
    ->icon('/favicon-32x32.png', type: ImageType::Png, sizes: '32x32')
    ->appleTouchIcon('/apple-touch-icon.png', sizes: '180x180')
    ->appleTouchStartupImage('/launch.png', media: Media::Portrait)
    ->maskIcon('/safari-pinned-tab.svg', color: '#111827')
    ->manifest('/site.webmanifest');

favicon メソッドは icon メソッドのエイリアスであり、同じ type、sizes、media 引数を受け取ります。

ルートのメタデータでも同じ名前を使用します：

use Laravel\Head\Enums\ImageType;
use Laravel\Head\Enums\Media;

Route::view('/dashboard', 'dashboard')->withHead(
    applicationName: 'Laravel',
    colorScheme: 'light dark',
    appleWebAppTitle: 'Laravel',
    webAppCapable: true,
    appleWebAppStatusBarStyle: 'black',
    favicon: [
        ['href' => '/favicon.svg', 'type' => ImageType::Svg],
        ['href' => '/favicon-32x32.png', 'type' => ImageType::Png, 'sizes' => '32x32'],
    ],
    appleTouchIcon: ['href' => '/apple-touch-icon.png', 'sizes' => '180x180'],
    appleTouchStartupImage: ['href' => '/launch.png', 'media' => Media::Portrait],
    manifest: '/site.webmanifest',
);

Progressive Web Apps

pwa メソッドは、インストール可能な Web アプリに必要なドキュメントの共通の <head> タグを設定します。

Head::pwa(
    name: 'Laravel',
    manifest: '/site.webmanifest',
    themeColor: '#0f172a',
    appleTouchIcon: '/apple-touch-icon.png',
    appleWebAppStatusBarStyle: 'black',
);

これにより、アプリケーション名、Webアプリケーションマニフェストへのリンク、iOSのスタンドアロンメタデータが出力されます。指定されている場合は、テーマカラー、Appleのステータスバーのスタイル、Apple Touch Iconも出力されます。Webアプリケーションマニフェストの作成とサービスワーカーの登録は、アプリケーション側で行う必要があります。

defaults またはランタイムメタデータで pwa メソッドを使用できます。ルートメタデータでは、上記に示した個別のプロパティがサポートされます。

Performance and Discovery

Laravel Head は、パフォーマンスヒント、ページネーションリンク、ロケールの alternate リンク、フィード検出を生成します。

Head::preload(asset('fonts/inter.woff2'), as: 'font', crossorigin: true)
    ->prefetch(asset('images/next.webp'))
    ->preconnect('https://cdn.example.com')
    ->dnsPrefetch('https://analytics.example.com')
    ->paginate($posts)
    ->alternates([
        'en' => 'https://example.com/en/about',
        'fr' => 'https://example.com/fr/about',
        'x-default' => 'https://example.com/about',
    ])
    ->feed('/feed', title: 'Laravel RSS')
    ->feed('/feed.atom', type: 'atom', title: 'Laravel Atom');

ローカルアセットの場合、preloadAsset() と prefetchAsset() は asset() ヘルパを通じて URL を解決し、ファイル拡張子から as 属性を判定します。フォントのプリロードには crossorigin が自動的に含まれます。これは、同一オリジンのフォントであってもプリロード仕様で必要とされるためです。

Head::preloadAsset('fonts/inter.woff2')
    ->prefetchAsset('images/next.webp');

<link rel="preload" href="https://example.com/fonts/inter.woff2" as="font" crossorigin>
<link rel="prefetch" href="https://example.com/images/next.webp" as="image">

as を明示的に渡して検出を上書きできます。ブラウザはこの属性のない preload を無視するため、拡張子から as 属性を検出できない場合、preloadAsset メソッドは例外をスローします。prefetchAsset メソッドでは、この属性を単に省略します。

Custom Tags

専用のメソッドがないタグには、meta() と link() を使用します。

Head::meta('format-detection', 'telephone=no')
    ->meta('article:author', $post->author->name)
    ->link('search', '/opensearch.xml', [
        'type' => 'application/opensearchdescription+xml',
        'title' => 'Laravel Search',
    ])
    ->link('me', 'https://social.example.com/@laravel');

ブラウザが一致する条件下でのみタグを適用するようにする場合は、meta タグにメディアクエリを指定できます。

use Laravel\Head\Enums\Media;

Head::meta('theme-color', '#ffffff', media: Media::Light)
    ->meta('theme-color', '#111827', media: Media::Dark);

meta メソッドは、通常の meta タグに name 属性を使用します。Open Graph（og:）や記事メタデータ（article:）のように、通常 property 属性を使用するキーの場合、メソッドが自動的に切り替えます。

Head::meta('description', 'About Laravel')
    ->meta('og:title', 'About Laravel');

<meta name="description" content="About Laravel">
<meta property="og:title" content="About Laravel">

property: true または property: false を渡して、どちらの属性を選択するか明示的に指定できます。

Schemas

組み込みのスキーマビルダは、一般的な JSON-LD の型に対応しています。

use Laravel\Head\Enums\OfferAvailability;
use Laravel\Head\Facades\Schema;

Head::schema(
    Schema::product()
        ->name($product->name)
        ->offers(
            Schema::offer()
                ->price($product->price)
                ->currency('USD')
                ->availability(OfferAvailability::InStock)
        )
);

組み込みのファクトリメソッドは、article、blogPosting、product、offer、brand、breadcrumbs、faq、organization、person、webPage、webSite です。未知のファクトリメソッドを使うと汎用のスキーマオブジェクトが作成されるため、カスタムの schema.org タイプも表現できます。

JSON-LD スキーマデータが無効な場合、Laravel Head は非本番環境では例外をスローし、本番環境では警告をログに記録します。

Breadcrumbs

パンくず項目は1つずつ追加することも、一括で追加することもできます。位置は、項目を追加した順に自動的に割り当てられます。

Head::schema(
    Schema::breadcrumbs()->items([
        'Home' => route('home'),
        'Shop' => route('shop.index'),
        'Shoes' => route('shop.category', 'shoes'),
    ])
);

item メソッドを使用して、単一のパンくず項目を追加できます。

Schema::breadcrumbs()
    ->item('Home', route('home'))
    ->item('Shop', route('shop.index'));

FAQs

FAQの項目も同じパターンに従います。question メソッドを使って1つずつ追加することも、questions メソッドを使ってまとめて追加することもできます。

Head::schema(
    Schema::faq()->questions([
        'What is Laravel Head?' => 'A fluent API for managing the document head.',
        'Is it free?' => 'Yes, it is open source.',
    ])
);

Custom Schemas

カスタムスキーマ型を明示的に登録できます。

use DateTimeInterface;
use Laravel\Head\Facades\Schema;
use Laravel\Head\Schema\SchemaObject;
use Laravel\Head\SchemaType;

#[SchemaType('JobPosting')]
class JobPosting extends SchemaObject
{
    public function title(string $title): static
    {
        return $this->set('title', $title);
    }

    public function datePosted(DateTimeInterface|string $date): static
    {
        return $this->date('datePosted', $date);
    }
}

Schema::register(JobPosting::class);

Head::schema(
    Schema::jobPosting()
        ->title('Senior Laravel Developer')
        ->datePosted(now())
);

Rendering

Laravel Headは、現在のレスポンスのページメタデータをタグに変換します。これらのタグがどのようにレンダリングされるかは、アプリケーションのスタックによって異なります。

HTMLレンダラは、@head ディレクティブと、Laravel Head が head prop を介して Inertia と共有するレンダリング済み要素を処理します。配列レンダラは、解決済みメタデータを構造化データとして必要とするアプリケーション向けに Head::toArray() を処理します。

Blade

レイアウトの <head> に蓄積されたタグを @head ディレクティブで出力します。

<head>
    <meta charset="utf-8">
    @head
</head>

@head ディレクティブは同期的にレンダリングされるため、レイアウトがレンダリングされる前にページのメタデータを定義してください。

Livewire

Livewire アプリケーションでは、ドキュメントレイアウトで同じ @head ディレクティブを使用します。

<head>
    @head
</head>

<body>
    {{ $slot }}

    @livewireScripts
</body>

Livewire 固有の設定は必要ありません。Laravel Head のメタデータはリクエストごとに解決され、リゾルバはリクエストスコープで動作します。そのため、wire:navigate による訪問では毎回新しいドキュメントが取得され、その @head の出力には移動先ルートのメタデータが反映されます。wire:navigate で訪問したページでは、コンポーネントレベルで head コードを記述しなくても、適切なルート、ランタイム、エラーのメタデータが適用されます。

Inertia

Inertia 独自のコンポーネントとともに、Inertia のルートテンプレートでも同じ @head ディレクティブを使用します。

<html>
<head>
    <meta charset="utf-8">
    @head

    @viteReactRefresh
    @vite(['resources/css/app.css', 'resources/js/app.tsx'])
    <x-inertia::head />
</head>
<body>
    <x-inertia::app />
</body>
</html>

Inertia をインストールすると、Laravel Head はページで管理される head を、レンダリング済みの要素文字列の配列として、すべてのページオブジェクトの head prop に自動的に共有します。

{
    "props": {
        "head": [
            "<title data-inertia=\"title\">Dashboard - Laravel</title>",
            "<meta data-inertia=\"description\" name=\"description\" content=\"Your application overview.\">"
        ]
    }
}

アプリケーションで createInertiaApp() を呼び出しているすべての箇所で、Inertia の serverHead オプションを有効にします。このオプションは Inertia 3.5 以降で利用できます。

createInertiaApp({
    // ...
    serverHead: true,
});

ページで管理される各要素には、安定した data-inertia キーがあります。@head ディレクティブが初期ドキュメントをレンダリングした後、Inertia はそれらの要素を引き継ぎ、通常の訪問、instant visits、戻る操作や進む操作によるナビゲーション中も同期を維持します。これらの要素は初期の HTML レスポンスに含まれるため、クローラやリンクプレビュー用のボットは JavaScript を実行しなくても読み取れます。クライアント側の <Head> コンポーネントは必要ありません。

これは server-side rendering (SSR) の有無にかかわらず動作します。アプリケーションに個別の SSR エントリポイントがある場合は、そこでも serverHead を有効にしてください。Laravel Head は、@head と <x-inertia::head /> の間でページが管理する要素を順序に関係なく自動的に重複排除します。同時に、JavaScript の SSR が生成するその他の head 要素は保持します。

既存の Inertia アプリケーションに Laravel Head を追加する場合は、Laravel Head が最終的なドキュメントタイトルを管理できるように、resources/js/app.tsx と resources/js/ssr.tsx から title コールバックを削除してください。また、Inertia の <Head> component が管理しているタグを Laravel Head に移し、両者が同じ要素を定義しないようにしてください。

部分リロードのレスポンスでは head prop が省略されるため、Inertia は直前の完全なページの head を保持します。Instant visits でも、バックグラウンドのレスポンスが到着するまで現在の head が保持されます。アプリケーションですでに head prop を使用している場合は、サービスプロバイダでその名前を変更してください。

use Laravel\Head\Facades\Head;

public function boot(): void
{
    Head::inertia(prop: '_head');
}

次に、serverHead: '_head' を使って、Inertia が同じ prop を参照するようにします。

Static Inertia Tags

ほとんどのタグは、Laravel Head が各ページに適した値を解決できるよう、defaults、ルートメタデータ、または実行時メタデータに定義します。Inertia globals は、最初の HTML レスポンスでレンダリングされ、セッションの残りの期間は Inertia によって変更されないドキュメントタグにのみ使用してください。

サービスプロバイダで Head::inertiaGlobals() を使って登録します。

use Laravel\Head\Facades\Head;
use Laravel\Head\HeadBuilder;

Head::inertiaGlobals(function (HeadBuilder $head) {
    $head
        ->viewport('width=device-width, initial-scale=1')
        ->colorScheme('light dark')
        ->icon('/favicon.svg', type: 'image/svg+xml')
        ->appleTouchIcon('/apple-touch-icon.png', sizes: '180x180')
        ->manifest('/site.webmanifest');
});

Inertia のグローバルは head プロパティから除外され、data-inertia 所有権属性なしでレンダリングされ、最初のレスポンス後に更新されることもありません。これらのグローバルは、viewport、カラースキーム、ファビコン、タッチアイコン、マニフェストなど、安定したブラウザヒントに適しています。タグがページ固有のもの、SEO に関係するもの、または後から上書きされる可能性があるものなら、代わりに defaults、ルートメタデータ、またはランタイムメタデータに配置してください。

レンダリング済みのタグではなく、解決済みのメタデータを構造化データとして必要とするアプリケーションでは、Head::toArray() を呼び出せます。返されるデータには、タイトル、Open Graph の値、JSON-LD スキーマ、その他の解決済みメタデータが含まれます。

Introduction​

Installation​

Quickstart​

Resolution Precedence​

Defining Metadata​

Defaults​

Route Metadata​

Routes and Groups​

Supported Properties​

Runtime Metadata​

Error Pages​

Open Graph​

X / Twitter Cards​

Theme Colors​

Application Metadata and Icons​

Progressive Web Apps​

Performance and Discovery​

Custom Tags​

Schemas​

Breadcrumbs​

FAQs​

Custom Schemas​

Rendering​

Blade​

Livewire​

Inertia​

Static Inertia Tags​

Introduction

Installation

Quickstart

Resolution Precedence

Defining Metadata

Defaults

Route Metadata

Routes and Groups

Supported Properties

Runtime Metadata

Error Pages

Open Graph

X / Twitter Cards

Theme Colors

Application Metadata and Icons

Progressive Web Apps

Performance and Discovery

Custom Tags

Schemas

Breadcrumbs

FAQs

Custom Schemas

Rendering

Blade

Livewire

Inertia

Static Inertia Tags