Contact Us

Recently, while working on a Sitecore XM Cloud project with multiple websites and a complex language setup, as a Solution Architect, I encountered a challenge: how do we efficiently generate a sitemap for multiple websites, each supporting multiple languages, in a headless environment?

Sitecore XM Cloud lacks built-in sitemap generation, unlike its XP counterpart. Since we were using headless architecture with Next.js, we needed a custom solution to dynamically generate XML sitemaps for each website and language variation.

Our approach had to optimize performance by leveraging caching and API calls instead of querying Sitecore directly every time while ensuring search engines like Google could easily crawl and index the content.

Here’s how I tackled the problem, complete with configurations and code snippets.


Step 1: Understanding the Sitemap structure

Each website needed its own sitemap, with URLs structured based on the site’s language variations. A typical sitemap for our setup would look like this:

undefined (76) 

Since we had 38 domains in scope and multiple language variants for each, the sitemap needed to be generated dynamically.


Step 2: Creating the Sitemap Generator API in Next.js

Since our front-end was built with Next.js, we created a serverless API route to dynamically generate the sitemap.

Setting up the Sitemap API route

undefined (77)

Fetching Sitecore routes

Since we were using headless Sitecore, we had an API that returned the list of valid URLs for each website and language. Here’s how we fetched those URLs:

undefined (6)

This API fetches all published pages from Sitecore and constructs URLs for the sitemap.


Step 3: Handling multi-site and multi-language configurations

Each site in our Sitecore instance had its own root node and language versions. To dynamically fetch pages for each site and language, we updated our fetchSitecoreRoutes function to include parameters for site and language.

undefined (6)

Now, when generating sitemaps, we iterate over each site and language:

A computer screen shot of white text__AI-generated content may be incorrect_

This ensures that each website gets a properly structured sitemap for every language.


Step 4: Caching the Sitemap for performance

Since generating the sitemap on every request would be inefficient, we leveraged Next.js Incremental Static Regeneration (ISR) to cache the sitemap for a fixed duration.

We modified the API to use ISR by updating getStaticProps:

undefined (78)

This drastically reduced the load on our API and ensured the sitemap stayed updated daily.


Step 5: Submitting the Sitemap to search engines

Finally, we needed to submit the sitemap to Google Search Console and Bing Webmaster Tools. For automation, we used the following curl command:

A screen shot of a computer code__AI-generated content may be incorrect_ (2)

This ensured that search engines were always aware of the latest sitemap updates.


What’s Next?

Building a custom sitemap generator for Sitecore XM Cloud in a multi-site, multi-language headless environment was an exciting challenge. By leveraging Next.js API routes, dynamic route fetching, caching, and search engine submission, we ensured a scalable and efficient solution.

This approach is extendable – you can add priority logic, exclude certain pages, or even generate image sitemaps using the same principles.

If you have any questions or want to discuss your approach, reach out to me at marketing@altudo.co or you can also contact our team of experts for 1:1 no obligation consultation.

Need Help?