# Next.js×VercelでSEOスコアを最大化する設定方法 元のページ: SEO・Web集客の教科書 Next.js×VercelでSEOスコアを最大化する設定方法を解説します。Metadata API・サイトマップ・構造化データ・Core Web Vitals改善など、モダンスタックでの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では、\