Next.js 16 サイトマップ・robots.txt 自動生成ガイド

AI Assisted
この記事は筆者の実装経験をもとに実装コードをベースで執筆し、AIによる校閲・推敲を経て公開しています。

Next.js 16の公式APIを使って、SEOの要となるサイトマップ（sitemap.xml）とrobots.txtを自動生成する方法を解説します。 動的コンテンツへの対応はもちろん、サイトマップの種類別分割やGoogle News対応まで、実務で必要なパターンを網羅しました。

この記事で学べること

• Next.js公式Sitemap APIの基本と応用
• 用途別サイトマップの分割設計（メイン、記事、ニュース）
• サイトマップインデックスによる統合管理
• Google News Sitemapの実装方法
• robots.txtによるクロール制御のベストプラクティス

---

本サイトで実装しているサイトマップ構成

本サイトでは、用途別に4種類のサイトマップを実装しています。

robots.txt
  └─ sitemap-index.xml（親）
        ├─ sitemap.xml（静的・カテゴリ・タグ）
        ├─ sitemap-posts.xml（記事）
        └─ sitemap-news.xml（ニュース）

---

1. サイトマップインデックスの実装

複数のサイトマップを束ねる「親」となるインデックスファイルです。 Google Search Consoleにはこのファイルを登録します。

// app/sitemap-index.xml/route.ts
import { NextRequest } from 'next/server'
import { getSiteUrl } from '@/lib/utils/url'

export async function GET(request: NextRequest) {
  const baseUrl = getSiteUrl()
  const currentDate = new Date().toISOString()

  const sitemapIndex = `<?xml version="1.0" encoding="UTF-8"?>
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <sitemap>
    <loc>${baseUrl}/sitemap.xml</loc>
    <lastmod>${currentDate}</lastmod>
  </sitemap>
  <sitemap>
    <loc>${baseUrl}/sitemap-posts.xml</loc>
    <lastmod>${currentDate}</lastmod>
  </sitemap>
  <sitemap>
    <loc>${baseUrl}/sitemap-news.xml</loc>
    <lastmod>${currentDate}</lastmod>
  </sitemap>
</sitemapindex>`

  return new Response(sitemapIndex, {
    headers: {
      'Content-Type': 'application/xml',
      'Cache-Control': 'public, max-age=600, s-maxage=600',
    },
  })
}

// ISRで10分ごとに再生成
export const revalidate = 600

ポイント：

• Route Handler (route.ts) を使用してXMLを直接返す
• Cache-ControlヘッダーでCDNキャッシュも制御

---

2. メインサイトマップの実装（公式API）

app/sitemap.tsを作成すると、/sitemap.xmlが自動生成されます。 静的ページとDB取得が必要な動的ページ（カテゴリ、タグ等）を含めます。

// app/sitemap.ts
import { MetadataRoute } from 'next'
import { CategoryService } from '@/lib/db/services/categoryService'
import { TagService } from '@/lib/db/services/tagService'
import { getSiteUrl } from '@/lib/utils/url'

// Firestoreアクセスのため動的レンダリング
export const dynamic = 'force-dynamic'
export const revalidate = 3600 // 1時間ごとに再検証

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const baseUrl = getSiteUrl()

  // 静的ページの定義
  const staticPages: MetadataRoute.Sitemap = [
    {
      url: baseUrl,
      lastModified: new Date(),
      changeFrequency: 'daily',
      priority: 1,
    },
    {
      url: `${baseUrl}/posts`,
      lastModified: new Date(),
      changeFrequency: 'daily',
      priority: 0.9,
    },
    {
      url: `${baseUrl}/categories`,
      lastModified: new Date(),
      changeFrequency: 'weekly',
      priority: 0.8,
    },
    {
      url: `${baseUrl}/tags`,
      lastModified: new Date(),
      changeFrequency: 'weekly',
      priority: 0.8,
    },
    {
      url: `${baseUrl}/about`,
      lastModified: new Date(),
      changeFrequency: 'monthly',
      priority: 0.7,
    },
    {
      url: `${baseUrl}/contact`,
      lastModified: new Date(),
      changeFrequency: 'monthly',
      priority: 0.7,
    },
    {
      url: `${baseUrl}/privacy`,
      lastModified: new Date(),
      changeFrequency: 'yearly',
      priority: 0.3,
    },
    {
      url: `${baseUrl}/terms`,
      lastModified: new Date(),
      changeFrequency: 'yearly',
      priority: 0.3,
    },
  ]

  try {
    // DBから動的コンテンツを並列取得
    const [categories, tags] = await Promise.all([
      new CategoryService().findAll(),
      new TagService().findAll(),
    ])

    // カテゴリページ
    const categoryPages: MetadataRoute.Sitemap = categories.map((category) => ({
      url: `${baseUrl}/categories/${category.slug}`,
      lastModified: category.updatedAt?.toDate() || new Date(),
      changeFrequency: 'weekly',
      priority: 0.6,
    }))

    // タグページ
    const tagPages: MetadataRoute.Sitemap = tags.map((tag) => ({
      url: `${baseUrl}/tags/${tag.slug}`,
      lastModified: tag.createdAt?.toDate() || new Date(),
      changeFrequency: 'weekly',
      priority: 0.5,
    }))

    return [...staticPages, ...categoryPages, ...tagPages]
  } catch (error) {
    console.error('Error generating sitemap:', error)
    // エラー時は静的ページのみ返してXMLエラーを防ぐ
    return staticPages
  }
}

ポイント：

• Next.js公式のMetadataRoute.Sitemap型を使用
• Promise.allでDB取得を並列化してパフォーマンス向上
• try-catchでエラー時も最低限のサイトマップを返す

---

3. 記事専用サイトマップの実装

記事数が多い場合、メインサイトマップから分離することで管理しやすくなります。

// app/sitemap-posts.xml/route.ts
import { NextRequest } from 'next/server'
import { PostService } from '@/lib/db/services/postService'
import { getSiteUrl } from '@/lib/utils/url'

export async function GET(request: NextRequest) {
  try {
    const postService = new PostService()
    const posts = await postService.findPublished()
    const baseUrl = getSiteUrl()

    const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
${posts.map((post) => `  <url>
    <loc>${baseUrl}/posts/${post.id}</loc>
    <lastmod>${(post.updatedAt?.toDate() || post.createdAt?.toDate() || new Date()).toISOString()}</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.7</priority>
  </url>`).join('\n')}
</urlset>`

    return new Response(sitemap, {
      headers: {
        'Content-Type': 'application/xml',
        'Cache-Control': 'public, max-age=3600, s-maxage=3600',
      },
    })
  } catch (error) {
    console.error('Error generating posts sitemap:', error)

    // エラー時は空のサイトマップを返す
    const emptySitemap = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
</urlset>`

    return new Response(emptySitemap, {
      headers: { 'Content-Type': 'application/xml' },
      status: 500,
    })
  }
}

// ISRで10分ごとに再生成
export const revalidate = 600

---

4. Google News Sitemap の実装

Google Newsに掲載されるためには、専用のNews Sitemapが必要です。 重要：過去2日以内に公開された記事のみを含める必要があります。

// app/sitemap-news.xml/route.ts
import { NextRequest } from 'next/server'
import { PostService } from '@/lib/db/services/postService'
import { getSiteUrl } from '@/lib/utils/url'

/**
 * Google News Sitemap
 * https://developers.google.com/search/docs/crawling-indexing/sitemaps/news-sitemap
 *
 * Google Newsは過去2日以内に公開された記事のみを対象とする
 */
export async function GET(request: NextRequest) {
  try {
    const postService = new PostService()
    const allPosts = await postService.findPublished()
    const baseUrl = getSiteUrl()

    // 過去2日以内の記事のみフィルタ
    const twoDaysAgo = new Date()
    twoDaysAgo.setDate(twoDaysAgo.getDate() - 2)

    const recentPosts = allPosts.filter((post) => {
      const publishedAt = post.publishedAt?.toDate() || post.createdAt?.toDate()
      return publishedAt && publishedAt >= twoDaysAgo
    })

    const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:news="http://www.google.com/schemas/sitemap-news/0.9">
${recentPosts.map((post) => {
  const publishedAt = post.publishedAt?.toDate() || post.createdAt?.toDate() || new Date()
  const publicationDate = publishedAt.toISOString()

  return `  <url>
    <loc>${baseUrl}/posts/${post.id}</loc>
    <news:news>
      <news:publication>
        <news:name>nero15.dev</news:name>
        <news:language>ja</news:language>
      </news:publication>
      <news:publication_date>${publicationDate}</news:publication_date>
      <news:title>${escapeXml(post.title)}</news:title>
    </news:news>
  </url>`
}).join('\n')}
</urlset>`

    return new Response(sitemap, {
      headers: {
        'Content-Type': 'application/xml',
        'Cache-Control': 'public, max-age=900, s-maxage=900', // 15分キャッシュ
      },
    })
  } catch (error) {
    console.error('Error generating news sitemap:', error)

    const emptySitemap = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:news="http://www.google.com/schemas/sitemap-news/0.9">
</urlset>`

    return new Response(emptySitemap, {
      headers: { 'Content-Type': 'application/xml' },
      status: 500,
    })
  }
}

// XML特殊文字をエスケープ
function escapeXml(text: string): string {
  return text
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&apos;')
}

// ISRで5分ごとに再生成（ニュースは頻繁に更新）
export const revalidate = 300

Google News Sitemapの要件：

• xmlns:news名前空間を宣言
• news:publicationでサイト名と言語を指定
• news:publication_dateはISO 8601形式
• news:titleはXMLエスケープが必要
• 過去2日以内の記事のみ（Google News Centerの規約）

---

5. robots.txt の実装

app/robots.tsで、クローラーへの指示とサイトマップの場所を通知します。

// app/robots.ts
import { MetadataRoute } from 'next'
import { getSiteUrl } from '@/lib/utils/url'

export default function robots(): MetadataRoute.Robots {
  const baseUrl = getSiteUrl()

  return {
    rules: [
      {
        userAgent: '*',
        allow: '/',
        disallow: [
          // クロールさせたくないパスを指定
          // 例: 管理画面、API、認証ページなど
        ],
      },
      // 特定のボット（例: AI学習用クローラー）を拒否する場合
      // {
      //   userAgent: 'GPTBot',
      //   disallow: '/',
      // },
    ],
    // サイトマップインデックスを指定
    sitemap: `${baseUrl}/sitemap-index.xml`,
  }
}

ポイント：

• sitemapには親のインデックスファイルを指定
• 管理画面、API、認証ページなどはクロール対象外に設定

---

6. changeFrequency と priority の設定基準

Googleはこれらの値を「ヒント」として扱いますが、サイトの構造を伝えるために設定しておきましょう。

---

7. ISRキャッシュ戦略

サイトマップごとに適切なキャッシュ時間を設定します。

// 各ファイルの末尾に設定
export const revalidate = 600 // 秒数

---

8. 大規模サイト向け：サイトマップの分割生成

記事数が5万件を超える場合、Next.js公式のgenerateSitemaps関数でIDベースの分割が可能です。

// app/sitemap.ts
import { MetadataRoute } from 'next'
import { PostService } from '@/lib/db/services/postService'

const BASE_URL = 'https://example.com'
const LIMIT = 10000 // 1ファイルあたりのURL数

export async function generateSitemaps() {
  const totalPosts = await new PostService().count()
  const pageCount = Math.ceil(totalPosts / LIMIT)

  // [{ id: 0 }, { id: 1 }, { id: 2 }] のような配列を返す
  return Array.from({ length: pageCount }, (_, i) => ({ id: i }))
}

export default async function sitemap({
  id,
}: {
  id: number
}): Promise<MetadataRoute.Sitemap> {
  const offset = id * LIMIT
  const posts = await new PostService().findMany({ limit: LIMIT, offset })

  return posts.map((post) => ({
    url: `${BASE_URL}/posts/${post.slug}`,
    lastModified: post.updatedAt,
    changeFrequency: 'weekly',
    priority: 0.7,
  }))
}

この実装で /sitemap/0.xml, /sitemap/1.xml ... が自動生成されます。

---

9. 実装後のチェックリスト

---

まとめ

Next.js 16でのサイトマップ運用は、用途別に分割することで管理しやすくなります。

1. サイトマップインデックス で全体を統合管理
2. メインサイトマップ は公式APIでシンプルに
3. 記事サイトマップ は Route Handler で柔軟に
4. News Sitemap でGoogle News対応
5. ISR でDB負荷とクロール最適化のバランス

これらを組み合わせることで、SEOに強く、かつメンテナンスしやすいサイトマップシステムが構築できます。