【2025年版】Next.js SEO完全ガイド - 検索上位を狙う実践テクニック
Next.js App Routerを使ったSEO対策を徹底解説。メタデータ設定、構造化データ、Core Web Vitals最適化、内部リンク戦略まで、実際のコード例とともに紹介します。
【2025年版】Next.js SEO完全ガイド - 検索上位を狙う実践テクニック
「Next.jsでサイトを作ったけど、全然検索に出てこない…」
そんな悩みを抱えていませんか？Next.jsは優れたフレームワークですが、SEO対策は自動ではやってくれません。適切な設定をしないと、せっかくのコンテンツがGoogleに正しく評価されない可能性があります。
この記事では、Next.js App Router（v13以降）を使ったSEO対策を、実際のコード例とともに徹底解説します。
この記事で学べること
- Next.jsのメタデータ設定（Metadata API）
- 構造化データ（JSON-LD）の実装方法
- サイトマップとrobots.txtの設定
- Core Web Vitals最適化テクニック
- 内部リンク戦略
- OGP画像の自動生成
1. メタデータの設定（Metadata API）
Next.js 13以降では、Metadata APIを使って簡単にメタデータを設定できます。
静的メタデータ
ページごとに固定のメタデータを設定する場合：
動的メタデータ
ブログ記事など、動的にメタデータを生成する場合：
タイトルテンプレート
ルートレイアウトでタイトルテンプレートを設定すると、各ページで共通のサフィックスが自動付与されます：
これで各ページではtitle: 'Products'と書くだけで、Products | ADA Labと表示されます。
2. 構造化データ（JSON-LD）の実装
構造化データを追加すると、Googleのリッチスニペットに表示される可能性が高まります。
組織情報スキーマ
FAQ構造化データ
FAQページには専用のスキーマを追加することで、検索結果に質問と回答が表示されます：
記事スキーマ（Article）
ブログ記事にはArticleスキーマを追加：
3. サイトマップとrobots.txt
動的サイトマップの生成
Next.js App Routerでは、sitemap.tsで動的にサイトマップを生成できます：
robots.txt
4. Core Web Vitals最適化
GoogleはCore Web Vitalsをランキング要因としています。Next.jsで最適化するポイント：
画像最適化
next.config.jsでの画像設定
フォント最適化
コンポーネントの遅延読み込み
5. 内部リンク戦略
内部リンクはSEOに非常に重要。以下のポイントを押さえましょう：
フッターでの網羅的リンク
パンくずリスト
関連記事の表示
ブログ記事の下に関連記事を表示することで、サイト内回遊を促進：
6. OGP画像の自動生成
SNSでシェアされたときに表示されるOGP画像を自動生成：
7. チェックリスト
実装後は以下を確認：
- 各ページにユニークなtitle/descriptionが設定されている
- canonical URLが正しく設定されている
- 構造化データがGoogle Rich Results Testで検証済み
- サイトマップがSearch Consoleに登録されている
- robots.txtでクロールが正しく許可されている
- Core Web Vitalsが「良好」判定
- 全ページにalt属性付きの画像がある
- 内部リンクが適切に配置されている
まとめ
Next.jsでのSEO対策は、一度設定すれば自動で効果を発揮します。重要なのは：
- メタデータを正しく設定する（Metadata API活用）
- 構造化データでGoogleに情報を伝える（JSON-LD）
- Core Web Vitalsを最適化する（画像・フォント・遅延読み込み）
- 内部リンクでサイト構造を明確にする
これらを実装すれば、検索エンジンからの評価は確実に上がります。焦らず一つずつ対応していきましょう。
質問や感想があれば、X（@ADA_Lab_tech）までお気軽にどうぞ！