Next.js×VercelでSEOスコアを最大化する設定方法

はじめに

Next.jsとVercelの組み合わせは、SEOの観点から非常に優れたスタックです。静的生成・エッジ配信・組み込みの最適化機能によって、WordPressベースのサイトと比較して構造的に高いSEOスコアを実現できます。しかし「Next.jsで作れば自動的にSEOが最適化される」という認識は誤りで、適切な設定・実装が必要です。

本記事では、Next.jsとVercelを使ってSEOスコアを最大化するための具体的な設定方法を、Web担当者が制作会社に確認すべき観点も含めて解説します。

Next.jsのSEO対応機能の概要

Next.jsはSEOに関連する以下の機能を提供しています。

Metadata API（App Router）

Next.js 13のApp Router導入以降、metadataオブジェクトを使ってページごとのメタデータを設定します。

ページごとに以下の設定が可能です。

• タイトルタグ（title）

• メタディスクリプション（description）

• OGP（openGraph）：SNSシェア時の表示

• Twitter Card（twitter）

• robots（robots）：インデックス・フォロー設定

• canonical URL（alternates.canonical）

• hreflang（alternates.languages）：多言語対応

発注側が確認すべき点：「各ページのtitle・description・OGPを個別に設定できる実装になっているか」「ヘッドレスCMSのコンテンツと連動してメタデータが自動生成されているか」を確認します。

静的生成（SSG）とISR

コーポレートサイトのコンテンツページ（サービス詳細・事例・ブログ記事等）は、静的生成（SSG）またはISRで構築することでLCPを最小化できます。

• SSG（Static Site Generation）：ビルド時にHTMLを生成。コンテンツ更新のたびに再ビルドが必要。

• ISR（Incremental Static Regeneration）：指定した時間間隔でページを自動再生成。ヘッドレスCMSのコンテンツ更新に対応しながら静的配信の速度を維持できます。

ブログ・ニュース・事例のような頻繁に更新されるコンテンツにはISR、更新頻度が低いサービスページ・会社概要等にはSSGが適しています。

画像最適化：next/image

next/imageはNext.jsが提供する画像最適化コンポーネントで、以下を自動的に行います。

• WebP・AVIF形式への自動変換（サイズを削減）

• デバイスサイズに応じた適切な解像度の配信

• 遅延読み込み（Lazy Loading）

• レイアウトシフト（CLS）の防止（画像のサイズ指定を強制）

LCPの対象画像への対応

ファーストビューの最大コンテンツ（キービジュアル等）にはpriorityプロパティを設定することで、LCPを改善できます。

発注側が確認すべき点：「サイト内のすべての画像でnext/imageを使用しているか」「キービジュアルにpriorityが設定されているか」「alt属性が適切に設定されているか」を確認します。

フォント最適化：next/font

next/fontはGoogle FontsやカスタムフォントをCLSを防ぎながら最適化して読み込む機能です。

CLSを防ぐ仕組み

next/fontはフォントを事前にダウンロード・ホスティングし、フォールバックフォントのサイズを実際のフォントに合わせて調整することで、フォント読み込みによるレイアウトシフトをゼロにします。

また、フォントファイルをVercelのCDNで配信するため、Google Fontsサーバーへの外部リクエストが不要になり、読み込み速度も向上します。

構造化データ（Schema.org）の実装

Next.jsでは、各ページに構造化データ（JSON-LD形式）を実装することで、検索結果でのリッチスニペット表示を実現できます。

実装方法

App Routerでは、<Script>コンポーネントまたはlayout.tsxでJSON-LDを設定します。

優先的に実装すべき構造化データ

• Organization：会社名・所在地・電話番号・ロゴ

• BreadcrumbList：パンくずナビゲーション

• Article：ブログ・ニュース記事

• FAQPage：よくある質問ページ

• Product/Service：製品・サービス情報

LLMO（AI最適化）への貢献

構造化データは、ChatGPT・Perplexitなどの生成AIがWebページの情報を正確に解釈するためにも役立つ。コンテンツが構造化されていることで、AIが引用しやすくなります。

XMLサイトマップの自動生成

Next.jsのApp Routerでは、sitemap.tsファイルを使ってXMLサイトマップを動的に生成できます。

動的サイトマップの実装

ヘッドレスCMSのAPIからページ一覧を取得し、自動的にサイトマップを生成する実装を行うことで、コンテンツが追加されるたびに手動でサイトマップを更新する必要がなくなります。

発注側が確認すべき点：「サイトマップが自動生成されているか」「Google Search Consoleにサイトマップを送信しているか」「廃止したページがサイトマップに残っていないか」を確認します。

robots.txtの設定

robots.txtファイルをpublic/robots.txtに配置するか、App Routerのrobots.tsで動的に生成します。

基本的な設定

• インデックスしてほしいページ：Allow: /

• インデックス不要なページ：Disallow: /admin/、Disallow: /preview/等

• サイトマップのURLを明示：Sitemap: https://example.com/sitemap.xml

Vercelの設定でSEOを最適化する

リダイレクトの設定

next.config.js（またはnext.config.ts）でリダイレクトを設定します。

301リダイレクトはSEOの評価を新URLに引き継ぐ。302（一時的なリダイレクト）はSEO評価を引き継がないため、恒久的なURLの変更には必ず301を使う。

ヘッダーの設定

Vercelではnext.config.jsのヘッダー設定でキャッシュ・セキュリティ・インデックス設定を管理できます。

キャッシュの最適化

静的アセット（画像・フォント・スタイルシート）には長いキャッシュ期間を設定し、Vercelのエッジネットワークでの効率的なキャッシュを実現します。

Vercel Edge Networkの活用

Vercelはデプロイするだけで世界100か所以上のエッジからコンテンツを自動配信します。日本からのアクセスは日本のエッジから、海外からのアクセスは最寄りのエッジから配信されるため、地理的な遅延を最小化できます。

SEOに関連するNext.jsの設定チェックリスト

メタデータ

• 各ページにユニークなtitle・descriptionが設定されているか

• OGP（og:title・og:description・og:image）が設定されているか

• canonicalが適切に設定されているか

パフォーマンス

• next/imageをすべての画像で使用しているか

• ファーストビューの画像にpriorityを設定しているか

• next/fontを使用しているか

• レンダリング戦略（SSG/ISR/SSR）がページの特性に合っているか

テクニカルSEO

• XMLサイトマップが動的生成・自動更新されているか

• robots.txtが適切に設定されているか

• 構造化データが主要ページに実装されているか

• リダイレクトが301で設定されているか

Core Web Vitals

• PageSpeed Insightsのモバイルスコアが80以上か

• CLSが0.1以下か

• LCPが2.5秒以下か

まとめ

Next.js＋Vercelの組み合わせは、Metadata API・next/image・next/font・静的生成・エッジ配信という多層的な最適化メカニズムを通じて、SEOの技術的な基盤を高水準に保てる。ただし適切な設定・実装が前提であり、発注側がこれらのポイントを理解して制作会社に確認することが品質担保の重要なステップです。

次の記事では、SEO対策の費用感——自社対応・ツール活用・外注の比較を解説します。