WordPressからNext.jsへ移行する具体手順｜SEO資産を守る14ステップ完全ガイド

WordPressからNext.jsへ移行する場合、最初に決めるべきことは「何をNext.js側で管理するか」です。

主に移行対象になるのは、以下のようなデータです。

• 投稿記事
• 固定ページ
• カテゴリ
• タグ
• アイキャッチ画像
• 本文内の画像
• メタタイトル
• メタディスクリプション
• スラッグ
• 公開日
• 更新日
• 内部リンク
• リダイレクト設定

特に重要なのは、記事本文だけを移行するのではなく、SEOに関係する情報も一緒に整理することです。

WordPress では、タイトル、本文、カテゴリ、タグ、アイキャッチ画像、SEOプラグインのメタ情報などが管理画面上で分かれて保存されています。一方、Next.js では、これらをJavaScript、TypeScript、Markdown、MDX、CMS、JSONなどの形式で管理することになります。

そのため、移行前に「記事データをどの形式で持つか」を決めておく必要があります。

小規模サイトであれば、JavaScript や Markdown で管理する方法でも十分です。記事数が多い場合や、非エンジニアも更新する場合は、Headless CMS を使う方法も検討できます。

WordPress から Next.js への移行は、以下の流れで進めるとスムーズです。

1. 現在のWordPressサイトを調査する
2. 必要な記事データをエクスポートする
3. 記事本文をMarkdown形式に変換する
4. 画像をNext.js側に移す
5. URL構造を決める
6. Next.jsで記事ページを作成する
7. メタ情報を設定する
8. 内部リンクを修正する
9. 旧URLから新URLへリダイレクトする
10. 本番公開前にSEOチェックを行う

この順番で進めることで、記事データの抜け漏れやSEO評価の損失を防ぎやすくなります。

まず、現在の WordPress サイトにどのようなコンテンツがあるかを確認します。

確認すべき項目は以下です。

• 投稿記事数
• 固定ページ数
• カテゴリ一覧
• タグ一覧
• カスタム投稿タイプの有無
• 使用しているSEOプラグイン
• 使用している画像サイズ
• パーマリンク構造
• 重要な流入ページ
• 検索順位がついているページ
• 外部サイトからリンクされているページ

特に重要なのは、検索流入があるページです。

すべての記事を同じ優先度で移行するのではなく、アクセス数やコンバージョンへの貢献度が高いページから優先的に確認します。

Google Search Console や Google Analytics を使って、検索流入があるページ、クリック数が多いページ、問い合わせにつながっているページを把握しておきましょう。

WordPress 管理画面から記事データをエクスポートできます。

基本的な手順は以下です。

1. WordPress管理画面にログインする
2. 「ツール」を開く
3. 「エクスポート」を選択する
4. 「すべてのコンテンツ」または「投稿」を選ぶ
5. エクスポートファイルをダウンロードする

この方法で、投稿、固定ページ、カテゴリ、タグ、コメント、カスタムフィールドなどを含む XML ファイルを取得できます。

ただし、WordPress の標準エクスポートだけでは、画像ファイルそのものが完全に移行されるわけではありません。本文内の画像URLや添付情報は含まれますが、画像ファイル自体は別途ダウンロードして Next.js 側に配置する必要があります。

記事数が多い場合は、WordPress REST API を使って記事データを取得する方法もあります。

例えば、以下のようなURLで投稿データを取得できます。

https://example.com/wp-json/wp/v2/posts

固定ページの場合は、以下のようなURLです。

https://example.com/wp-json/wp/v2/pages

REST API を使うと、記事タイトル、本文、スラッグ、公開日、更新日、アイキャッチ画像IDなどをプログラムで取得できます。

WordPress の記事本文は、基本的にHTML形式で保存されています。

Next.js で Markdown 記事として管理する場合は、このHTMLをMarkdownに変換します。

例えば、WordPress 本文には以下のようなHTMLが含まれます。

<h2>見出し</h2>
<p>本文テキストです。</p>
<ul>
  <li>項目1</li>
  <li>項目2</li>
</ul>

これを Markdown に変換すると、以下のようになります。

## 見出し

本文テキストです。

- 項目1
- 項目2

変換時に注意すべき点は、見出し階層です。

WordPress 記事では、本文内にH1が使われているケースがあります。しかし、Next.js の記事ページでは、通常ページタイトルをH1として表示します。そのため、本文はH2から始めるのが自然です。

移行時には、本文内のH1をH2に変更し、H2以下の見出し階層も必要に応じて調整します。

Next.js で記事データを扱う場合、まずはJavaScriptの配列として管理する方法があります。

例えば、以下のような形です。

const articles = [
  {
    title: "WordPressからNext.jsへ移行する具体手順",
    slug: "wordpress-to-nextjs-migration",
    content: "## 見出しから始まるMarkdown本文"
  }
];

最低限必要な項目は、title、slug、contentです。

SEOを考える場合は、以下の項目も追加すると便利です。

• description
• publishedAt
• updatedAt
• category
• tags
• image
• canonicalUrl

ただし、最初から複雑にしすぎる必要はありません。

まずは、title と content を確実に移行し、その後にSEO項目やカテゴリ情報を追加していく流れでも問題ありません。

WordPress から Next.js へ移行する際に、URL構造は非常に重要です。

既存のWordPress記事がすでに検索エンジンに評価されている場合、できるだけ同じURLを維持するのが安全です。

例えば、WordPress側のURLが以下だったとします。

https://example.com/blog/wordpress-to-nextjs/

Next.js 側でも、できるだけ同じURLにします。

https://example.com/blog/wordpress-to-nextjs/

URLを変更する場合は、必ず301リダイレクトを設定します。

例えば、旧URLが以下の場合、

https://example.com/2024/01/wordpress-to-nextjs/

新URLを以下に変更するなら、

https://example.com/blog/wordpress-to-nextjs/

旧URLから新URLへ301リダイレクトを設定します。

リダイレクトを設定しないと、検索エンジンから見ると別ページ扱いになり、これまでのSEO評価を失う可能性があります。

記事データを Next.js 側に移したら、まず記事一覧ページを作成します。

記事一覧ページでは、以下の情報を表示します。

• 記事タイトル
• 記事の説明文
• 公開日
• カテゴリ
• アイキャッチ画像
• 詳細ページへのリンク

JavaScript で記事データを管理している場合は、articles 配列を map で表示できます。

記事一覧ページを作ることで、移行した記事データが正しく読み込まれているか確認しやすくなります。

次に、記事ごとの詳細ページを作成します。

App Router を使う場合は、以下のような構成が考えられます。

app/blog/[slug]/page.jsx

このページで slug を受け取り、該当する記事データを取得して表示します。

記事本文がMarkdownの場合は、MarkdownをHTMLに変換して表示する必要があります。

よく使われる方法は、以下のようなライブラリを使う方法です。

• react-markdown
• remark-gfm
• rehype-raw
• next-mdx-remote
• MDX

シンプルなブログであれば、react-markdown を使う方法が分かりやすいです。

一方、記事本文内で React コンポーネントを使いたい場合は、MDX を使うと柔軟に管理できます。

WordPress から Next.js へ移行するときに、画像移行は非常に重要です。

本文だけを移しても、画像URLが WordPress 側のままだと、将来的に画像が表示されなくなる可能性があります。

画像移行では、以下を確認します。

• アイキャッチ画像
• 本文内画像
• 画像のalt属性
• 画像ファイル名
• 画像URL
• 画像サイズ
• WebP化の有無

Next.js では、public フォルダに画像を置く方法がシンプルです。

例えば、以下のように配置します。

public/images/blog/example.jpg

記事本文内では、以下のようなパスで参照できます。

/images/blog/example.jpg

画像数が多い場合は、手作業で移行するのではなく、WordPress の uploads フォルダをまとめてダウンロードし、Next.js 側の public フォルダに整理して配置する方法が効率的です。

WordPress から Next.js へ移行すると、内部リンクのURLが変わることがあります。

特に以下のようなリンクは注意が必要です。

• WordPressの投稿URL
• 固定ページURL
• カテゴリページURL
• タグページURL
• 画像URL
• 添付ファイルURL

移行後のURL構造に合わせて、本文内の内部リンクを修正します。

例えば、WordPress 側で以下のようなリンクがあったとします。

https://example.com/?p=123

Next.js 側では、以下のようなURLに変える必要があります。

/blog/wordpress-to-nextjs/

内部リンクが古いままだと、ユーザー体験が悪くなるだけでなく、SEOにも悪影響があります。

記事数が多い場合は、URL変換表を作成して、一括置換する方法がおすすめです。

WordPress で SEO プラグインを使っていた場合、メタタイトルやメタディスクリプションも移行対象になります。

特に以下の情報は確認しましょう。

• SEOタイトル
• メタディスクリプション
• canonical URL
• OGPタイトル
• OGP説明文
• OGP画像
• noindex設定

Next.js では、ページごとに metadata を設定できます。

記事データに description を持たせておくと、各記事ページでメタディスクリプションとして使えます。

例えば、記事データを以下のようにします。

{
  title: "WordPressからNext.jsへ移行する具体手順",
  description: "WordPressサイトをNext.jsへ移行する流れを、記事データ、画像、URL、SEO設定まで含めて解説します。",
  content: "## ..."
}

このようにしておくと、Next.js 側でSEO設定を管理しやすくなります。

WordPress ではカテゴリやタグが増えすぎているケースがよくあります。

Next.js へ移行するタイミングで、カテゴリとタグを整理するのがおすすめです。

カテゴリは、サイト全体の構造を表す重要な分類です。一方、タグは記事同士を補助的につなぐための情報です。

移行時には、以下を確認します。

• 使っていないカテゴリはないか
• 重複しているカテゴリはないか
• タグが多すぎないか
• SEO上重要なカテゴリページはどれか
• カテゴリURLを残すべきか

すべてのカテゴリページやタグページを Next.js 側で再現する必要はありません。

検索流入があるカテゴリページや、サイト構造上重要なカテゴリページを優先して移行しましょう。

WordPress から Next.js への移行で、URLが変わる場合は301リダイレクトが必須です。

301リダイレクトは、旧URLから新URLへ恒久的に移転したことを検索エンジンに伝える設定です。

例えば、以下のように旧URLと新URLの対応表を作ります。

旧URL: /old-post/
新URL: /blog/new-post/

Next.js では、next.config.js で redirects を設定できます。

URL数が少ない場合は、next.config.js に直接書いても問題ありません。

URL数が多い場合は、リダイレクト設定を別ファイルで管理するか、ホスティング側で設定する方法も検討します。

重要なのは、検索流入のあるページ、外部リンクを受けているページ、問い合わせにつながっているページを優先してリダイレクトすることです。

記事データを移行したら、必ず表示確認を行います。

確認すべきポイントは以下です。

• タイトルが正しく表示されているか
• 本文の見出し構造が崩れていないか
• 画像が表示されているか
• 箇条書きや表が崩れていないか
• 内部リンクが正しく動くか
• 外部リンクが正しく動くか
• スマホ表示に問題がないか
• メタ情報が正しく出力されているか
• OGP画像が正しく表示されるか

特にMarkdown変換後は、改行、リスト、テーブル、リンクの崩れが起きやすいです。

記事数が多い場合でも、重要ページだけは必ず目視で確認しましょう。

本番公開前には、SEOチェックを行います。

最低限、以下を確認します。

• URLが正しいか
• titleタグが正しいか
• meta descriptionが正しいか
• canonicalが正しいか
• noindexが不要なページについていないか
• sitemap.xmlが生成されているか
• robots.txtが正しいか
• 旧URLから新URLへリダイレクトされるか
• 404ページが大量に発生していないか
• Google Search Consoleに登録できるか

移行直後は、検索順位が一時的に変動することがあります。

しかし、URL構造、リダイレクト、メタ情報、内部リンクが正しく設定されていれば、大きなSEO損失を防ぎやすくなります。

WordPress から Next.js へ移行するメリットは、主に以下です。

• 表示速度を改善しやすい
• セキュリティリスクを減らしやすい
• デザインの自由度が高い
• フロントエンドを細かく最適化できる
• 不要なプラグインに依存しなくてよい
• 静的生成やサーバーサイドレンダリングを使い分けられる
• SEOに必要な構造をコードで管理できる

特に、記事数が多いメディアサイトや、表示速度を重視するサイトでは、Next.js 移行の効果が出やすいです。

ただし、WordPress のような管理画面が標準であるわけではないため、記事更新の運用方法は事前に設計しておく必要があります。

Next.js への移行で注意すべき点は、WordPress の機能をそのまま再現しようとしすぎないことです。

WordPress には、管理画面、プラグイン、カテゴリ管理、タグ管理、メディアライブラリ、コメント機能など、多くの機能があります。

Next.js では、それらを必要に応じて自分で設計します。

そのため、移行時には以下のように考えるとよいです。

• 本当に必要な機能だけを残す
• 不要なカテゴリやタグは整理する
• 古い記事はリライトまたは削除を検討する
• SEO評価があるページはURLを維持する
• 更新頻度が高い場合はCMS導入を検討する
• 画像管理のルールを決める

WordPress から Next.js への移行は、単なるシステム変更ではありません。

サイト構造、SEO、コンテンツ品質、表示速度、運用体制を見直す良い機会です。

WordPress から Next.js へ移行する場合は、いきなり実装を始めるのではなく、まず現在のサイト構造と記事データを整理することが重要です。

基本的な流れは、WordPress から記事データをエクスポートし、HTML本文をMarkdown形式に変換し、Next.js 側で記事一覧ページと記事詳細ページを作成するという手順です。

そのうえで、画像移行、内部リンク修正、メタ情報の移行、301リダイレクト、SEOチェックを行います。

特に重要なのは、URLとリダイレクトです。

既存サイトに検索流入がある場合、URLを不用意に変更するとSEO評価を失う可能性があります。URLを変更する場合は、必ず旧URLから新URLへ301リダイレクトを設定しましょう。

Next.js へ移行することで、表示速度、デザイン自由度、保守性、セキュリティ面で大きなメリットがあります。

一方で、WordPress の管理画面やプラグインに頼っていた機能は、Next.js 側で再設計する必要があります。

そのため、WordPress から Next.js への移行は、単なる引っ越しではなく、サイト全体をより強くするためのリニューアル作業として進めるのがおすすめです。