Next.js / Vercel サイトで検索流入と AI 可視性を壊さず公開する方法
ここは新しい対策を足す前に、まず土台です。canonical、sitemap、robots、構造化データ、HTML の返し方を順番に見ると詰まりにくくなります。
本文が良くても、公開面の実装が崩れると伸びにくいです。Next.js / Vercel で先に確認したい実装の流れをまとめます。
ここは新しい対策を足す前に、まず土台です。canonical、sitemap、robots、構造化データ、HTML の返し方を順番に見ると詰まりにくくなります。
- AI 面の話が増えても、クロールと正規化が崩れていたら先にそこを直す方が速いです。
- Next.js では App Router、CSR 依存、メタ生成の癖を分けて見る必要があります。
- 実装確認は、本文の品質確認と切り分けた方が原因を見つけやすいです。
要点
主題
公開面を壊さない実装順
成果物
canonical、sitemap、robots、schema
最初の一手
クロール前提の確認
AI Citation Block
定義・違い・手順・失敗条件
Next.jsの検索可視性実装は、canonical、metadata、sitemap、robots、HTML、schemaを同じURL基準で揃える公開前後の確認フローです。
| 項目 | 役割 | 使いどころ |
|---|---|---|
| metadata | title、description、canonical、OGをページ主題と正規URLに合わせる | 一覧、詳細、比較ページの役割が分かれる時 |
| sitemap / robots | クロールさせたいURLと見せ方の方針を検索エンジンへ伝える | 静的生成ページや大量詳細ページを持つ時 |
| HTML / schema | 本文、FAQ、比較、手順を取得しやすくし、ページ種別を補助する | AI回答や検索機能に構造を伝えたい時 |
実施手順
- 本番ドメイン、末尾スラッシュ、canonicalの正規形を決める
- 全ページのmetadata、OG URL、sitemap URLを同じ基準へ揃える
- robots、noindex、sitemapの役割が矛盾していないか確認する
- SSR/SSGで主要本文、FAQ、比較情報がHTMLに出るか確認する
- build後に警告、sitemap、robots、主要ページのHTMLを検証する
よくある失敗
- 環境変数なしのbuildでOGやTwitter画像がlocalhost基準になる
- CSR依存で本文やFAQが初期HTMLに十分出ない
- canonicalとsitemapで異なるURLを出す
判断基準
- 本番URLを前提にmetadataBaseが解決されているか
- 重要ページがsitemapに入り、重複URLが増えていないか
- FAQ、手順、比較がDOMとして読めるか
- schemaが本文に実在する内容だけを表しているか
まずクロールと正規化の土台を固める
最初に見るべきなのは、canonical、robots.txt、noindex、sitemap.xml、内部リンクです。ここがぶれていると、本文の改善をしても効果が見えにくくなります。
特に Next.js では、環境差分やパス生成のミスで canonical や sitemap がずれることがあるので、公開前に固定で確認した方が安全です。
意味のある HTML を返しているか確認する
見た目が表示されていても、CSR 依存が強いと取得や理解が不安定になることがあります。検索向けにも AI 面向けにも、主題が HTML として読める状態を優先した方が無難です。
ここでは、見出し、定義文、比較表、FAQ がサーバー返却側でどう見えるかを見ます。
構造化データは最後に足すのではなく、役割で決める
schema は入れればいいわけではありません。どのページに何を持たせるかを決めてから入れた方が管理しやすいです。
記事ページ、一覧ページ、FAQ が強いページでは、必要な構造化データも変わります。テンプレート化しておくと運用で崩れにくくなります。
まず読む流れ
最初に読むガイド
この領域で先に押さえると全体の流れをつかみやすい周辺記事です。ここから必要な 論点へ広げます。
周辺記事 / 技術実装 / 7 min
AI 時代でも崩せないテクニカル SEO の基本チェックリスト
AI まわりの話が増えても、先に見るべきテクニカル SEO の基本は大きく変わりません。最初に押さえる項目が分かります。
周辺記事 / 技術実装 / 7 min
Next.js サイトで canonical を崩さないチェックリスト
canonical は細かい実装差分で簡単に崩れます。Next.js サイトで見落としやすい点を、公開前後にそのまま確認できます。
周辺記事 / 技術実装 / 8 min
Next.js App Router で SEO を壊しやすい実装ミス
App Router では、便利さの裏で主題の伝わり方やクロール性を崩しやすいです。よくある失敗を先に避けられます。
周辺記事 / 技術実装 / 7 min
Next.js で sitemap.xml を安定運用する方法
sitemap.xml は一度出して終わりではありません。Next.js で増え続けるページを、崩さず載せ続ける考え方が分かります。
周辺記事 / 技術実装 / 7 min
構造化データを入れるべきページ、入れなくてよいページ
schema は入れれば強くなるわけではありません。どのページから優先するべきかを判断できます。
FAQ
AI 面を意識するなら、まず schema から入るべきですか？
先にクロールと HTML の土台です。schema はその後に役割に合わせて足す方が失敗しにくいです。
App Router では何を一番壊しやすいですか？
canonical、メタ生成、CSR 寄りのページ構造です。見た目では分かりにくいので、公開前の確認手順を固定するのが安全です。