What is a Sitemap?

A sitemap is a file (usually XML) that lists all the important pages of your website to help search engines like Google discover, crawl, and index your content more efficiently.

An XML sitemap tells search engines:

seo.webp


  • What pages exist
  • When they were last updated
  • How frequently they change
  • Their importance relative to other pages

How to Add a Sitemap in Payload CMS

Payload CMS doesnt include a built-in sitemap feature, but you can easily generate one programmatically using a server route and your collections/pages.

Steps to Add a Sitemap to Payload CMS

  1. Create a Custom Sitemap Route

In your Payload project, create a sitemaps folder inside your /app/(frontend)/(sitemaps)/static/route.ts

if you have both static and dynamic pages, you have to create static sitemap manually dynamic route programmatically from collections

Example: Statc page sitemap

import { getServerSideSitemap } from 'next-sitemap'

export async function GET() {

 const SITE_URL = process.env.NEXT_PUBLIC_SERVER_URL

const pages = ['/', '/aboutus', '/blogs', '/services', '/contact-us', '/projects']

return getServerSideSitemap(

    pages.map((page) => ({

      loc: `${SITE_URL}${page}`,

      lastmod: new Date().toISOString(),

    })),

  )

}

Example: dynamic blog site map

import { getServerSideSitemap } from 'next-sitemap'

import { getPayload } from 'payload'

import config from '@payload-config'

import { unstable_cache } from 'next/cache'


const getPostsSitemap = unstable_cache(

  async () => {

    const payload = await getPayload({ config })

    const SITE_URL =

      process.env.NEXT_PUBLIC_SERVER_URL ||

      process.env.VERCEL_PROJECT_PRODUCTION_URL ||

     const results = await payload.find({

      collection: 'posts',

      overrideAccess: false,

      depth: 0,

      limit: 1000,

      pagination: false,

      select: {

        slug: true,

        updatedAt: true,

      },

    })

const dateFallback = new Date().toISOString()

    const sitemap = results.docs

      ? results.docs

          .filter((post) => Boolean(post?.slug))

          .map((post) => ({

            loc: `${SITE_URL}/posts/${post?.slug}`,

            lastmod: post.updatedAt || dateFallback,

          }))

      : []

return sitemap

  },

  ['posts-sitemap'],

  {

    tags: ['posts-sitemap'],

  },

)

export async function GET() {

  const sitemap = await getPostsSitemap()

  return getServerSideSitemap(sitemap)

}

3. Register Your Sitemap with Google

Once your sitemap is live at https://yourdomain.com/sitemap.xml: