Next.js SEO：レンダリング、メタデータ、サイトマップ、上位表示するブログ

Next.js SEOの本質は、ルートごとに正しく選ぶことです。何をサーバーでレンダリングし、何をキャッシュし、どのスクリプトが動く前に何をHTMLに含めるか。GoogleはJavaScript SEOの基本で、JavaScriptアプリをクロール、レンダリング、インデックス登録の3段階で処理すると説明し、サーバーサイドレンダリングや事前レンダリングは「今でも優れた方法」だと述べています。Next.jsはこれを標準で行います。本ガイドはApp Router（Next.js 13以降）を対象に、旧来のPages Routerについても補足します。

Next.jsはSEOに強いのか？

はい。クライアントサイドレンダリングの一般的なReactアプリは、ほぼ空のHTMLを送り、ブラウザでページを組み立てます。検索エンジンはそれをレンダリングする必要があり、多くのボットはまったくレンダリングしません。Next.jsはReactをサーバーでレンダリングするため、HTMLレスポンスの時点で見出し、本文、リンク、メタデータが含まれています。この違いがインデックス登録にどう影響するかは、JavaScript SEOのガイドで解説しています。

App Routerでは、コンポーネントはデフォルトでServer Componentsです。'use client'を付けたコンポーネントも、サーバーでHTMLとして事前レンダリングされます。弱点はデータです。useEffectの中や、クリック後に初めて読み込む内容は、初期HTMLに含まれません。コンテンツはServer Componentsで取得し、クライアントコンポーネントはインタラクションだけに使いましょう。

SSG、SSR、ISR、CSR：どのレンダリング方式を選ぶべきか？

Next.jsではルートごとに方式を組み合わせられます。選択は鮮度、速度、そしてクローラーが受け取る内容に影響します。

Next.jsのISRドキュメントは、その利点として「サイト全体を再ビルドせずに」静的コンテンツを更新できること、大量のページを長いビルド時間なしで扱えることを挙げています。export const revalidate = 3600 を指定したルートは、最大で1時間に1回再生成されます。正確に制御したい場合は、コンテンツ変更時にrevalidatePathまたはrevalidateTagを呼び出します。ISRは静的エクスポート（output: 'export'）では動作しません。クライアントレンダリングのままにせざるを得ないアプリについては、シングルページアプリケーションのSEOのガイドで対処法を紹介しています。

Metadata APIでタイトル、説明文、canonicalをどう設定するか？

App RouterではMetadata APIがnext/headに代わります。Next.jsのメタデータに関するドキュメントによると、layoutやpageから静的なmetadataオブジェクトを、値がデータに依存する場合はgenerateMetadata関数をエクスポートすれば、Next.jsがheadタグを生成します。どちらもServer Componentsでのみ使えます。

export async function generateMetadata({ params }) {
  const { slug } = await params
  const post = await getPost(slug)
  return {
    title: post.title,
    description: post.excerpt,
    alternates: { canonical: `/blog/${slug}` },
    openGraph: { images: [post.cover] },
  }
}

ほとんどの問題を防ぐ5つのルール：

• metadataBaseを設定する：ルートlayoutに本番ドメインを指定し、相対パスのcanonicalやOpen GraphのURLを絶対URLにします。
• タイトルテンプレートを使う：ルートlayoutで '%s | ブランド名' のように設定し、各ページに固有のタイトルとブランド名を1回だけ付けます。
• インデックス対象の全ページに自己参照のcanonicalを付ける：alternates.canonicalで指定すると、URLパラメータや末尾スラッシュによる重複を防げます。canonicalタグの用語解説にルールをまとめています。
• ページごとに説明文を書く：generateMetadataの中でコンテンツから生成し、サイト共通のデフォルト値は使いません。
• Open Graph画像を追加する：ルートのフォルダにopengraph-imageファイルを置き、Open Graphプレビューツールで結果を確認します。

動的ページでは、Next.jsは描画を速めるため、最初のバイトの後にメタデータをストリーミングします。ドキュメントによると、headにメタデータがあることを前提とするボット（user agentで判定され、例としてBingbot、Twitterbot、Slackbotが挙げられています）にはストリーミングが無効になり、htmlLimitedBotsオプションで対象リストを変更できます。重視するクローラーが含まれていなければ追加してください。Pages Routerでの同等の仕組みはnext/headのHeadコンポーネントで、重複タグを避けるためにkey属性を付けます。

Next.jsでsitemap.xmlとrobots.txtをどう生成するか？

どちらもappフォルダの特殊ファイルです。URLの配列を返す関数をエクスポートするsitemap.tsは/sitemap.xmlに、robots.tsは/robots.txtになります。サイトマップのリファレンスによると、このファイルはデフォルトでキャッシュされ、Googleの上限はサイトマップ1つにつき50,000 URLです。それを超える場合はgenerateSitemapsで複数ファイルに分割します。

import type { MetadataRoute } from 'next'

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const posts = await getPosts()
  return posts.map((p) => ({
    url: `https://example.com/blog/${p.slug}`,
    lastModified: p.updatedAt,
  }))
}

含めるのは、canonicalでインデックス可能かつ200を返すURLだけにし、lastModifiedには実際の更新日を入れます。多言語サイト向けにalternates.languagesも指定できます。robots.tsではサイトマップの場所を示し、どのAIボットにクロールを許可するかを決めます。対象のボットはAIクローラー向けrobots.txtの記事で一覧にしています。形式の詳細はXMLサイトマップの用語解説をご覧ください。

Next.jsサイトのSEOを最も壊しやすい技術的な落とし穴は？

これらはすべてクロール可能性を下げます。クローラーはリンクから各URLを発見でき、正しいステータスコードを受け取れなければなりません。

Next.jsで構造化データをどう追加するか？

Next.jsのドキュメントは、JSON-LDをtypeがapplication/ld+jsonのscriptタグとしてpageやlayoutコンポーネント内で直接レンダリングし、ページと同じデータから作り、シリアライズしたJSON内の < をエスケープしてインジェクションを防ぐよう推奨しています。サーバーでレンダリングされるので、GoogleもAIクローラーも生のHTMLで読み取れます。記事にはArticle（またはBlogPosting）、ルートlayoutにはOrganization、深い階層のページにはBreadcrumbList、ECにはProductを使います。schemaジェネレーターで有効なひな形を作り、Googleのリッチリザルトテストでページを検証しましょう。

Core Web Vitalsを満たす速度のNext.jsサイトにするには？

Next.jsには、Core Web Vitalsが悪化するよくある原因に対処するコンポーネントが用意されています。

• next/image：画像をリサイズし、最新フォーマットで配信し、デフォルトで遅延読み込みし、サイズ指定を必須にしてレイアウトのずれを防ぎます。ファーストビューのメイン画像は優先指定して遅延読み込みを避けます（多くの場合、Largest Contentful Paintの要素です）。
• next/font：フォントを自社ドメインでホストし、フォントの遅い差し替えによるずれを防ぎます。
• next/script：外部スクリプトを戦略（afterInteractive、lazyOnload）に沿って読み込み、ページをブロックしません。
• クライアントのJavaScriptを減らす：'use client'の境界ごとにダウンロードとハイドレーションが必要なコードが増え、モバイルのInteraction to Next Paintを悪化させます。

ラボのスコアだけでなく実ユーザーのデータを測りましょう。両方の読み方はPageSpeed Insightsのガイドで解説しています。

上位表示するNext.jsブログをどう運用するか？

Next.jsブログには主に3つの形があります。リポジトリ内のMDXやMarkdownファイル（シンプルですが記事ごとにコミットとデプロイが必要）、Server Componentsから取得するヘッドレスCMS（Sanity、Contentful、Strapi、Payload）、そして外部ツールから記事を受け取る公開用webhookです。どの場合もSEOの型は同じで、generateStaticParams、generateMetadata、ISRを備えた動的ルートapp/blog/[slug]、同じデータソースから作るサイトマップ、全記事にリンクする一覧ページで構成します。

webhookを使えば、公開作業をデプロイの流れから切り離せます。Route Handlerが記事を受け取って保存し、関係するページを再検証します。

// app/api/publish/route.ts
import { revalidatePath } from 'next/cache'

export async function POST(request) {
  if (request.headers.get('authorization') !== `Bearer ${process.env.PUBLISH_SECRET}`) {
    return new Response('Unauthorized', { status: 401 })
  }
  const article = await request.json()
  await savePost(article)
  revalidatePath('/blog')
  revalidatePath(`/blog/${article.slug}`)
  return Response.json({ ok: true })
}

Next.js SEOはAIアシスタントからの引用にどう役立つか？

サーバーレンダリングはGEO（生成エンジン最適化）の第一条件です。Vercelが2024年12月に公開した分析The rise of the AI crawlerは、「主要なAIクローラーはいずれも現在JavaScriptをレンダリングしていない」と結論づけ、GPTBot、ChatGPT-User、OAI-SearchBot、ClaudeBot、PerplexityBotを挙げ、同社ネットワーク上で1か月にGPTBotが5億6,900万回、Claudeが3億7,000万回のリクエストを行ったと集計しています。本文、見出し、JSON-LDを事前レンダリングしたNext.jsのページはそのすべてに読まれますが、クライアントレンダリングのページは読まれません。

第二の条件は、引用に値するコンテンツです。セクションごとにひとつの質問に答え、出典、数値、明確な定義を備え、定期的に公開される記事です。この部分を自動化するのが、私たちの製品Sorankです。SorankはautopilotでSEOとGEOを進めるソフトウェアで、キーワードを見つけ、ブログ記事ジェネレーターが出典、内部リンク、画像付きの記事を月20本、60本、または120本作成します。Next.jsサイトとは、導入ページで説明しているカスタムwebhookで連携します。あなたのRoute Handlerが各記事を受け取って保存し、ブログを再検証します。さらにAIでの言及トラッキングが、ChatGPT、Claude、Geminiがあなたのブランドを引用しているかを毎週確認します。

まとめると、見つけてほしいページはすべて事前レンダリングし、メタデータはサーバーで定義し、サイトマップはコンテンツと同じデータソースから生成することです。Next.jsは道具を提供し、順位やAIでの引用はそれを使って何を公開するかで決まります。Next.jsブログに記事を継続的に供給するなら、Sorankの料金プランをご覧ください。月額49ドルからで、3日間の無料トライアルがあります。