Zenn
🙆

Laravelセットアップしたら最初にすること

に公開
Laravel
SEO
blade
tech

Laravelのインストール・セットアップは別記事参照で。
ここからが本番です。
まずはビューを整えるところから始めます。

オリジナルのViewを作ろう

Bladeで作ってる場合、app/resources/viewsのlayoutsフォルダに初期でapp.bladep.php/guest.blade.phpが入ってます。guestがログイン前・appがログイン後で使うBladeになってます。
サイトを作るとき、ログインしてないページ・ログイン後と分けるのは、マイページ（ダッシュボード）やログインページくらいじゃないかなと。
なので汎用で使えるViewをまず作ります。

まず、app/View/Components にあるAdminLayout.phpをコピーして、PageLayout.phpにリネームします。コードも書き換えます。

Pagelayout.php
<?php

namespace App\View\Components;

use Illuminate\View\Component;
use Illuminate\View\View;

class PageLayout extends Component　//ここと
{
    /**
     * Get the view / contents that represents the component.
     */
    public function render(): View
    {
        return view('layouts.page');//ここも
    }
}

その後、view('layouts.page')と書いた通り、app/resources/viewsのlayoutsフォルダのapp.blade.phpをコピーしてpage.blade.phpとリネームします。

layoutファイルを独自仕様にする

page.blade.phpファイルの中を環境に合わせて書き換えます。
これは私がいつも使ってる構成です。
headerとfooterはincludeで。
メタ系やタイトルは、ページ毎に変えれるようにyeildなり、configを使っています。

  • meta
    • description
    • keyword
  • title
  • ogp、Twitter Card

@yield()の第2引数はデフォルト値です。

page.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <meta name="description" content="@yield('meta_description', config('app.meta.description'))">
        <meta name="keywords" content="@yield('meta_keywords', config('app.meta.keywords'))">

        <title>@yield('meta_title', config('app.meta.title'))</title>

        <!-- OGP -->
        <meta property="og:title" content="@yield('meta_title', config('app.meta.title'))">
        <meta property="og:type" content="website">
        <meta property="og:url" content="{{ url()->current() }}">
        <meta property="og:image" content="{{ asset('images/logo.webp') }}">
        <meta property="og:description" content="@yield('meta_description', config('app.ogp.description'))">
        <meta property="og:site_name" content="{{ config('app.ogp.site_name') }}">

        <!-- Twitter Card -->
        <meta name="twitter:card" content="summary_large_image">
        <meta name="twitter:site" content="@369work_">
        <meta name="twitter:title" content="@yield('meta_title', config('app.meta.title'))">
        <meta name="twitter:description" content="@yield('meta_description', config('app.ogp.description'))">
        <meta name="twitter:image" content="{{ asset('images/logo.webp') }}">

        <link rel="canonical" href="{{ url()->current() }}">
        <link rel="icon" href="{{ asset('images/logo.webp') }}" type="image/x-icon">

        <!-- Scripts -->
        @vite(['resources/css/app.css', 'resources/js/app.js'])
    </head>
    <body class="font-sans antialiased">
        <div class="min-h-screen flex flex-col">
            <a href="#about" class="skip-link sr-only focus:not-sr-only">
                skip to content
            </a>
            @include('layouts.header')

            <!-- Page Content -->
            <main>
                {{ $slot }}
            </main>

            @include('layouts.footer')
        </div>
    </body>
</html>

使いまわしできるように、app.phpに設定を追加

configのapp.phpの下の方に設定を追加します。
追加項目が多いならば、configにsite.phpという名前でファイルを追加しても良いかもしれません。

app.php
<?php

return [
//　略

  /* header meta tags */
    'meta' => [
        'title' => '',
        'description' => '',
        'keywords' => '',
    ],

    /* header Ogp meta tags */
    'ogp' => [
        'url' => env('APP_URL', 'デフォルト値'),
        'type' => 'website',
        'title' => '',
        'description' => '',
        'site_name' => env('APP_NAME'),
        'image' => '',
    ],
];

それぞれ自身のサイトに合わせて記入します。
これが基本の値になります。

各Bladeに記入する項目

TOPページ、プライバシーページ、商品ページとページが変わるごとにタイトルが切り替わってほしいですよね。何なら説明文も変えたい感じ。
そこで、bladeファイルに設定していきます。
プライバシーページの場合のblade例です。

home.blade.php
<x-page-layout>
    @section('meta_title', 'プライバシーポリシー | ' . config('app.ogp.site_name'))
    @section('meta_description', config('app.meta.title') . 'のプライバシーポリシーです。')

    <section class="privacy container">
        <h1>プライバシーポリシー</h1>
    </section>
</x-page-layout>

少し手間ですけど、全部のBladeファイルに記載していくことで、SEO対策にもなると思います。

Discussion