ページタイトル (title 要素) の設定方法

▶

編集

この記事の要点

Laravel では、レイアウトの <title> に @yield を置き、各ページの Blade で @section を書いてタイトルを差し込む
短いタイトルなら @section('title', 'お問い合わせ') の 1 行で書ける（値はエスケープされる）
「個別タイトル - 共通タイトル」の形にすると、検索結果でページ内容が先に目に入る
トップページなど個別タイトルがないページは @hasSection で区切り文字ごと省く
コンポーネント型レイアウト（<x-layout>）なら属性やスロットでタイトルを渡す

Laravel におけるページタイトル（HTML の title 要素）の設定方法を説明します。タイトルはブラウザのタブや検索結果に表示される重要な情報なので、ページごとに内容を表す文言にするのが基本です。ここでは汎用的な実装として、「ページ個別タイトル - 共通タイトル」という形のタイトルを作ります。

仕組み: @yield と @section

Blade のテンプレート継承では、共通部分を持つレイアウト（親ビュー）に「差し込み口」として @yield('名前') を置き、各ページの子ビューで @section('名前') 〜 @endsection に中身を書きます。タイトルもこの仕組みで、ページごとの文字列をレイアウトの <title> に流し込みます。

基本の実装例

共通のタイトルを設定（レイアウトに記載）

共通タイトルの前後に差し込み口を 2 つ用意しておくと、前にも後ろにも付け足せます。

<title>@yield('title1')共通タイトル@yield('title2')</title>

ページ個別のタイトルを設定（子ビューに記載）

以下の例は共通タイトルの前に個別タイトルを付け足したいので @section('title1') にしています（後ろに付け足す場合は @section('title2')）。@stop は @endsection と同じ意味です。

@extends('layouts.app')

@section('title1')
ページ個別タイトル -
@stop

@section('content')
...
@endsection

この場合、出力されるタイトルは「ページ個別タイトル - 共通タイトル」になります。

より実用的な書き方

実務では、差し込み口を 1 つにして区切り文字をレイアウト側に持たせると、子ビューが簡潔になります。

レイアウト側

<title>@hasSection('title')@yield('title') - @endif{{ config('app.name') }}</title>

@hasSection は、子ビューでそのセクションが定義されているときだけ中身を出力します。個別タイトルがないトップページでは「 - 」が付かず、アプリ名（.env の APP_NAME）だけになります。

子ビュー側

@extends('layouts.app')

{{-- 固定の文字列 --}}
@section('title', 'お問い合わせ')

{{-- 変数を使う場合（記事詳細ページなど） --}}
{{-- @section('title', $post->title) --}}

@section('content')
...
@endsection

第 2 引数に値を渡す 1 行の書き方では、値は HTML エスケープされて出力されます。ユーザーが入力した記事タイトルなどを使っても安全です。

デフォルトのタイトルを決めておきたいだけなら、@yield('title', 'サイト名') のように第 2 引数で既定値を指定することもできます。

コントローラーからタイトルを渡す方法

タイトルをコントローラー側で組み立てたい場合は、ビューに変数として渡し、子ビューの @section で使います。

// app/Http/Controllers/PostController.php
public function show(Post $post)
{
    return view('posts.show', [
        'post'  => $post,
        'title' => $post->title . '（' . $post->category->name . '）',
    ]);
}

{{-- resources/views/posts/show.blade.php --}}
@extends('layouts.app')
@section('title', $title)

レイアウトで直接 {{ $title ?? '' }} と書く方法もありますが、その場合はすべてのコントローラーで変数を渡すか、未定義時の既定値を必ず書く必要があります。ページごとの責任をはっきりさせるため、@section 経由で渡す形に統一しておくと管理しやすくなります。

コンポーネント型レイアウトの場合

Laravel 7 以降の Blade コンポーネントでレイアウトを作っている場合（<x-app-layout> などで囲む書き方）は、@section ではなく属性やスロットで渡します。

{{-- resources/views/components/layout.blade.php（匿名コンポーネント） --}}
@props(['title' => null])
<title>{{ $title ? $title . ' - ' : '' }}{{ config('app.name') }}</title>

{{-- ページ側 --}}
<x-layout title="お問い合わせ">
    ...
</x-layout>

スロットで渡す場合は <x-slot name="title">お問い合わせ</x-slot> と書きます。

タイトルを決めるときのポイント

ページ固有の語を先頭に: 検索結果やタブでは長いタイトルが途中で省略されるため、ページの内容を表す語を前に置き、サイト名は後ろに回します
全ページ同じタイトルにしない: 一覧・詳細・フォームなどで同じタイトルが並ぶと、検索エンジンにもユーザーにも区別がつきません
区切り文字はサイト内で統一: 「 - 」「 | 」などどれでもよいので、全ページで揃えます
meta description も同じ方法で: <meta name="description" content="@yield('description')"> のようにレイアウトに置けば、ページごとに説明文を設定できます

確認方法

ブラウザでページを開き、タブに表示されるタイトルを確認する
ページのソース表示（Ctrl+U など）で <title> の中身を確認する。余計な空白や改行が入っていないかもここで分かる
表示が変わらない場合は php artisan view:clear でコンパイル済みビューを消してから再読み込みする

ページ一覧

その他