Laravel + Inertia.js + Vue 3 におけるSEO最適化実践ガイド
Docker + Nginx環境でのLaravel + Inertia.js + Vue 3プロジェクトにおける、技術的SEOとパフォーマンス最適化の実践的なガイドです。
1. アーキテクチャ概要
一般的な技術スタック：
- Backend: Laravel
- Frontend: Inertia.js経由のVue 3（SPAライク）
- Web Server: Nginx
- 環境: Docker / Docker Compose
この構成におけるSEOの主な課題：
- クライアントサイドレンダリング（CSR）
- GoogleボットはJSをクロール可能だが、遅いかつ不安定
- 動的メタデータの不足
- Docker/Nginxの設定が未最適化だとTTFBが高い
目標：クロール可能・正しくインデックス・高速読み込み・メタデータ完備を実現する。
2. Inertia.jsにおけるSEOの理解
Inertia.jsは純粋なSPAではなく：
- サーバーは元のHTMLを返す
- Vueはクライアント側でレンダリング
ただし：
- 主要コンテンツはJS実行後に表示される
- 追加設定なしではSEOは許容範囲だが、最適化されていない
3. 動的メタデータの設定（重要）
3.1 InertiaのHead APIを使用
import { Head } from '@inertiajs/vue3';
<template>
<Head>
<title>{{ title }}</title>
<meta name="description" :content="description" />
<meta property="og:title" :content="title" />
<meta property="og:description" :content="description" />
</Head>
</template>
3.2 Laravel Controllerからデータを渡す
return Inertia::render('Post/Show', [
'title' => $post->title,
'description' => Str::limit($post->content, 160),
]);
4. 初期HTMLの完全レンダリング（Preload data）
SSR（Server Side Rendering）の有効化
SEOを大幅に改善する重要なステップです。
SSRのセットアップ
npm install @inertiajs/server
php artisan inertia:start-ssr
Laravelは：
- サーバー側でHTMLをレンダリング
- Googleボットが即座にコンテンツを認識可能
効果
| 項目 | SSRなし | SSRあり |
|---|---|---|
| インデックス速度 | 遅い | 速い |
| コンテンツ | JS依存 | 事前生成 |
| SEOスコア | 中程度 | 高い |
5. SEO・パフォーマンス向けNginx設定
5.1 gzip / brotliの有効化
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
5.2 静的ファイルのキャッシュ
location ~* \.(js|css|png|jpg|jpeg|gif|svg|webp)$ {
expires 30d;
access_log off;
}
5.3 SEO向けHTTPヘッダー
add_header X-Content-Type-Options nosniff;
add_header X-Frame-Options SAMEORIGIN;
add_header X-XSS-Protection "1; mode=block";
6. SEO向けDocker最適化（TTFB低減）
6.1 本番用PHP-FPMの使用
FROM php:8.2-fpm-alpine
6.2 OPcache設定
opcache.enable=1
opcache.memory_consumption=256
opcache.max_accelerated_files=20000
6.3 Docker Compose内部ネットワーク
不要なexposeを避け、レイテンシを削減。
7. LaravelでのSitemap・robots.txt自動生成
7.1 パッケージインストール
composer require spatie/laravel-sitemap
7.2 Sitemap生成
SitemapGenerator::create(config('app.url'))
->writeToFile(public_path('sitemap.xml'));
7.3 robots.txt
User-agent: *
Allow: /
Sitemap: https://domain.com/sitemap.xml
8. Schema.org（Rich Snippets）
Inertia Head内にJSON-LDを追加：
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "{{ title }}"
}
</script>
9. SEO検証
推奨ツール
- Google Search Console
- PageSpeed Insights
- Lighthouse
- Screaming Frog
監視すべきKPI
- LCP < 2.5s
- CLS < 0.1
- TTFB < 500ms
- インデックスカバレッジ
10. チェックリスト
- ✅ Inertia Headメタデータ
- ✅ SSR有効化
- ✅ Gzip + 静的ファイルキャッシュ
- ✅ sitemap.xml
- ✅ robots.txt
- ✅ JSON-LD
- ✅ Docker最適化
- ✅ OPcache
11. まとめ
Laravel + Inertia.js + Vue 3は、以下を満たせばSEOに優れます：
- SSRの実装
- メタデータの適切な設定
- サーバーの高速化
- Nginx・Dockerの適切な設定
SEOはコンテンツだけでなく、システムアーキテクチャの問題でもあります。
さらなる最適化の検討事項
- Redisキャッシュ
- ボット向けフルページキャッシュ
- エッジキャッシング（Cloudflare）
- ボット向けPrerender.io