DEV Community

Build for Search
Build for Search

Posted on

Web Development SEO: How to Build a Reliable XML Sitemap for a JavaScript Website

A website can have useful pages, clean URLs, and a well-organized navigation system, yet some pages may still be difficult for search engines to discover.

This is especially worth checking on JavaScript websites, where routes may be generated dynamically and new pages can be added without changing the main navigation.

An XML sitemap provides search engines with a list of URLs that a website owner considers important. It does not guarantee indexing, but it can help search engines discover eligible pages.

For developers working on Web Development SEO, generating and maintaining a correct sitemap should be part of the website's technical setup.

1. Understand What Belongs in a Sitemap

An XML sitemap should contain the canonical URLs of pages that you want search engines to discover.

For example, a website might include URLs for:

  • Main service pages
  • Important product pages
  • Published blog posts
  • Useful category pages

However, not every URL belongs in the sitemap.

Avoid including URLs that redirect, return errors, are blocked from indexing, or are duplicates of another preferred URL.

Consider a website with these routes:

/
 /services
 /services/web-development
 /blog
 /blog/website-performance
 /login
 /search?q=seo
Enter fullscreen mode Exit fullscreen mode

The homepage, service pages, and published article may be appropriate sitemap entries. The login page and parameter-based search URL should be evaluated separately and generally should not be included unless there is a specific reason they are intended for search.

The important rule is simple: include the URLs that you actually want search engines to consider.

2. Generate Valid XML

A basic XML sitemap looks like this:

<?xml version="1.0" encoding="UTF-8"?>
<urlset
  xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
>
  <url>
    <loc>https://example.com/</loc>
  </url>

  <url>
    <loc>https://example.com/services</loc>
  </url>

  <url>
    <loc>https://example.com/services/web-development</loc>
  </url>

  <url>
    <loc>https://example.com/blog/website-performance</loc>
  </url>
</urlset>
Enter fullscreen mode Exit fullscreen mode

Replace the example URLs with real canonical URLs from your website.

Notice that each URL uses the complete HTTPS address. The XML structure must also be valid, with correctly opened and closed elements.

For production websites, generate this file from the same source that manages your published pages rather than maintaining a long list manually.

3. Generate the Sitemap From Your Application Data

For a JavaScript application, sitemap generation can be connected to your content management system, database, or static route configuration.

For example, a simplified Node.js function could generate XML from a list of approved URLs:

function escapeXml(value) {
  return value
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&apos;");
}

function generateSitemap(urls) {
  const entries = urls
    .map(
      (url) => `
  <url>
    <loc>${escapeXml(url)}</loc>
  </url>`
    )
    .join("");

  return `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
${entries}
</urlset>`;
}

const urls = [
  "https://example.com/",
  "https://example.com/services",
  "https://example.com/blog/website-performance",
];

const sitemap = generateSitemap(urls);
console.log(sitemap);
Enter fullscreen mode Exit fullscreen mode

This is a minimal illustration, not a complete production implementation. In a real project, validate each URL against an approved route or content record, exclude non-indexable pages, and write the generated XML to the correct public location.

Do not build the sitemap from every URL that happens to appear in application logs or user-generated input.

4. Keep the Sitemap Updated

A sitemap becomes less useful when it contains outdated URLs.

Imagine that a developer publishes a new article but forgets to add it to a manually maintained sitemap. The page might still be discovered through internal links, but the sitemap would no longer represent the current website accurately.

A better approach is to generate sitemap entries from published content.

When a page is published, it can become eligible for inclusion. When a page is permanently removed, its URL should be removed from the sitemap. When a URL changes, update the sitemap to use the new canonical URL and configure an appropriate redirect if necessary.

For a large website, consider splitting the sitemap into multiple files and using a sitemap index when the documented limits require it.

5. Make the Sitemap Publicly Accessible

After generating the file, make sure it is available at a predictable URL, commonly:

https://example.com/sitemap.xml
Enter fullscreen mode Exit fullscreen mode

Check the response in a browser or with a command-line tool:

curl -I https://example.com/sitemap.xml
Enter fullscreen mode Exit fullscreen mode

The endpoint should return the expected successful HTTP status rather than a redirect loop, server error, or HTML page generated by the frontend application.

If your application uses a fallback route that serves index.html for unknown URLs, verify that /sitemap.xml is handled correctly. A sitemap URL that returns the website's HTML is not a valid XML sitemap.

You can also reference the sitemap in your robots.txt file:

User-agent: *
Allow: /

Sitemap: https://example.com/sitemap.xml
Enter fullscreen mode Exit fullscreen mode

This example assumes that the site does not need additional crawling restrictions. Do not copy the Allow rule blindly if your project has specific robots directives.

6. Validate Before Submitting

Before considering the sitemap complete, check the following:

  • Every listed URL belongs to the correct domain.
  • URLs use HTTPS when that is the site's canonical protocol.
  • Pages return the expected HTTP status.
  • Redirecting and broken URLs are excluded.
  • Canonical URLs are used consistently.
  • XML syntax is valid.
  • Important pages are not accidentally excluded.
  • The sitemap updates when published content changes.

Then submit the sitemap through Google Search Console and review any reported errors.

Google's official sitemap documentation explains how to create, manage, and submit sitemaps.

Remember that submission is a discovery signal, not a guarantee that every listed URL will be crawled or indexed. Search engines still decide which pages to index.

Final Thoughts

A sitemap is a small technical component, but it becomes important when a website has many routes, frequently updated content, or a JavaScript-based architecture.

Developers can make sitemap management more reliable by generating URLs from trusted content data, validating the output, and updating it automatically when pages change.

As part of a broader Web Development SEO workflow, this simple practice helps keep a website's discovery signals organized and reduces avoidable sitemap errors.

AI disclosure: This article was prepared with AI assistance. Review the technical examples, test them against your own application, and make sure you understand the implementation before publishing.

Top comments (0)