【ITニュース解説】SEO for Next.js apps — practical tips that actually work

Next.jsアプリケーションにおけるSEO（検索エンジン最適化）の実践的なテクニックについて解説する。特に、Next.jsの新しいApp Routerを利用したSEO戦略に焦点を当てる。

まず、Metadata APIの活用が重要となる。App Routerを使用する場合、ページやレイアウトからmetadataまたはgenerateMetadataをエクスポートすることで、タイトル、説明文、canonicalリンク、Open Graph設定、ファビコンなどを一貫して管理できる。これらのメタデータがサーバーサイドでレンダリングされるため、クローラーやソーシャルメディアのプレビューが正しいコンテンツを即座に認識できるようになる。静的なメタデータの設定例としては、export const metadata = { ... }のように記述する。動的なメタデータが必要な場合は、export async function generateMetadata({ params }) { ... }を使用し、ページパラメータに基づいてメタデータを生成する。

次に、サイトマップとrobots.txtの管理について。サイトマップは依然としてSEOにおいて重要な役割を果たす。Next.jsのApp Routerには、サイトマップを生成するための便利な機能が備わっている。サイトマップはビルド時に生成することも、大規模なサイト向けに分割することも可能。サイトマップを最新の状態に保ち、主要な更新後にはGoogle Search Consoleに送信することが推奨される。サイトマップの簡単な例としては、app/sitemap.tsファイルを作成し、サイトのURLリストを生成する関数を定義する。その後、生成されたsitemap.xmlファイルをGoogle Search Consoleに登録するか、robots.txtで指定する。

コンテンツのサーバーサイドレンダリングも不可欠。GoogleはJavaScriptを段階的に処理するため、主要なコンテンツがクライアントサイドでのみレンダリングされる場合、インデックス登録が遅延したり、不完全になったりする可能性がある。重要なコンテンツは、SSG（Static Site Generation）、SSR（Server-Side Rendering）、ISR（Incremental Static Regeneration）などの手法を用いてサーバーサイドでレンダリングし、クローラーが即座に認識できるようにする。マーケティングページやブログ記事にはSSGまたはISR、頻繁に変更されるリスト（検索結果など）にはSSRまたは慎重に設計されたハイブリッドアプローチが適している。パーソナライズされたダッシュボードUIなど、SEOを考慮する必要がない場合はクライアントサイドレンダリングで問題ない。

画像の最適化には、next/imageコンポーネントを利用する。next/imageは、画像の自動リサイズ、モダンな画像フォーマットへの変換、レイアウトシフトの防止などの機能を提供する。画像には必ず適切なaltテキストを設定し、ヒーローイメージにはpriority属性と適切なsizes属性を設定することが重要。

JSON-LD構造化データもSEOに有効。JSON-LDを使用すると、Googleがコンテンツを理解しやすくなり、記事カード、FAQ、製品情報などのリッチスニペットを表示できるようになる。JSON-LDはサーバーサイドで挿入し、クローラーが即座に認識できるようにする。GoogleのRich Results Testツールで検証することも推奨される。JSON-LDの例としては、@context、@type、headline、datePublished、author、image、publisherなどのプロパティを含むJSONオブジェクトを定義し、scriptタグを使用してHTMLに挿入する。

その他、試してみる価値のあるアイデアとして、サーバーコンポーネントを使用してクローラーに最適化されたコンテンツを提供する方法がある。サーバーサイドで最小限のSEO対策を施したレイヤーをレンダリングし、インタラクティブな要素を後からハイドレートすることで、SEOとユーザーエクスペリエンスの両立を図る。大規模なサイトでは、サイトマップを日付やカテゴリごとに分割し、Google Search Consoleでの処理速度を向上させる。また、Next.jsのImage APIを利用して、OG（Open Graph）画像をビルド時またはオンデマンドで生成することで、手動での作業を減らしつつ、すべての投稿にユニークな共有イメージを提供できる。CMSの更新時に、単一のパスではなく、ページグループ全体を再検証するために、revalidateタグを使用することも有効。これにより、コンテンツの一貫性を維持しながら、不要なリビルドを回避できる。