LaravelでWebサイトを開発していると、ページごとに「タイトル」や「OGP（Open Graph Protocol）」を個別に設定したくなる場面はよくあります。
この記事では、Bladeテンプレートを活用して簡単にページごとにタイトルやOGPを切り替える方法を紹介します。
共通レイアウトにタイトルやOGPの出力場所を用意する
まずは、共通で使うレイアウトファイル（例：resources/views/layouts/app.blade.php）に、タイトルやOGP情報を出力するためのコードを追加します。
<head>
<title>@yield('title', 'デフォルトのサイトタイトル')</title>
<meta property="og:title" content="@yield('og_title', 'デフォルトのOGPタイトル')">
<meta property="og:description" content="@yield('og_description', 'デフォルトのOGP説明文')">
<meta property="og:image" content="@yield('og_image', asset('default-og-image.png'))">
<!-- 必要に応じて他のmetaタグも追加 -->
</head>ここでは、@yieldを使って、各ページごとに値を上書きできるようにしています。
もしページ側で指定がなければ、デフォルト値が使われるため安心です。
ページごとにタイトルやOGPを指定する
個別のページ（例：resources/views/page.blade.php）では、@sectionを使ってタイトルやOGPを設定します。
@extends('layouts.app')
@section('title', 'このページ専用のタイトル')
@section('og_title', 'このページのOGPタイトル')
@section('og_description', 'このページのOGP説明文')
@section('og_image', asset('images/this-page-og-image.png'))
@section('content')
<h1>ページ内容</h1>
<p>ここに本文が入ります。</p>
@endsectionこのように、各ページで必要な情報だけを自由にカスタマイズできるようになります。
コントローラーから渡す場合
場合によっては、コントローラー側で動的にタイトルやOGPを設定したいケースもあるでしょう。
その場合は、コントローラーからビューにデータを渡す方法が使えます。
public function show()
{
return view('page', [
'title' => 'コントローラーから渡すタイトル',
'og_title' => 'コントローラーから渡すOGPタイトル',
'og_description' => 'コントローラーから渡すOGP説明',
'og_image' => asset('images/controller-og-image.png'),
]);
}Bladeファイルでは受け取ったデータを使って指定します。
@extends('layouts.app')
@section('title', $title ?? 'デフォルトタイトル')
@section('og_title', $og_title ?? 'デフォルトOGPタイトル')
@section('og_description', $og_description ?? 'デフォルトOGP説明文')
@section('og_image', $og_image ?? asset('default-og-image.png'))
@section('content')
<h1>ページ内容</h1>
@endsection??演算子を使って、データが渡っていない場合でもデフォルト値を使うようにしておくと、エラーを防ぐことができます。
まとめ
| 方法 | 特徴 |
|---|---|
| Bladeファイルで@sectionする | シンプルで直感的。静的なページに向いている |
| コントローラーから渡す | 動的なデータに応じて柔軟に設定できる |
Laravelでは、Bladeテンプレートの@sectionや@yieldを活用することで、ページごとに柔軟にタイトルやOGPを設定できます。
サイト規模が大きくなっても、この仕組みを使えばスマートに管理できるでしょう。
