KurocoでXMLsitemapは作成できますか

現状では、XMLsitemap(sitemap.xml)を自動で作成する機能は用意しておりません。XMLsitemapはフロントエンドにて実装をお願いいたします。

XMLsitemapを実装するには

Headless CMSでは、コンテンツ管理（バックエンド）と表示（フロントエンド）が分離されているため、 ページ数など実際の URL の構造はフロントエンド側で決定されます。(Kurocoのコンテンツ数=ページ数にはならない)
そのため、XMLsitemapはフロント側で対応をすることが一般的です。

基本的な実装方法

各フレームワークごとに、実装方法は異なります。 以下のドキュメントを一例に XMLsitemap の実装方法をご検討ください。

• Next.js
• Nuxt 3

Next.js

例えば Next.js では、app ディレクトリにsitemap.ts（またはsitemap.js）を作成することで、XML サイトマップを生成できます：

// app/sitemap.ts
import type { MetadataRoute } from 'next';

export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: 'https://www.diverta.co.jp/',
      lastModified: new Date(),
      changeFrequency: 'yearly',
      priority: 1,
    },
    {
      url: 'https://www.diverta.co.jp/about',
      lastModified: new Date(),
      changeFrequency: 'monthly',
      priority: 0.8,
    },
    {
      url: 'https://www.diverta.co.jp/products',
      lastModified: new Date(),
      changeFrequency: 'weekly',
      priority: 0.5,
    },
  ];
}

このコードは以下のような XML を生成します：

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://www.diverta.co.jp/</loc>
    <lastmod>2024-01-06T15:02:24.021Z</lastmod>
    <changefreq>yearly</changefreq>
    <priority>1</priority>
  </url>
  <!-- 他のURLエントリー -->
</urlset>

Nuxt.js

Nuxt 3 では、@nuxtjs/sitemap モジュールを使用して XML サイトマップを生成できます。

1. モジュールのインストール

npx nuxi module add @nuxtjs/sitemap

2. nuxt.config.ts での設定

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/sitemap'],
  site: {
    url: 'https://your-site.com',
  },
});

この設定により、静的ページは自動的に検出されサイトマップに追加されます。生成されたサイトマップは /sitemap.xml で確認できます。

3. 動的URLの追加

Kuroco をヘッドレス CMS として使用する場合、ブログ記事などの動的 URL をサイトマップに追加する必要があります。

サーバーAPIエンドポイントの作成

server/api/__sitemap__/urls.get.ts ファイルを作成して、Kuroco からコンテンツを取得します：

ヒント

ファイル名は urls.get.ts とし、.get.ts 拡張子を使用してください。これにより、GETリクエストとして明示的に認識されます。

// server/api/__sitemap__/urls.get.ts
import type { SitemapUrl } from '#sitemap/types';

export default defineSitemapEventHandler(async () => {
  const config = useRuntimeConfig();
  const urls: SitemapUrl[] = [];

  try {
    // ニュース記事を取得
    const newsResponse = await $fetch<any>(
      `${config.public.kurocoApiDomain}/rcms-api/1/news/list`
    );

    if (newsResponse?.list) {
      const newsUrls = newsResponse.list.map((news: any) => ({
        loc: `/news/detail/${news.topics_id}`,
        lastmod: news.ymd || news.update_date,
      }));
      urls.push(...newsUrls);
    }
  } catch (error) {
    console.error('Failed to fetch news for sitemap:', error);
  }

  return urls;
});

nuxt.config.tsの設定

nuxt.config.ts に以下の設定を追加します：

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/sitemap'],

  site: {
    url: 'https://your-site.com',
  },

  sitemap: {
    // 動的URLソースを明示的に登録
    sources: [
      '/api/__sitemap__/urls',
    ],
    // 会員限定ページやプレビューページを除外
    exclude: [
      '/mypage/**',
      '/preview/**',
    ],
  },
});

生成されるsitemap.xmlの例

上記の設定により、以下のようなsitemap.xmlが生成されます：

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
    <!-- 静的ページ -->
    <url>
        <loc>https://your-site.com/</loc>
    </url>
    <url>
        <loc>https://your-site.com/company</loc>
    </url>
    <url>
        <loc>https://your-site.com/news</loc>
    </url>

    <!-- 動的ページ（Kurocoから取得） -->
    <url>
        <loc>https://your-site.com/news/detail/1</loc>
        <lastmod>2023-06-20</lastmod>
    </url>
    <url>
        <loc>https://your-site.com/news/detail/3</loc>
        <lastmod>2023-03-20</lastmod>
    </url>
</urlset>