Sitemaps can be a complicated process when using WordPress in a headless environment. Thankfully, Faust takes care of all your sitemap needs through a simple function, getSitemapProps.

How It Works

getSitemapProps works by proxying your existing sitemaps from WordPress to your frontend, while replacing any WordPress URLs with your headless frontend’s URL.

This means there are no constraints in how your sitemaps are created on WordPress, giving you the flexibility to use plugins such as Yoast or XML Sitemaps. As long as your WordPress sitemaps matches the following criteria, they will be proxied:

• Conform to the XML Sitemaps specification
• Has sitemap in their pathname (ex. /page-sitemap.xml)
• Has .xml as their extension

Setup

To get started, create sitemap.xml.js in your pages directory with the following content:

// In pages/sitemap.xml.js:

import { getSitemapProps } from '@faustwp/core';

export default function Sitemap() {}

export function getServerSideProps(ctx) {
  return getSitemapProps(ctx, {
    frontendUrl: process.env.FRONTEND_URL,
  });
}
Code language: JavaScript (javascript)

getSitemapProps accepts two required arguments. The first is the ctx object passed from getServerSideProps, and the second is the getSitemapProps configuration object. There is only one required property in the configuration object, and it’s the frontendUrl. This is the URL to your frontend Faust site. In the example above, we are reference this from the environment. You can do the same by setting the process.env.FRONTEND_URL environment variable.

This is all the configuration you need to get started. As you can see, if you now go to /sitemap.xml on your headless frontend, you will see the sitemap index file being proxied over with properly formatted URLs.

Additional Configuration

Ignoring Paths

There will be instances in which you don’t want to proxy over a specific path. For example, if you have a custom post type that you want to exclude from your sitemap, you can do so by adding it to the sitemapPathsToIgnore array.

// pages/sitemap.xml.js:

import { getSitemapProps } from '@faustwp/core';

export default function Sitemap() {}

export function getServerSideProps(ctx) {
  return getSitemapProps(ctx, {
    frontendUrl: process.env.FRONTEND_URL,
    sitemapPathsToIgnore: ['/wp-sitemap-users-1.xml'],
  });
}
Code language: JavaScript (javascript)

You can additionally use a wildcard to ignore sitemap paths that may be paginated:

// pages/sitemap.xml.js:

import { getSitemapProps } from '@faustwp/core';

export default function Sitemap() {}

export function getServerSideProps(ctx) {
  return getSitemapProps(ctx, {
    frontendUrl: process.env.FRONTEND_URL,
    sitemapPathsToIgnore: ['/wp-sitemap-users-*'],
  });
}
Code language: JavaScript (javascript)

Defining Next.js Pages for Sitemaps

The above code examples account for adding your WordPress content to your sitemap, but what about the file based pages you’ve created in Next.js? Say for an example we have src/pages/about.tsx and we’d like to include it in our sitemap. That can be done by creating a pages property in the getSitemapProps config object:

// pages/sitemap.xml.js:

import { getSitemapProps } from '@faustwp/core';

export default function Sitemap() {}

export function getServerSideProps(ctx) {
  return getSitemapProps(ctx, {
    frontendUrl: process.env.FRONTEND_URL,
    pages: [
      {
        path: '/about',
      },
    ],
  });
}
Code language: JavaScript (javascript)

The path property is a relative path to the page you want to include in your sitemap and is the only required field. Take a look at the reference doc for more of the available options.

Examples

Below you can find some drop in examples for different XML Sitemap configurations on WordPress.

NOTE
Be sure to define your pages property in your getSitemapProps config object if you have any Next.js specific pages you want included in your sitemap.

Usage with default WordPress Sitemaps

Below is a drop in configuration using default WordPress sitemaps. This assumes you want to ignore the “users” sitemap:

// pages/sitemap.xml.js:

import { getSitemapProps } from '@faustwp/core';

export default function Sitemap() {}

export function getServerSideProps(ctx) {
  return getSitemapProps(ctx, {
    frontendUrl: process.env.FRONTEND_URL,
    sitemapPathsToIgnore: ['/wp-sitemap-users-*'],
  });
}
Code language: JavaScript (javascript)

Usage with Yoast

Below is a drop in configuration using Yoast’s sitemap. This assumes you want to ignore the “author” sitemap:

// pages/sitemap.xml.js:

import { getSitemapProps } from '@faustwp/core';

export default function Sitemap() {}

export function getServerSideProps(ctx) {
  return getSitemapProps(ctx, {
    frontendUrl: process.env.FRONTEND_URL,
    sitemapPathsToIgnore: ['/author-sitemap.xml'],
  });
}
Code language: JavaScript (javascript)