【Next.js×SSR】ReactでSEO最強のブログを作る完全ガイド

「Reactでブログを作ってみたけど、検索に強くない」
「SSR（サーバーサイドレンダリング）って聞くけど難しそう」
と感じている方も多いのではないでしょうか？

実は、Next.jsを使えば、ReactのままSEOに強いブログを簡単に構築できます。
この記事では、ページ表示の高速化・URL構造の最適化・SEOに有利なSSRの実装方法を、誰でもわかるよう丁寧に解説します。

完成形コードも掲載しており、初心者でも今日から本格ブログが始められる内容になっています。

SSR対応ブログを作る理由
1. なぜSSRがブログに必要なのか？
Next.jsとReactの違いとは？
1. Next.jsを使うメリット
ページと記事の構造を作る
1. 投稿ページのフォルダ構成とルート設定
getServerSidePropsでSSRを実装
1. サーバー側でデータを取得して表示
SEO設定のポイント
1. ヘッドタグとメタ情報の設定
完成形コード一覧
1. pages/index.js
2. pages/posts/[id].js
まとめ

SSR対応ブログを作る理由

なぜSSRがブログに必要なのか？

結論：SSRは検索エンジンに強く、表示速度も速くなるからです。

通常のReactアプリでは、初回表示時にJavaScriptが動くまで中身が見えません。
これは検索エンジンにとって不利で、SEO評価が落ちる原因となります。

しかしSSR（サーバーサイドレンダリング）を使えば、あらかじめサーバーでページを生成してから表示されます。

この利点は以下の通りです：

GoogleやYahooに正確に情報が届く
表示が早くなることで離脱率が減る
SNSシェアでも正しい情報が表示されやすい

経済産業省も「情報の発信・認知度向上にはWeb検索最適化が欠かせない」と公表しています
（https://www.meti.go.jp/policy/mono_info_service/joho/marketing.html）。

Next.jsとReactの違いとは？

Next.jsを使うメリット

結論：Next.jsはReactの進化系であり、SSRやルーティングが標準で使えます。

Reactはビュー（画面）を作るためのライブラリですが、
Next.jsはそのReactをベースに以下の便利機能を最初から備えています。

SSR（サーバーサイドレンダリング）
ファイルベースのルーティング
ページごとのメタ情報（SEOタグ）設定
静的生成（SSG）との併用
APIルートの作成機能

インストールは以下で行えます。

npx create-next-app@latest my-blog
cd my-blog
npm run dev

ページと記事の構造を作る

投稿ページのフォルダ構成とルート設定

結論：pagesディレクトリにファイルを置けば、自動的にルーティングされます。

Next.jsではpages/index.jsがトップページ、pages/posts/[id].jsが記事ページです。

以下のような構造にします：

pages/
├── index.js
└── posts/
    └── [id].js

記事一覧を表示するindex.jsの例：

import Link from 'next/link';
const posts = [
  { id: 'first', title: '初めての投稿' },
  { id: 'second', title: '二つ目の記事' },
];
export default function Home() {
  return (
    <div>
      <h1>ブログ一覧</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <Link href={`/posts/${post.id}`}>{post.title}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

getServerSidePropsでSSRを実装

サーバー側でデータを取得して表示

結論：getServerSideProps関数を使えばSSRが簡単に使えます。

export async function getServerSideProps(context) {
  const id = context.params.id;
  const data = await fetch(`https://example.com/api/posts/${id}`).then(res => res.json());
  return {
    props: {
      post: data,
    },
  };
}

記事詳細ページ（[id].js）にこの関数を入れることで、ページが表示される前にサーバーで情報が取得されます。

これはReactだけでは実現できない、Next.jsの大きな特徴です。

SEO設定のポイント

ヘッドタグとメタ情報の設定

結論：next/headを使えばSEOタグの個別設定が簡単にできます。

import Head from 'next/head';
export default function Post({ post }) {
  return (
    <>
      <Head>
        <title>{post.title}｜My Blog</title>
        <meta name="description" content={post.summary} />
      </Head>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </>
  );
}

検索エンジンだけでなく、SNSのシェア時のカード表示にも関わるため、
title・description・OGPタグは必ず設定するようにしましょう。

完成形コード一覧

pages/index.js

import Link from 'next/link';
export default function Home() {
  const posts = [
    { id: 'first', title: '初めての投稿' },
    { id: 'second', title: '二つ目の記事' },
  ];
  return (
    <div>
      <h1>ブログ一覧</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <Link href={`/posts/${post.id}`}>{post.title}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

pages/posts/[id].js

import Head from 'next/head';
export default function Post({ post }) {
  return (
    <>
      <Head>
        <title>{post.title}</title>
        <meta name="description" content={post.summary} />
      </Head>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </>
  );
}
export async function getServerSideProps(context) {
  const { id } = context.params;
  const res = await fetch(`https://example.com/api/posts/${id}`);
  const data = await res.json();
  return {
    props: {
      post: data,
    },
  };
}