Can Kuroco Generate an XML Sitemap?

Currently, there is no built-in feature to automatically generate an XML sitemap (sitemap.xml). Please implement the XML sitemap on the frontend.

How to Implement an XML Sitemap

In a headless CMS, content management (backend) and presentation (frontend) are separated. As a result, the actual URL structure, including the number of pages, is determined on the frontend. (The number of contents in Kuroco does not equal the number of pages.) Therefore, it is common practice to handle the XML sitemap on the frontend.

Basic Implementation Methods

The implementation method varies depending on the framework used. Please refer to the following documentation as an example when implementing an XML sitemap.

• Next.js
• Nuxt 3

Next.js

For example, in Next.js, you can generate an XML sitemap by creating a sitemap.ts (or sitemap.js) file in the app directory:

// 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,
    },
  ];
}

This code generates the following 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>
  <!-- Other URL entries -->
</urlset>

Nuxt.js

In Nuxt 3, you can use the @nuxtjs/sitemap module to generate an XML sitemap.

1. Install the module

npx nuxi module add @nuxtjs/sitemap

2. Configure in nuxt.config.ts

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

With this configuration, static pages are automatically discovered and added to the sitemap. The generated sitemap can be viewed at /sitemap.xml.

3. Adding Dynamic URLs

When using Kuroco as a headless CMS, you may need to add dynamic URLs (e.g., blog posts) to the sitemap. Create a server API endpoint to fetch content from Kuroco and return the URLs:

Creating a Server API Endpoint

Create the server/api/__sitemap__/urls.get.ts file to retrieve content from Kuroco:

tip

Make sure the file name is urls.get.ts and use the .get.ts extension. This ensures that it is explicitly recognized as a GET request.

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

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

  try {
    // Fetch news articles
    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の設定

Add the following configuration to nuxt.config.ts:

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

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

  sitemap: {
    // Explicitly register dynamic URL sources
    sources: [
      '/api/__sitemap__/urls',
    ],
    // Exclude members-only pages and preview pages
    exclude: [
      '/mypage/**',
      '/preview/**',
    ],
  },
});

Example of the Generated sitemap.xml

With the configuration above, the following sitemap.xml will be generated:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
    <!-- Staric page -->
    <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>

    <!-- Dynamic pages (fetched from 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>