How to update Sitemap.xml dynamically using Javascript in 10 Minutes.

In this article, I will explain how to update Sitemap.xml file dynamically for a website using Javascript (for any SPA like angular react, etc).

SEO Play a very important role for almost every website, and Sitemap.xml is very basic and important part of SEO in order to index your webpages.

Sitemaps are an easy way for webmasters to inform search engines about pages on their sites that are available for crawling. In its simplest form, a Sitemap is an XML file that lists URLs for a site along with additional metadata about each URL (when it was last updated, how often it usually changes, and how important it is, relative to other URLs in the site) so that search engines can more intelligently crawl the site.

I preassume you must be aware of sitemap and its importance, else you can google it you will find plenty of docs about sitemap.

Why we need Dynamic Sitemap file?

Although there many Online tools available which create a sitemap for you. But, sometimes they are not able to fetch all dynamic URLs/links needed for us.

There could be many cases when you need to create a dynamic sitemap file, for example when you are working with Dynamic content management system, Dynamic Blogs, E-Commerce websites, etc.

Steps to create Dynamic Sitemap File

To create a file in .xml format we need to use the npm package named xml-js, and fs — a file system for reading and writing into the file.

The very first step is to install package using the command

npm i xml-js — save — dev

Now there could be multiple options either you have a static list of URL’s which needs to be updated on sitemap or you need to fetch using HTTP request.

(Assuming you have a list of URL’s, If anybody wants to know the method of getting a list of URL using HTTP, can refer to full source code)

The second step is you have to convert existing sitemap into JSON format so that we can add new URL entries into that, for that we need to access file using fs -

const convert = require('xml-js'),
      options = { compact: true, ignoreComment: true, spaces: 4 };
fs.readFile('src/sitemap.xml', (err, data) => {
  if (data) { 
    const existingSitemapList = JSON.parse(convert.xml2json(data,    options));
  }
});

Now, we have all the URLs of existing sitemap into JSON format in the variable existingSitemapList.

Next, you need to push new URLs into that (existingSitemapList) array.

Here you can see there could be multiple options depending on your requirement you can pass like a priority, changefreq, lastmode, etc.

PS : This is the format of we get while reading sitemap.xml using xml-js , so we need to write in the same format.

Now we have a full list of URLs and our next step would be to update this data into existing sitemap.xml file.

const finalXML = convert.json2xml(newUrlsList, options); // to convert json text to xml text

Here finalXML has all the data into an XML format which needs to update on sitemap.xml file using below steps -

Steps to writing into existing sitemap.xml file using fs

That’s it!!

I have added the whole source code into Github repo, in case you need to refer to it.

For those who are using this script with Angular

https://github.com/erpardeepjain/angular-dynamic-sitemap-update-script

MrPardeep/dynamic-sitemap-update-js

Video blog

…Ending Note 💥

I hope you found this post useful If so don’t hesitate to clap this story.

Do you still have any query/appreciation words 😍 shoot me a message on LinkedIn, or on Twitter.