Introduction

As SEO is important for websites, it is a common practice to have the all the routes of a website put into a xml file called the sitemap.xml . This file is then submitted to the search engine platforms via an url for faster and better indexing. The links in this xml are then crawled by the search engine bots and all the pages of the website are indexed in the search engine database.

For example a sitemap xml file could be accessed via a route https://example.com/sitemap.xml. This could be set up as a part of the webserver configuration. For the sample project I have used nginx webserver. The sample project used in this blog is a continuation of my previous blog on setting up prerender for vue using nginx where I explain in detail the configuration of prerendering using prerender.io and nginx. In the same nginx file you can also find the route alias configuration setup to access the sitemap at the right path.

# this alias path can be modified with the right sitemap xml path in the folder 
location /sitemap.xml { 
alias /usr/share/nginx/html/sitemap.xml; 
}

Now as the setup of the path is done, now we will see how we can generate the xml file using webpack.

Setup

For the generation of the sitemap.xml I have used a webpack plugin called sitemap-webpack-plugin. Here I have linked the npm package and the git repository of the plugin. I have used this plugin for the xml generation only although the method of generation is altered with respect to the version showed in the git repository. I have done this change to achieve a sophisticated setup for a large scale production project where there might be static and dynamic links in the project that might have to be added to the sitemap.

One such example is when there are static routes from the vue-router and dynamic routes from a CMS or a blog database, all have to be added to the generated sitemap.

Logic

First we will create an empty sitemap.json into which the routes will be written by a sitemap generator. Then from the sitemap.json the webpack plugin will generate a compiled xml output as sitemap.xml. This file will be put as a part of the built file structure for deployment i.e dist folder.

Let us assume there are 2 static routes i.e Root: ‘/’ and About: ‘/about’. Now these routes are put into the json file using the generator as follows.

The above code is an example for static routes. If you want to add dynamic routes from an api you need to uncomment the lines in the above file. The routes are then written into the sitemap.json file. The sitemap.json is generated it looks as follows:

{ 
"routes":[ 
    "/", 
    "/about", 
    "/blog-post/example-blog-url" //This line will be there only if you use an api in sitemap.js ]
}

The above file is used as an input to the webpack plugin configured in the vue.config.js file of the project. It looks as follows:

const SitemapPlugin = require('sitemap-webpack-plugin') 
const sitemapJSON = require('./public/sitemap.json') 
module.exports = { 
configureWebpack: { 
plugins: [ new SitemapPlugin.default(process.env.VUE_APP_CLIENT_URL, sitemapJSON.routes, { filename: 'sitemap.xml' }) ] 
} }

All the above operations will be performed with the build prod command shown below in the package.json

"build-prod": "NODE_ENV=production node src/sitemap/sitemap.js & vue-cli-service build"

The generated sitemap.xml file is as follows:

<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1"> <url> <loc>https://example.com/</loc> </url> <url> <loc>https://example.com/about</loc> </url> </urlset>

Now this file can be submitted to different search engines. The most popular ones are Google Search Console and Bing Webmaster tools.

You can access the whole code for this project in my git repository here.