logo
Published on

nextjsでsitemapを準備する

著者
  • profile
    名前
    平原典彦
nextjsでsitemapを準備は以下のドキュメントを読めばすぐに実装ができます。
Metadata Files: sitemap.xml

API Reference for the sitemap.xml file.

おすすめはtypescriptでの実装です。
app/sitemap.ts
import type { MetadataRoute } from 'next'
 
export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: 'https://acme.com',
      lastModified: new Date(),
      changeFrequency: 'yearly',
      priority: 1,
    },
    {
      url: 'https://acme.com/about',
      lastModified: new Date(),
      changeFrequency: 'monthly',
      priority: 0.8,
    },
    {
      url: 'https://acme.com/blog',
      lastModified: new Date(),
      changeFrequency: 'weekly',
      priority: 0.5,
    },
  ]
}
typescript内ではプログラムが組めるので、apiからの情報をsitemap.xmlに追加することも簡単です。
import { MetadataRoute } from 'next';
import { gqlPosts } from '@/api/QueryPosts';

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const baseURL = process.env.NEXT_PUBLIC_BASE_URL || '';
  const lastModified = new Date();

  const posts = await gqlPosts({
    skip: 0,
    take: 1000,
  });

  const dynamicPaths = posts.data.map((post) => ({
    url: `${baseURL}/news/${post.id}`,
    priority: 0.6,
    lastModified: post.publishDate,
  }));

  const staticPaths = [
    {
      url: baseURL,
      lastModified,
      priority: 1,
    },
    {
      url: `${baseURL}/about`,
      lastModified,
      priority: 0.8,
    },
  ];

  return [...staticPaths, ...dynamicPaths];
}
google search console に登録する際はrobot.txtも登録する必要があります。
/app/robots.ts
import type { MetadataRoute } from 'next'

export default function robots(): MetadataRoute.Robots {
  const baseURL = process.env.NEXT_PUBLIC_BASE_URL || ''

  return {
    rules: {
      userAgent: '*',
      allow: '/',
    },
    sitemap: `${baseURL}/sitemap.xml`,
  }
}
これで正しくsitemapが登録されるようになります。