Next.js App Router で SEO を壊しやすい実装ミス
表示できていることと、検索や AI に伝わることは同じではありません。App Router の実装では、意図せず評価しにくいページを作りがちです。
App Router では、便利さの裏で主題の伝わり方やクロール性を崩しやすいです。よくある失敗を先に避けられます。
表示できていることと、検索や AI に伝わることは同じではありません。App Router の実装では、意図せず評価しにくいページを作りがちです。
- App Router は便利ですが、SEO を自動で守ってくれるわけではありません。
- metadata、server rendering、URL 設計、一覧と詳細の役割分離は明示的に管理する必要があります。
- 表示上の問題がなくても、検索や AI 面では弱いページになっていることがあります。
要点
主題
App Router の落とし穴
よくある原因
metadata と描画のズレ
見るべき点
HTML と URL とデータ取得
metadata が実際の内容とずれる
共通テンプレートを流用しすぎると、title、description、canonical が個別ページの主題とずれやすくなります。特に詳細ページでは、一覧と同じ説明が残ると差分が伝わりません。
App Router では `generateMetadata` が強力ですが、実データとの結びつきを雑にすると、むしろズレが固定化されます。
クライアント寄りの構成で本文が薄くなる
重要なページをクライアント中心で組みすぎると、初期 HTML の情報量が不足し、主題の理解が不安定になります。見出しや本文の核は、サーバー側で意味のある形にして返す方が安全です。
特に記事詳細、定義ページ、比較ページは、読み込み後に組み立てる構造より、最初から本文が揃っている方が強いです。
一覧、詳細、補助ページの役割を混ぜる
App Router では、ルート設計の自由度が高い分、一覧と詳細と補助ページの役割を混ぜやすいです。1ページ1主題が崩れると、検索意図にも AI 回答意図にも弱くなります。
ルーティングが整理されていても、情報設計が混ざっていれば評価しづらくなるので、設計段階から記事型を分けておくべきです。
FAQ
App Router でも CSR を使ってはいけませんか？
使ってはいけないわけではありません。重要本文や主題の核を初期 HTML で返せるかどうかがポイントです。
generateMetadata があれば十分ですか？
十分ではありません。本文構造、URL 設計、一覧と詳細の役割分離まで揃って初めて効いてきます。