Zenn
🦁

ISRを活用したSEO対策についてまとめてみた

に公開
Next.js
SEO
ISR
tech

はじめに

業務でフロントエンドの設計を議論していて、「SSRだけでなくISRも取り入れた方がSEO対策の観点で良い」という意見が出て、頭の中のハテナブロックからコインが大量に溢れてきたので勉強がてら整理したいと思います。

1. そもそもSEO対策とは？

SEO（検索エンジン最適化）は、主に以下の目的で行われます：

  • 検索結果で上位に表示されやすくする
  • ユーザーが求める情報に素早くアクセスできるようにする
  • サイト流入や成果を高める

SEO対策は「順位アップ」だけでなく、以下のような点でも重要です：

  • クローラーにページを効率よく巡回・認識してもらう（クロール効率）
  • モバイル対応やページ表示速度向上によるUX改善
  • Core Web Vitals（ページ表示速度・操作応答・レイアウト安定性）の改善

2. クロールとインデックスの基礎

  • クロール … Googlebotなどのクローラーが自動でウェブを巡回し、ページを読み込むこと
  • インデックス … 読み込んだページ情報がGoogleのデータベースに登録され、検索対象になること

クロールされなければ、検索結果には表示されません。サイト規模が大きい場合ほどクロール効率が重要になります。

3. サイト高速化とクロールの関係

Googlebotは「サイトの応答が速いほど、より多くのページを巡回できる」傾向があります（クロールバジェット理論*）。

サイトが遅いと、クロールできるページ数が減る、もしくはクローラーが訪問を控えるケースがあります。
逆に高速化されたサイトはクロール頻度・範囲が拡大し、SEO効果が高まりやすいです。

*クロールバジェット（巡回予算）は、公式には明確な数値は示されていませんが、速度・サーバー応答が影響するとされています。

4. Core Web Vitals（コアウェブバイタル）

Googleが重要視するUX指標は主に以下の3つです：

  • LCP（Largest Contentful Paint） … 主要コンテンツの描画完了までの時間（2.5秒以内が目安）
  • INP（Interaction to Next Paint） … ユーザー操作への応答速度（200ms以下が良好、500ms以上は要改善）
  • CLS（Cumulative Layout Shift） … ページレイアウトの安定性

これらを高スコアで維持することで、SEOだけでなくユーザー満足度も向上します。

5. ISR（Incremental Static Regeneration）とは

ISRは、Next.jsで導入された「インクリメンタルな静的再生成」機能です。これは、静的サイト生成（SSG）のパフォーマンスと、サーバーサイドレンダリング（SSR）の更新性を組み合わせた仕組みで、次のような特徴があります。

  • 事前ビルドで生成した静的ページを配信し、高速な表示を実現
  • ページごとに「再生成間隔（revalidate）」を指定可能
  • 指定時間が経過した後、アクセスがあるとバックグラウンドで自動的にページを再生成
  • 新しいコンテンツをユーザーに素早く提供できる

この仕組みにより、パフォーマンスと更新性を両立しつつ、SEOにも強いサイト運営が可能になります。

6. ISR導入のSEOメリットと注意点

  • CDN＋静的配信によりページ表示が高速化
  • 更新性の高いページもrevalidateによる自動再生成で常に最新データを維持
  • 高速表示＋定期更新によりクローラーが効率的にサイトを巡回しやすくなる
  • コンテンツの更新がインデックスに素早く反映されやすい

注意点

  • 初回アクセス時、ページが未生成の場合は「fallback: blocking」によりやや待たされるケースがある
  • ISRはVercelやNetlifyなど、一部の対応ホスティングサービスでの運用が推奨される
  • ビルドやキャッシュ管理が複雑になる場合がある

7. ISRの実装スニペット例（Next.js）

ブログ記事ページのISR設定例

// pages/posts/[id].js
export async function getStaticProps(context) {
  const id = context.params.id;
  // APIなどから最新データを取得
  const post = await fetchPost(id);

  return {
    props: { post },
    // 60秒ごとに再生成（revalidate）
    revalidate: 60,
  };
}

export async function getStaticPaths() {
  // 事前生成するパスのリスト
  const paths = await fetchAllPostIds();
  return {
    paths,
    fallback: 'blocking',
  };
}

8. まとめ

  • SEO対策は「検索順位」だけでなく、クロール効率やCore Web Vitals、UX全体の改善が重要
  • ISRは高速性・更新性・スケーラビリティを兼ね備えた最新のSEO施策
  • ページ特性ごとにISR/SSR/SSGを柔軟に使い分けることで、検索流入とユーザー満足度の最大化を目指せる

おわりに

何か間違っている箇所などあればコメントで教えていただけると助かりますmm

Discussion