Next.jsでSEO対策（概念編）
Webサイトを運営する上で避けて通れないのが SEO (Search Engine Optimization) です。
Next.js は、この SEO 対策において非常に強力なアドバンテージを持っています。
SEO（検索エンジン最適化）とは？
Google などの検索エンジンに「このサイトは有益だ」と正しく認識してもらい、検索結果の上位に表示させるための取り組みのことです。
検索順位が高いほど、多くのユーザーに訪問してもらえる可能性が高まります。
逆に、どんなに素晴らしいコンテンツを作っても、検索エンジンに見つけてもらえなければ、誰にも届きません。
検索順位を決める主な要素
Google のアルゴリズムは公開されていませんが、一般的に以下の要素が重要だと言われています。
- コンテンツの質 : ユーザーの役に立つ情報か？オリジナリティがあるか？
- 専門性と権威性 (E-E-A-T) : 誰が書いているか？信頼できるサイトか？
- ユーザー体験 (UX) : ページの表示速度は速いか？スマホで見やすいか？
- テクニカル要素 : 適切な HTML タグが使われているか？メタデータは正しく設定されているか？
Next.js が SEO に強い理由
従来の React (SPA: Single Page Application) は、SEO に弱いと言われてきました。
しかし、Next.js はその弱点を克服し、さらに強化する機能を備えています。
1. サーバーサイドレンダリング (SSR) / 静的サイト生成 (SSG)
React (SPA) は、ブラウザで JavaScript が動いて初めて画面が作られます。そのため、検索エンジンのクローラー（サイトを巡回するロボット）によっては、真っ白なページとして認識されてしまうことがありました。
Next.js はサーバー側で HTML を完成させてからブラウザに送るため、クローラーが確実にコンテンツを読み取ることができます。
2. 高速なページロード
Next.js は、画像の自動最適化 (next/image) や、必要な JavaScript だけを読み込む仕組みなど、表示速度を高速化する機能が満載です。
「表示速度」は検索順位に直結する重要な指標（Core Web Vitals）です。
3. メタデータの管理 (Metadata API)
タイトルや説明文（Description）、SNS でシェアされた時の画像（OGP）などを、ページごとに簡単に設定できる仕組みが用意されています。
4. ファイルベースのメタデータ (File-based Metadata)
sitemap.xml や robots.txt、動的な OGP 画像などを、特定の規約に基づいたファイルを作成するだけで自動生成する機能があります。これも Next.js の大きな魅力です。
SEO対策の種類
Next.js で意識すべき対策は大きく分けて2つです。
- 内部対策（テクニカルSEO） : Next.js の機能を使って適切に実装すること。
- コンテンツ対策 : 質の高い記事や情報を発信し続けること。
次章では、具体的な「内部対策」の実装方法について、コードを交えて解説します。