概要

Next.jsでのサイト公開においてSEO対策をすると思います。そのなかで、Reactにおけるrobots.txt と sitemap.xml の設定についてメモとしてまとめようとおもいます。

ここでは、Next.js+React 環境で
robots.txt と sitemap.xml を設定する手順を、実例とともに解説します。

robots.txt と sitemap.xml の役割

robots.txt : クローラーへのルール

クローラー「どのページを巡回してよいか / ダメか」を伝えるファイルです

インデックス可否を制御する入口
管理画面やAPIエンドポイントへのクロールを防ぐ
クローラーの負荷を軽減

sitemap.xml : サイトの地図

クローラーに「このサイトにどんなページがあるか」を一覧で伝えるファイルです。

新規ページの検知を早める
更新頻度や優先度を伝える
検索エンジンの効率的なクロールを支援

Next.jsでの基本方針

App Routerでは、従来の静的ファイル配置ではなく、TypeScriptで動的関数生成するのが公式推奨
なとなっています

理由

環境による内容の切り替え容易

const baseUrl = process.env.NODE_ENV === "production"
  ? "https://example.com"
  : "http://localhost:3000";

動的なルーティングに自動で対応
ビルド時に最新の状態を反映

robots.txt の設定方法

ファイル作成

app/robots.ts を作成します。

import { MetadataRoute } from "next";

export default function robots(): MetadataRoute.Robots {
  return {
    rules: [
      {
        userAgent: "*",
        allow: "/",
        disallow: ["/api/", "/admin/", "/dashboard/"],
      },
    ],
    sitemap: "https://example.com/sitemap.xml",
  };
}

robots.ts で設定できる主な項目

項目	説明	例
`userAgent`	対象クローラー	`"*"`, `"Googlebot"`
`allow`	クロール許可パス	`"/"`, `"/blog/"`
`disallow`	クロール禁止パス	`"/api/"`, `"/admin/"`
`sitemap`	sitemap.xmlの場所	`"https://example.com/sitemap.xml"`

sitemap.xml の設定方法

ファイル作成

app/sitemap.ts を作成します。

パターン1: 静的ページのみ

import { MetadataRoute } from "next";

export default function sitemap(): MetadataRoute.Sitemap {
  const baseUrl = "https://example.com";

  return [
    {
      url: `${baseUrl}/`,
      lastModified: new Date(),
      changeFrequency: "daily",
      priority: 1,
    },
    {
      url: `${baseUrl}/about`,
      lastModified: new Date(),
      changeFrequency: "monthly",
      priority: 0.8,
    },
    {
      url: `${baseUrl}/contact`,
      lastModified: new Date(),
      changeFrequency: "yearly",
      priority: 0.5,
    },
  ];
}

パターン2: 動的ページを含める

import { MetadataRoute } from "next";

// データ取得関数（例）
async function fetchPosts() {
  const res = await fetch("https://api.example.com/posts");
  return res.json();
}

export default async function sitemap(): MetadataRoute.Sitemap {
  const baseUrl = "https://example.com";

  // 動的に記事データを取得
  const posts = await fetchPosts();

  // 静的ページ
  const staticPages = [
    {
      url: `${baseUrl}/`,
      lastModified: new Date(),
      changeFrequency: "daily" as const,
      priority: 1,
    },
    {
      url: `${baseUrl}/about`,
      lastModified: new Date(),
      changeFrequency: "monthly" as const,
      priority: 0.8,
    },
  ];

  // 動的ページ（記事）
  const dynamicPages = posts.map((post: any) => ({
    url: `${baseUrl}/posts/${post.slug}`,
    lastModified: new Date(post.updatedAt),
    changeFrequency: "weekly" as const,
    priority: 0.7,
  }));

  return [...staticPages, ...dynamicPages];
}

sitemap.ts で設定できる主な項目

項目	説明	必須	備考
`url`	ページURL	○	完全なURL
`lastModified`	最終更新日時	○	`Date`型
`changeFrequency`	更新頻度	×	参考程度
`priority`	優先度	×	0.0〜1.0

動作確認

ローカルでの確認

dev起動して、

本番環境での確認

デプロイ後、

まとめ

App Routerでは関数ベースで robots / sitemap を生成
SEO設定もコードで管理すると安全で柔軟

この記事ではApp Routerで関数によってrobots.txtとsitemapを生成する設定方法を解説しました。小規模なサイトでも設定することを忘れずに行い、デプロイするといいかと思います。