XML Sitemap Guides for APIs, SPAs, Headless CMS and E-commerce

Modern websites do not always fit the old crawler-based sitemap workflow.

A simple static website can usually be crawled from the homepage. But many modern projects are built with React, Next.js, Vue, Nuxt, headless CMS platforms, private APIs, product catalogs, localized routes, image-heavy pages, and backend data that is not always easy for a crawler to discover.

That is where a better sitemap workflow becomes useful.

SitemapFlow is built for websites where the real source of URL data is not just HTML links. It may be a REST API, a JSON response, a product database, a CMS endpoint, a protected API, or a dynamic route system.

These guides explain how to generate XML sitemaps from APIs, map JSON fields into URL patterns, handle SPA routes, include image sitemap data, configure hreflang patterns, and build cleaner sitemaps without depending entirely on traditional crawlers.

If you are trying to generate a sitemap for a JavaScript website, a headless CMS, an e-commerce store, or any site with dynamic URLs, start here.

Generate an XML Sitemap from a REST API

Learn how to turn REST API data into valid XML sitemap URLs.

This guide explains how to connect an API endpoint, read a JSON response, map fields like [response.slug], [response.id], or [response.category.slug], and generate dynamic sitemap URLs without crawling your frontend.

It is useful for developers, SEO specialists, and site owners who need a REST API sitemap generator, a JSON to XML sitemap workflow, or a crawler-free way to build sitemaps from backend data.

Best for:
  • REST API sitemap generation
  • JSON to XML sitemap mapping
  • Dynamic URL patterns
  • Backend-driven websites
  • Headless CMS content
  • Product catalogs
  • Programmatic SEO pages
Read the guide

XML Sitemaps for React, Next.js, Vue, Nuxt and SPAs

Single Page Applications and JavaScript-heavy websites often have routes that are generated from data instead of static files.

This guide explains how XML sitemaps work for React, Next.js, Vue, Nuxt and other SPA-based websites. It covers dynamic routes, API-driven pages, client-side navigation, static pages, and how to make important URLs easier for search engines to discover.

It is especially helpful if you are searching for terms like React sitemap generator, Next.js dynamic sitemap, Vue sitemap, Nuxt sitemap, SPA sitemap generator, or JavaScript SEO sitemap.

Best for:
  • React websites
  • Next.js dynamic routes
  • Vue and Nuxt projects
  • JavaScript SEO
  • Client-side route discovery
  • SPA sitemap generation
  • Headless frontend projects
Read the guide

Generate Sitemaps from Protected APIs Using HTTP Headers

Some websites store public page data behind APIs that require authorization headers, bearer tokens, API keys, or custom HTTP headers.

This guide explains how protected API sitemap generation works, when to use HTTP headers, and how to safely map authorized API responses into sitemap URLs.

It is useful for private CMS endpoints, staging APIs, internal product databases, protected backend routes, and APIs that require headers such as Authorization, x-api-key, or custom tokens.

Best for:
  • Protected API sitemap generation
  • API key sitemap workflows
  • Bearer token sitemap access
  • Private CMS endpoints
  • Custom HTTP headers
  • Internal backend data
  • Secure API-based sitemap creation
Read the guide

Dynamic Image and Hreflang Sitemaps for E-commerce Websites

E-commerce websites often need more than basic page URLs.

Product pages may have images, localized versions, alternate language URLs, country-specific domains, category paths, and thousands of dynamic records loaded from an API.

This guide explains how to generate image sitemaps and hreflang sitemap entries from API data. It covers product image URLs, image titles, captions, x-default, localized paths, subdomains, and multilingual URL patterns.

Best for:
  • E-commerce sitemap generation
  • Product image sitemaps
  • Hreflang sitemap patterns
  • Multilingual websites
  • Localized product URLs
  • International SEO
  • Headless commerce projects
Read the guide

Why these sitemap guides exist

Many sitemap tools still assume that every important URL can be found by crawling links from the homepage.

That is not always true anymore.

A modern website may load products through JavaScript. A blog may pull articles from a headless CMS. A marketplace may have listings hidden behind pagination. A documentation site may generate routes from structured content. An international website may use different paths or subdomains for each language.

In those cases, a crawler can miss URLs, generate incomplete results, or include pages that should not be indexed.

A better workflow starts from the source of truth.

For many websites, that source is the API.

SitemapFlow helps you define static pages, connect dynamic API routes, map JSON fields into URL patterns, add images, configure alternate language versions, audit the output, and export a structured XML sitemap.

These guides are designed to help you understand that workflow before you generate the final XML.

What you can learn here

The SitemapFlow guides cover practical sitemap problems such as:

  • how to generate an XML sitemap from a REST API
  • how to create a sitemap from JSON data
  • how to map nested API fields into URLs
  • how to build dynamic sitemap URLs with [response.slug]
  • how to generate sitemaps for React, Next.js, Vue and Nuxt
  • how to handle dynamic routes in SPAs
  • how to create sitemaps from protected APIs
  • how to use HTTP headers and API keys for sitemap generation
  • how to include product images in XML sitemaps
  • how to create hreflang sitemap entries
  • how to handle multilingual routes and x-default
  • how to avoid crawler issues on API-based websites
  • how to organize large e-commerce and headless CMS sitemaps

Each guide focuses on one real sitemap problem and shows how SitemapFlow solves it without forcing you to write custom sitemap code.

Who these guides are for

These guides are written for people who manage modern websites with dynamic data. They are useful for:

  • frontend developers
  • full-stack developers
  • SEO specialists
  • technical SEO teams
  • agencies
  • e-commerce teams
  • SaaS teams
  • headless CMS users
  • website owners
  • makers building API-based products

You do not need to be an SEO expert to understand the basics. The goal is to explain sitemap generation in a practical way, using real examples such as API endpoints, JSON responses, route patterns, image fields, and alternate language URLs.

Start with the right sitemap workflow

If you are new to API-based sitemap generation, start with the REST API guide.

If your main problem is a JavaScript framework, read the React, Next.js, Vue and Nuxt guide.

If your API requires authentication, read the protected API headers guide.

If your website has products, images, or multiple languages, read the e-commerce image and hreflang guide.

Or go directly to SitemapFlow and start building your XML sitemap from your own static pages and dynamic API routes.

Generate your XML sitemap

FAQ

What is the best guide to start with?

Start with How to Generate an XML Sitemap from a REST API if your website uses API data to create pages. It explains the core SitemapFlow workflow: connect an endpoint, map response fields, and generate XML sitemap URLs.

Can these guides help with React or Next.js sitemaps?

Yes. The React, Next.js, Vue and Nuxt guide is focused on JavaScript websites, Single Page Applications, dynamic routes, and API-based page generation.

Can I generate a sitemap from JSON?

Yes. If your JSON response contains fields such as slug, id, category, updatedAt, image URLs, or localized paths, SitemapFlow can map those fields into XML sitemap entries.

Can SitemapFlow work with protected APIs?

Yes. SitemapFlow supports HTTP headers for API requests, which makes it possible to generate sitemaps from APIs that require authorization headers, bearer tokens, API keys, or other custom headers.

Are these guides only for developers?

No. Developers will understand the technical examples quickly, but the guides are also useful for SEO teams, agencies, site owners, e-commerce teams, and anyone responsible for making dynamic website URLs easier to discover.

Does SitemapFlow replace a crawler?

SitemapFlow is designed for a different workflow. Instead of crawling your frontend to guess which URLs exist, it can use your API data as the source for sitemap generation. For dynamic websites, that can be cleaner and more predictable than relying only on crawling.

Can I use SitemapFlow for e-commerce websites?

Yes. SitemapFlow is a strong fit for e-commerce websites because product URLs, category pages, images, brands, collections, and localized routes often come from structured API data.

Can I include images and hreflang in my sitemap?

Yes. SitemapFlow supports image sitemap fields and alternate language patterns, which is useful for product images, multilingual websites, international SEO, and localized content.